@import "tailwindcss";

/* Z-index scale: z-10 content → z-20 float → z-30 header → z-40 overlay → z-50 progress/toast */
@custom-variant prefers-reduced-motion {
  @media (prefers-reduced-motion: reduce) {
    @slot;
  }
}

@theme {
  --color-tech-blue: #4F7CFF;
  --color-navy: #121A2B;
  
  --color-primary-fixed: #dce1ff;
  --color-surface-container-high: #e1e8ff;
  --color-on-error: #ffffff;
  --color-primary-container: #3c6bed;
  --color-inverse-on-surface: #edf0ff;
  --color-inverse-surface: #283042;
  --color-on-surface-variant: #434654;
  --color-secondary-fixed-dim: #c8bfff;
  --color-secondary-fixed: #e5deff;
  --color-surface-variant: #dbe2fa;
  --color-error-container: #ffdad6;
  --color-error: #ba1a1a;
  --color-on-primary: #ffffff;
  --color-on-surface: #131b2c;
  --color-primary-fixed-dim: #b5c4ff;
  --color-tertiary-fixed-dim: #c4c7ca;
  --color-tertiary-container: #727578;
  --color-background: #faf9ff;
  --color-on-tertiary-fixed-variant: #44474a;
  --color-surface-container-low: #f1f3ff;
  --color-on-tertiary-fixed: #181c1f;
  --color-inverse-primary: #b5c4ff;
  --color-outline-variant: #c3c5d7;
  --color-on-tertiary: #ffffff;
  --color-on-secondary-fixed: #190064;
  --color-surface-bright: #faf9ff;
  --color-surface-container: #e9edff;
  --color-on-primary-container: #fffbff;
  --color-on-secondary-fixed-variant: #421dc9;
  --color-on-secondary-container: #fffbff;
  --color-on-error-container: #93000a;
  --color-surface-container-highest: #dbe2fa;
  --color-on-primary-fixed-variant: #003cad;
  --color-secondary-container: #715af8;
  --color-secondary: #583dde;
  --color-surface: #faf9ff;
  --color-primary: #1550d3;
  --color-surface-container-lowest: #ffffff;
  --color-tertiary-fixed: #e0e3e6;
  --color-on-tertiary-container: #fcfcff;
  --color-on-background: #131b2c;
  --color-tertiary: #595c60;
  --color-on-primary-fixed: #00164d;
  --color-surface-dim: #d2daf1;
  --color-outline: #737686;
  --color-surface-tint: #1a53d6;
  --color-on-secondary: #ffffff;
  
  --font-family-headline: 'Manrope', -apple-system, BlinkMacSystemFont, "SF Pro Display", Helvetica, Arial, sans-serif;
  --font-family-inter: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", Helvetica, Arial, sans-serif;
  
  --spacing-section: 120px;
  --spacing-gutter: 24px;
  
  --font-size-headline-md: 28px;
  --font-size-headline-lg: 40px;
  --font-size-display-xl: 64px;
  --font-size-body-lg: 18px;
  --font-size-body-base: 16px;
  --font-size-label-sm: 13px;
}

@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.05); }
}

@keyframes float-medium {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-15px, 15px) scale(1.05); }
}

@keyframes float-fast {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10px, -10px) scale(1.05); }
}

@keyframes danmaku-rtl {
  0% { transform: translateX(110vw); opacity: 0; }
  3% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}

@keyframes danmaku-ltr {
  0% { transform: translateX(-100%); opacity: 0; }
  3% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(110vw); opacity: 0; }
}

@keyframes breathe {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes revealUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes pageEnter {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes blurIn {
  0% { opacity: 0; filter: blur(8px); transform: scale(0.98); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

@layer components {
  .glass-card-premium {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 30px 60px rgba(18, 26, 43, 0.05), 0 0 0 1px rgba(79, 124, 255, 0.05) inset;
  }

  .btn-primary-gradient {
    background: linear-gradient(135deg, #4F7CFF 0%, #7861FF 100%);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(79, 124, 255, 0.3);
    filter: brightness(1.1);
  }

  .hover-lift {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 40px 80px rgba(79, 124, 255, 0.12);
  }

  .animate-float-slow {
    animation: float-slow 8s ease-in-out infinite;
  }

  .animate-float-medium {
    animation: float-medium 6s ease-in-out infinite;
  }

  .animate-float-fast {
    animation: float-fast 4s ease-in-out infinite;
  }

  .animate-danmaku-rtl {
    animation: danmaku-rtl 15s linear infinite backwards;
  }

  .animate-danmaku-ltr {
    animation: danmaku-ltr 15s linear infinite backwards;
  }

  .animate-breathe {
    animation: breathe 4s ease-in-out infinite;
  }

  .animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .animate-reveal-up {
    opacity: 0;
  }

  .animate-reveal-up.revealed {
    animation: revealUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .animate-page-enter {
    animation: pageEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .animate-blur-in {
    animation: blurIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.animate-reveal-up:focus-visible {
  outline: 2px solid var(--color-tech-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

body {
  font-family: var(--font-family-headline);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.glass-panel {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04);
}

.bg-blueprint {
  background-image: radial-gradient(c3c5d7 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  opacity: 0.4;
}

.ambient-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #dce1ff 0%, transparent 70%);
  opacity: 0.5;
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

.icon-fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.ethereal-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
  pointer-events: none;
}

.font-display-xl {
  font-family: var(--font-family-headline);
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.font-headline-lg {
  font-family: var(--font-family-headline);
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.font-headline-md {
  font-family: var(--font-family-headline);
  font-size: 28px;
  line-height: 1.3;
  font-weight: 600;
}

.font-body-lg {
  font-family: var(--font-family-headline);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
}

.font-body-base {
  font-family: var(--font-family-headline);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

.font-label-sm {
  font-family: var(--font-family-inter);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: 600;
}
