:root {
  --background: 0 0% 100%;
  --foreground: 224 28% 12%;
  --primary: 221 92% 56%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 30% 96%;
  --secondary-foreground: 224 28% 16%;
  --muted: 220 20% 94%;
  --muted-foreground: 224 12% 43%;
  --destructive: 350 78% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 18% 86%;
  --card: 0 0% 100%;
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
  --shadow-sm: 0 10px 30px hsl(220 30% 30% / 0.08);
  --shadow-md: 0 20px 60px hsl(220 35% 28% / 0.12);
  --shadow-lg: 0 34px 110px hsl(230 45% 35% / 0.16);
  --transition-fast: 160ms ease;
  --transition-smooth: 420ms cubic-bezier(.2,.8,.2,1);
}
.dark { --background: 230 42% 4%; --foreground: 214 38% 96%; --primary: 190 100% 64%; --primary-foreground: 230 42% 5%; --secondary: 228 34% 13%; --secondary-foreground: 214 38% 96%; --muted: 229 28% 16%; --muted-foreground: 218 18% 72%; --destructive: 350 86% 62%; --border: 219 30% 22%; --card: 229 36% 9%; --shadow-sm: 0 10px 34px hsl(190 100% 64% / 0.07); --shadow-md: 0 22px 70px hsl(190 100% 64% / 0.11); --shadow-lg: 0 36px 120px hsl(265 90% 60% / 0.18); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: hsl(var(--background)); transition: background var(--transition-smooth), color var(--transition-smooth); color-scheme: light; }
html.dark { color-scheme: dark; }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: hsl(var(--background)); color: hsl(var(--foreground)); transition: background var(--transition-smooth), color var(--transition-smooth); }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-size: max(16px, 1rem); color: hsl(var(--foreground)); outline: none; }
option { background: hsl(var(--card)); color: hsl(var(--foreground)); }
.aurynex-bg { background: radial-gradient(circle at 18% 10%, hsl(218 95% 60% / .13), transparent 31%), radial-gradient(circle at 82% 3%, hsl(265 90% 66% / .13), transparent 35%), radial-gradient(circle at 50% 92%, hsl(190 92% 52% / .08), transparent 40%), linear-gradient(180deg, #ffffff, #f7f7f8 58%, #f3f6ff); animation: livingBackdrop 16s ease-in-out infinite alternate; transition: background 1.2s ease, filter 1.2s ease; }
.dark .aurynex-bg { background: radial-gradient(circle at 18% 10%, hsl(190 100% 58% / .18), transparent 31%), radial-gradient(circle at 82% 3%, hsl(265 90% 66% / .20), transparent 35%), radial-gradient(circle at 50% 92%, hsl(220 100% 56% / .11), transparent 40%), linear-gradient(180deg, #02040d, #070918 58%, #030512); }
.aurynex-bg.orb-idle { background: radial-gradient(circle at 50% 34%, hsl(190 100% 58% / .12), transparent 30%), radial-gradient(circle at 18% 10%, hsl(218 95% 60% / .13), transparent 31%), radial-gradient(circle at 82% 3%, hsl(265 90% 66% / .13), transparent 35%), linear-gradient(180deg, #ffffff, #f7f7f8 58%, #f3f6ff); }
.aurynex-bg.orb-listening { background: radial-gradient(circle at 50% 34%, hsl(210 100% 58% / .24), transparent 34%), radial-gradient(circle at 16% 12%, hsl(220 95% 60% / .16), transparent 35%), radial-gradient(circle at 86% 8%, hsl(190 100% 64% / .13), transparent 38%), linear-gradient(135deg, #f7fbff, #eef5ff); }
.aurynex-bg.orb-thinking { background: radial-gradient(circle at 50% 34%, hsl(270 100% 66% / .22), transparent 34%), radial-gradient(circle at 18% 12%, hsl(250 90% 62% / .14), transparent 35%), radial-gradient(circle at 80% 8%, hsl(290 80% 62% / .12), transparent 38%), linear-gradient(135deg, #fbf8ff, #f5f0ff); }
.aurynex-bg.orb-speaking { background: radial-gradient(circle at 50% 34%, hsl(28 100% 60% / .18), transparent 32%), radial-gradient(circle at 26% 16%, hsl(188 100% 58% / .15), transparent 35%), radial-gradient(circle at 82% 8%, hsl(36 100% 58% / .14), transparent 38%), linear-gradient(135deg, #fffaf4, #f2fbff); }
.dark .aurynex-bg.orb-idle { background: radial-gradient(circle at 50% 34%, hsl(190 100% 58% / .20), transparent 30%), radial-gradient(circle at 18% 10%, hsl(190 100% 58% / .18), transparent 31%), radial-gradient(circle at 82% 3%, hsl(265 90% 66% / .20), transparent 35%), linear-gradient(180deg, #02040d, #070918 58%, #030512); }
.dark .aurynex-bg.orb-listening { background: radial-gradient(circle at 50% 34%, hsl(210 100% 58% / .34), transparent 34%), radial-gradient(circle at 16% 12%, hsl(220 100% 60% / .24), transparent 35%), radial-gradient(circle at 86% 8%, hsl(190 100% 64% / .18), transparent 38%), linear-gradient(135deg, #020714, #031121); }
.dark .aurynex-bg.orb-thinking { background: radial-gradient(circle at 50% 34%, hsl(270 100% 66% / .34), transparent 34%), radial-gradient(circle at 18% 12%, hsl(250 100% 62% / .22), transparent 35%), radial-gradient(circle at 80% 8%, hsl(290 100% 62% / .18), transparent 38%), linear-gradient(135deg, #050313, #10041f); }
.dark .aurynex-bg.orb-speaking { background: radial-gradient(circle at 50% 34%, hsl(28 100% 60% / .30), transparent 32%), radial-gradient(circle at 26% 16%, hsl(188 100% 58% / .22), transparent 35%), radial-gradient(circle at 82% 8%, hsl(36 100% 58% / .20), transparent 38%), linear-gradient(135deg, #120704, #03131a); }
.aurynex-bg.scene-backdrop-1 { background: radial-gradient(circle at 18% 12%, hsl(220 95% 58% / .18), transparent 35%), radial-gradient(circle at 82% 6%, hsl(270 88% 64% / .18), transparent 37%), radial-gradient(circle at 48% 92%, hsl(190 90% 58% / .09), transparent 43%), linear-gradient(135deg, #ffffff, #f5f7ff); }
.aurynex-bg.scene-backdrop-2 { background: radial-gradient(circle at 18% 12%, hsl(184 88% 50% / .17), transparent 35%), radial-gradient(circle at 78% 10%, hsl(148 75% 46% / .13), transparent 35%), radial-gradient(circle at 52% 88%, hsl(198 88% 55% / .1), transparent 43%), linear-gradient(135deg, #ffffff, #f4fbf8); }
.aurynex-bg.scene-backdrop-3 { background: radial-gradient(circle at 18% 12%, hsl(26 95% 56% / .17), transparent 35%), radial-gradient(circle at 80% 6%, hsl(354 82% 58% / .13), transparent 37%), radial-gradient(circle at 50% 90%, hsl(48 92% 54% / .1), transparent 45%), linear-gradient(135deg, #ffffff, #fff7f4); }
.dark .aurynex-bg.scene-backdrop-1 { background: radial-gradient(circle at 18% 12%, hsl(220 100% 58% / .28), transparent 35%), radial-gradient(circle at 82% 6%, hsl(270 100% 64% / .30), transparent 37%), radial-gradient(circle at 48% 92%, hsl(190 100% 58% / .14), transparent 43%), linear-gradient(135deg, #030613, #09041a); }
.dark .aurynex-bg.scene-backdrop-2 { background: radial-gradient(circle at 18% 12%, hsl(184 100% 50% / .27), transparent 35%), radial-gradient(circle at 78% 10%, hsl(148 90% 46% / .22), transparent 35%), radial-gradient(circle at 52% 88%, hsl(198 100% 55% / .15), transparent 43%), linear-gradient(135deg, #020b12, #03120c); }
.dark .aurynex-bg.scene-backdrop-3 { background: radial-gradient(circle at 18% 12%, hsl(26 100% 56% / .27), transparent 35%), radial-gradient(circle at 80% 6%, hsl(354 92% 58% / .22), transparent 37%), radial-gradient(circle at 50% 90%, hsl(48 100% 54% / .13), transparent 45%), linear-gradient(135deg, #120704, #16050b); }
.aurynex-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(hsl(220 18% 78% / .28) 1px, transparent 1px), linear-gradient(90deg, hsl(220 18% 78% / .28) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); animation: gridDrift 18s linear infinite; }
.dark .aurynex-bg::after { background-image: linear-gradient(hsl(190 100% 72% / .08) 1px, transparent 1px), linear-gradient(90deg, hsl(190 100% 72% / .08) 1px, transparent 1px); }
.cinematic-vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at 50% 38%, transparent 0 46%, hsl(220 30% 92% / .28) 82%, hsl(220 35% 88% / .42) 100%), linear-gradient(90deg, hsl(221 92% 56% / .03), transparent 18% 82%, hsl(265 90% 64% / .025)); backdrop-filter: blur(.15px); }
.dark .cinematic-vignette { background: radial-gradient(circle at 50% 38%, transparent 0 42%, hsl(230 42% 2% / .38) 78%, hsl(230 48% 1% / .76) 100%), linear-gradient(90deg, hsl(190 100% 56% / .06), transparent 18% 82%, hsl(265 100% 64% / .06)); }
.cinematic-vignette::after { content: ""; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(hsl(224 28% 12% / .18) .6px, transparent .8px); background-size: 3px 3px; mix-blend-mode: multiply; }
.dark .cinematic-vignette::after { opacity: .18; background-image: radial-gradient(hsl(0 0% 100% / .18) .6px, transparent .8px); mix-blend-mode: screen; }
.particles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.particles span { position: absolute; width: 3px; height: 3px; border-radius: 999px; left: calc((var(--i) * 37) % 100 * 1%); top: calc((var(--i) * 19) % 100 * 1%); background: hsl(var(--primary)); box-shadow: 0 0 14px hsl(var(--primary) / .22); opacity: .24; animation: particleDrift calc(9s + var(--i) * .35s) linear infinite; }
.orb-particle-field.listening span { animation-duration: calc(5s + var(--i) * .2s); background: hsl(210 100% 64%); }
.orb-particle-field.thinking span { animation-duration: calc(11s + var(--i) * .32s); background: hsl(270 100% 70%); }
.orb-particle-field.speaking span { animation-duration: calc(4.8s + var(--i) * .18s); background: hsl(32 100% 66%); }
.glass-card { position: relative; border: 1px solid hsl(var(--border) / .88); background: linear-gradient(135deg, hsl(var(--card) / .9), hsl(220 35% 98% / .72)); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); backdrop-filter: blur(22px); transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth), opacity var(--transition-smooth), background var(--transition-smooth); }
.dark .glass-card { background: linear-gradient(135deg, hsl(var(--card) / .82), hsl(228 34% 13% / .54)); box-shadow: var(--shadow-sm), inset 0 1px 0 hsl(0 0% 100% / .05); }
.glass-card:hover { border-color: hsl(var(--primary) / .24); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.theme-toggle { box-shadow: 0 12px 30px hsl(var(--primary) / .08); backdrop-filter: blur(18px); transition: transform var(--transition-smooth), border-color var(--transition-smooth), background var(--transition-smooth); }
.theme-toggle:hover { transform: translateY(-1px); border-color: hsl(var(--primary) / .34); background: hsl(var(--primary) / .08); }
.aurynex-logo, .aurynex-mark { width: 46px; height: 46px; border-radius: 18px; display: grid; place-items: center; font-weight: 800; color: hsl(var(--primary-foreground)); background: linear-gradient(135deg, hsl(var(--primary)), hsl(265 82% 62%)); box-shadow: 0 14px 32px hsl(221 92% 56% / .20), inset 0 0 18px hsl(0 0% 100% / .22); animation: logoGlow 3.2s ease-in-out infinite; }
.aurynex-mark { width: min(42vw, 220px); height: min(42vw, 220px); border-radius: 48px; font-size: clamp(4rem, 18vw, 9rem); animation: logoGlow 3.2s ease-in-out infinite, breathe 4s ease-in-out infinite; }
.ai-orb-stage { position: relative; display: grid; place-items: center; gap: 1.1rem; padding: clamp(.75rem, 2vw, 1.5rem); isolation: isolate; }
.ai-orb-stage::before { content: ""; position: absolute; width: min(78vw, 560px); height: min(78vw, 560px); border-radius: 999px; background: radial-gradient(circle, hsl(var(--primary) / .16), transparent 58%); filter: blur(28px); opacity: .84; animation: orbAura 5.5s ease-in-out infinite alternate; z-index: -1; }
.ai-orb { --orb-a: hsl(190 100% 70%); --orb-b: hsl(230 100% 64%); --orb-c: hsl(270 100% 72%); width: clamp(210px, 38vw, 360px); aspect-ratio: 1; position: relative; border-radius: 999px; display: grid; place-items: center; transform-style: preserve-3d; animation: orbFloat 5.8s ease-in-out infinite, orbBreathe 3.8s ease-in-out infinite; filter: drop-shadow(0 24px 70px color-mix(in srgb, var(--orb-b), transparent 55%)); }
.ai-orb.listening { --orb-a: hsl(205 100% 68%); --orb-b: hsl(222 100% 58%); --orb-c: hsl(188 100% 76%); }
.ai-orb.thinking { --orb-a: hsl(276 100% 74%); --orb-b: hsl(252 100% 64%); --orb-c: hsl(298 88% 72%); }
.ai-orb.speaking { --orb-a: hsl(28 100% 66%); --orb-b: hsl(188 100% 64%); --orb-c: hsl(42 100% 76%); }
.orb-core { position: absolute; inset: 18%; border-radius: inherit; background: radial-gradient(circle at 36% 28%, hsl(0 0% 100% / .98), var(--orb-a) 18%, hsl(0 0% 100% / .20) 32%, transparent 52%), radial-gradient(circle at 62% 64%, var(--orb-c), transparent 38%), radial-gradient(circle, var(--orb-b), transparent 68%); box-shadow: inset 0 0 42px hsl(0 0% 100% / .42), inset 0 -36px 70px hsl(230 100% 10% / .18), 0 0 62px var(--orb-a), 0 0 140px color-mix(in srgb, var(--orb-b), transparent 28%); opacity: .9; filter: blur(.15px); animation: corePulse 2.7s ease-in-out infinite; }
.orb-shell { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 35% 22%, hsl(0 0% 100% / .42), transparent 24%), radial-gradient(circle at 72% 78%, hsl(0 0% 100% / .14), transparent 26%); border: 1px solid hsl(0 0% 100% / .28); box-shadow: inset 0 0 44px hsl(0 0% 100% / .16), inset 0 0 100px color-mix(in srgb, var(--orb-a), transparent 58%); backdrop-filter: blur(12px); opacity: .72; }
.orb-ring { position: absolute; inset: 8%; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--orb-a), transparent 35%); box-shadow: 0 0 26px color-mix(in srgb, var(--orb-a), transparent 45%), inset 0 0 22px color-mix(in srgb, var(--orb-b), transparent 60%); }
.ring-x { transform: rotateX(66deg) rotateZ(16deg); animation: ringRotate 9s linear infinite; }
.ring-y { inset: 14%; transform: rotateY(68deg) rotateZ(-34deg); animation: ringRotate 12s linear infinite reverse; }
.ring-z { inset: 4%; transform: rotateX(76deg) rotateY(18deg); animation: ringRotate 15s linear infinite; opacity: .66; }
.orb-wave { position: absolute; inset: -7%; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--orb-a), transparent 48%); opacity: 0; }
.ai-orb.listening .orb-wave, .ai-orb.speaking .orb-wave { animation: orbWave 1.8s ease-out infinite; }
.ai-orb.speaking .orb-wave { animation-duration: 1.05s; border-color: color-mix(in srgb, var(--orb-c), transparent 36%); }
.wave-two { animation-delay: .55s !important; }
.orb-particles { position: absolute; inset: 4%; border-radius: inherit; background-image: radial-gradient(color-mix(in srgb, var(--orb-a), white 25%) 1px, transparent 1.4px), radial-gradient(color-mix(in srgb, var(--orb-c), white 10%) 1px, transparent 1.4px); background-size: 32px 32px, 48px 48px; opacity: .42; mask-image: radial-gradient(circle, transparent 0 18%, black 30% 76%, transparent 84%); animation: orbParticleSpin 12s linear infinite; }
.ai-orb.thinking .orb-particles { animation-duration: 7s; opacity: .58; }
.ai-orb.speaking .orb-core { animation-duration: .85s; }
.ai-orb.speaking .ring-x, .ai-orb.speaking .ring-y { animation-duration: 5s; }
.orb-talk-button { min-height: 54px; padding: 0 1.4rem; border-radius: 999px; border: 1px solid hsl(var(--primary) / .34); background: linear-gradient(135deg, hsl(var(--card) / .78), hsl(var(--secondary) / .62)); color: hsl(var(--primary)); font-weight: 700; letter-spacing: .02em; box-shadow: 0 12px 42px hsl(var(--primary) / .12); backdrop-filter: blur(18px); transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), opacity var(--transition-fast); }
.orb-talk-button:hover:not(:disabled) { transform: translateY(-2px) scale(1.025); box-shadow: 0 18px 60px hsl(var(--primary) / .18); }
.orb-talk-button:disabled { opacity: .62; cursor: not-allowed; }
.ambient-control { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; color: hsl(var(--muted-foreground)); font-size: .8rem; }
.ambient-control button { min-height: 36px; padding: 0 .9rem; border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .72); color: hsl(var(--foreground)); }
.glow-button { color: hsl(var(--primary-foreground)); background: linear-gradient(135deg, hsl(var(--primary)), hsl(265 82% 62%)); box-shadow: 0 14px 32px hsl(221 92% 56% / .20), 0 18px 52px hsl(265 80% 60% / .12); transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); }
.glow-button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 42px hsl(221 92% 56% / .26), 0 24px 70px hsl(265 80% 60% / .18); }
.hero-cta { animation: ctaPulse 2.6s ease-in-out infinite; }
.section-kicker { color: hsl(var(--primary)); text-transform: uppercase; letter-spacing: .28em; font-size: .82rem; margin: 0 0 1rem; }
.section-heading { max-width: 820px; font-size: clamp(2rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -.055em; font-weight: 650; }
.premium-card { min-height: 150px; overflow: hidden; }
.premium-card::after, .episode-card::after, .movie-scene::after, .cinema-scene-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, hsl(var(--primary) / .055), transparent); transform: translateX(-100%); transition: transform .7s ease; pointer-events: none; }
.premium-card:hover::after, .episode-card:hover::after, .movie-scene:hover::after, .cinema-scene-card:hover::after { transform: translateX(100%); }
.story-screen { background: linear-gradient(135deg, hsl(var(--card) / .94), hsl(224 45% 97% / .82)); }
.dark .story-screen { background: linear-gradient(135deg, hsl(var(--card) / .86), hsl(228 44% 13% / .62)); }
.episode-card { position: relative; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: 24px; background: radial-gradient(circle at 50% 0%, hsl(var(--primary) / .08), hsl(var(--secondary) / .45)); min-height: 240px; }
.movie-title { border: 1px solid hsl(var(--primary) / .20); background: radial-gradient(circle at 18% 0%, hsl(var(--primary) / .10), transparent 43%), linear-gradient(135deg, hsl(var(--card) / .94), hsl(265 70% 97% / .74)); box-shadow: 0 18px 60px hsl(220 35% 30% / .08); animation: sceneReveal .75s cubic-bezier(.2,.8,.2,1) both; }
.dark .movie-title { background: radial-gradient(circle at 18% 0%, hsl(var(--primary) / .16), transparent 43%), linear-gradient(135deg, hsl(var(--card) / .9), hsl(265 70% 18% / .34)); box-shadow: 0 18px 70px hsl(190 100% 60% / .08); }
.movie-scene { overflow: hidden; background: radial-gradient(circle at 0% 0%, hsl(var(--primary) / .08), transparent 38%), linear-gradient(135deg, hsl(var(--card) / .92), hsl(var(--secondary) / .62)); }
.movie-scene::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(hsl(var(--primary)), hsl(265 82% 62%)); box-shadow: 0 0 18px hsl(var(--primary) / .22); }
.character-icon { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, hsl(var(--primary) / .10), hsl(265 82% 62% / .10)); border: 1px solid hsl(var(--primary) / .20); color: hsl(var(--primary)); font-weight: 800; }
.cinema-scroll { display: grid; gap: 1.25rem; }
.cinema-scene-card { overflow: hidden; animation: sceneReveal .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--delay, 0ms); }
.cinema-scene-card.is-playing { border-color: hsl(var(--primary) / .42); box-shadow: 0 18px 70px hsl(var(--primary) / .14), 0 26px 110px hsl(265 80% 60% / .10); transform: translateY(-3px) scale(1.01); }
.cinema-scene-card.is-playing .cinema-visual { animation-duration: 4.8s; }
.cinema-scene-card.is-dimmed { opacity: .62; filter: saturate(.82); }
.cinema-visual { position: relative; min-height: clamp(260px, 42vw, 440px); overflow: hidden; border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0; isolation: isolate; transform-origin: center; animation: cameraZoom 8s ease-in-out infinite alternate; }
.cinema-visual::before { content: ""; position: absolute; inset: -18%; background: radial-gradient(circle at 20% 20%, var(--glow-a), transparent 34%), radial-gradient(circle at 78% 26%, var(--glow-b), transparent 30%), radial-gradient(circle at 42% 76%, var(--glow-c), transparent 38%), linear-gradient(135deg, var(--base-a), var(--base-b)); filter: saturate(1.08); animation: gradientCinema 7s ease-in-out infinite alternate; }
.cinema-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, hsl(0 0% 100% / .08) 52%, hsl(224 28% 12% / .52) 100%), repeating-linear-gradient(90deg, hsl(0 0% 100% / .045) 0 1px, transparent 1px 80px); backdrop-filter: blur(.4px); z-index: 2; }
.scene-tone-1 { --glow-a: hsl(214 100% 62% / .62); --glow-b: hsl(272 100% 68% / .58); --glow-c: hsl(188 100% 74% / .28); --base-a: hsl(222 88% 78%); --base-b: hsl(267 82% 82%); }
.scene-tone-2 { --glow-a: hsl(181 92% 52% / .56); --glow-b: hsl(139 75% 48% / .42); --glow-c: hsl(196 100% 72% / .28); --base-a: hsl(190 82% 80%); --base-b: hsl(151 62% 82%); }
.scene-tone-3 { --glow-a: hsl(27 100% 62% / .58); --glow-b: hsl(354 92% 62% / .44); --glow-c: hsl(48 100% 66% / .28); --base-a: hsl(25 92% 82%); --base-b: hsl(346 82% 84%); }
.dark .scene-tone-1 { --base-a: hsl(225 72% 19%); --base-b: hsl(268 70% 18%); }
.dark .scene-tone-2 { --base-a: hsl(190 70% 17%); --base-b: hsl(151 58% 15%); }
.dark .scene-tone-3 { --base-a: hsl(25 68% 18%); --base-b: hsl(346 68% 16%); }
.cinema-orb { position: absolute; z-index: 1; border-radius: 999px; background: radial-gradient(circle, hsl(0 0% 100% / .92), transparent 62%); mix-blend-mode: screen; filter: blur(10px); opacity: .54; animation: floatOrb 6s ease-in-out infinite alternate; }
.orb-a { width: 210px; height: 210px; left: 8%; top: 16%; }
.orb-b { width: 150px; height: 150px; right: 12%; top: 26%; animation-delay: -1.4s; }
.orb-c { width: 240px; height: 240px; left: 38%; bottom: -14%; animation-delay: -2.2s; }
.cinema-noise { position: absolute; inset: 0; z-index: 3; opacity: .18; background-image: radial-gradient(hsl(0 0% 100% / .24) 1px, transparent 1px); background-size: 22px 22px; animation: particleDrift 11s linear infinite; }
.cinema-caption { position: absolute; z-index: 4; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; color: white; text-shadow: 0 2px 18px hsl(224 28% 12% / .55); }
.cinema-caption span { font-size: clamp(2rem, 5vw, 4.2rem); font-weight: 750; letter-spacing: -.06em; }
.cinema-caption strong { font-size: .75rem; text-transform: uppercase; letter-spacing: .22em; color: white; opacity: .9; }
.voice-stage { position: relative; overflow: hidden; }
.voice-stage::before { content: ""; position: absolute; inset: -45%; background: conic-gradient(from 90deg, transparent, hsl(var(--primary) / .08), transparent, hsl(265 82% 62% / .07), transparent); animation: spinFlat 12s linear infinite; opacity: .8; }
.voice-stage > * { position: relative; z-index: 1; }
.voice-state-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .82); color: hsl(var(--muted-foreground)); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.voice-state-pill.listening { border-color: hsl(var(--primary) / .32); color: hsl(var(--primary)); box-shadow: 0 8px 24px hsl(var(--primary) / .10); }
.voice-state-pill.speaking { border-color: hsl(265 82% 62% / .32); color: hsl(265 58% 44%); }
.dark .voice-state-pill.speaking { color: hsl(265 100% 78%); }
.voice-state-pill.thinking { border-color: hsl(210 92% 56% / .32); color: hsl(210 78% 42%); }
.dark .voice-state-pill.thinking { color: hsl(210 100% 74%); }
.aurynex-mic-button { width: 132px; height: 132px; border: 1px solid hsl(var(--primary) / .30); border-radius: 999px; display: inline-grid; place-items: center; position: relative; color: hsl(var(--primary)); background: radial-gradient(circle at 50% 36%, hsl(var(--primary) / .14), hsl(220 30% 96% / .84) 58%, hsl(var(--card) / .96)); box-shadow: 0 16px 48px hsl(var(--primary) / .13), inset 0 0 34px hsl(0 0% 100% / .72); transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), opacity var(--transition-fast), background var(--transition-smooth); }
.dark .aurynex-mic-button { background: radial-gradient(circle at 50% 36%, hsl(var(--primary) / .22), hsl(228 34% 13% / .82) 58%, hsl(var(--card) / .96)); box-shadow: 0 18px 60px hsl(var(--primary) / .18), inset 0 0 34px hsl(0 0% 100% / .06); }
.aurynex-mic-button:not(:disabled):hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 58px hsl(var(--primary) / .18); }
.aurynex-mic-button:disabled { opacity: .65; cursor: not-allowed; }
.mic-rings, .mic-rings::before, .mic-rings::after { content: ""; position: absolute; inset: -10px; border-radius: inherit; border: 1px solid hsl(var(--primary) / .22); opacity: 0; }
.aurynex-mic-button.listening .mic-rings, .aurynex-mic-button.listening .mic-rings::before, .aurynex-mic-button.listening .mic-rings::after { animation: micPulse 1.9s ease-out infinite; opacity: 1; }
.aurynex-mic-button.listening .mic-rings::before { animation-delay: .45s; }
.aurynex-mic-button.listening .mic-rings::after { animation-delay: .9s; }
.aurynex-mic-button.thinking { animation: pulseGlow 900ms ease-in-out infinite; }
.aurynex-waveform { display: flex; align-items: center; justify-content: center; gap: 5px; height: 34px; margin: 14px 0; }
.aurynex-waveform span { width: 5px; height: 12px; border-radius: 999px; background: linear-gradient(hsl(var(--primary)), hsl(265 82% 62%)); box-shadow: 0 0 12px hsl(var(--primary) / .24); animation: wave 900ms ease-in-out infinite; }
.aurynex-waveform span:nth-child(2), .aurynex-waveform span:nth-child(6) { animation-delay: .12s; }
.aurynex-waveform span:nth-child(3), .aurynex-waveform span:nth-child(5) { animation-delay: .24s; }
.aurynex-waveform span:nth-child(4) { animation-delay: .36s; }
.cinematic-intro { background: #01030a; isolation: isolate; }
.intro-blackout { position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 38%, hsl(190 100% 58% / .14), transparent 30%), linear-gradient(#01030a, #030512); animation: introFade 2.2s ease-out both; }
.intro-content { animation: environmentReveal 2.6s cubic-bezier(.2,.8,.2,1) both; }
.intro-orb-wrap { opacity: 0; transform: scale(.82); animation: orbMaterialize 2.7s 450ms cubic-bezier(.2,.8,.2,1) both; }
.aurynex-wordmark { position: relative; display: inline-block; background: linear-gradient(90deg, #fff, hsl(var(--primary)), #c4b5fd, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 40px hsl(var(--primary) / .22); opacity: 0; animation: logoReveal 1.6s 1.35s ease both; }
.aurynex-wordmark::after { content: ""; position: absolute; inset: -12% -18%; background: linear-gradient(110deg, transparent 20%, hsl(0 0% 100% / .72) 48%, transparent 62%); transform: translateX(-120%) skewX(-14deg); filter: blur(3px); animation: logoSweep 1.6s 2.15s ease-out both; }
.intro-kicker, .intro-subtitle, .intro-greeting, .intro-ui { opacity: 0; animation: introText 1s 2.55s ease both; }
.intro-subtitle { animation-delay: 2.85s; }
.intro-greeting { animation-delay: 3.1s; }
.intro-ui { animation-delay: 3.25s; }
.cinematic-intro .orb-talk-button { opacity: 0; transform: translateY(18px) scale(.96); pointer-events: none; }
.cinematic-intro.intro-ready .orb-talk-button { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; animation: ctaPulse 2.6s ease-in-out infinite; }
.cinematic-intro.intro-ready .ambient-control { opacity: 1; }
.cinematic-intro .ambient-control { opacity: 0; transition: opacity .8s ease 3.4s; }
@keyframes introFade { 0% { opacity: 1; filter: brightness(.2); } 100% { opacity: 1; filter: brightness(1); } }
@keyframes environmentReveal { 0% { opacity: 0; transform: translateY(18px); filter: blur(14px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes orbMaterialize { 0% { opacity: 0; transform: scale(.72); filter: blur(18px) brightness(.4); } 55% { opacity: .85; filter: blur(4px) brightness(1.25); } 100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); } }
@keyframes logoReveal { 0% { opacity: 0; letter-spacing: .38em; filter: blur(12px); } 100% { opacity: 1; letter-spacing: -.075em; filter: blur(0); } }
@keyframes logoSweep { 0% { transform: translateX(-120%) skewX(-14deg); opacity: 0; } 35% { opacity: .8; } 100% { transform: translateX(120%) skewX(-14deg); opacity: 0; } }
@keyframes introText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes livingBackdrop { 0% { transform: scale(1); filter: hue-rotate(0deg) saturate(1); } 100% { transform: scale(1.04); filter: hue-rotate(4deg) saturate(1.08); } }
@keyframes gridDrift { to { background-position: 46px 92px; } }
@keyframes logoGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
@keyframes breathe { 0%,100% { transform: scale(1); box-shadow: 0 18px 45px hsl(var(--primary) / .20), 0 24px 80px hsl(265 80% 60% / .10); } 50% { transform: scale(1.025); box-shadow: 0 22px 58px hsl(var(--primary) / .26), 0 30px 110px hsl(265 80% 60% / .15); } }
@keyframes ctaPulse { 0%,100% { box-shadow: 0 14px 32px hsl(221 92% 56% / .20), 0 18px 52px hsl(265 80% 60% / .12); } 50% { box-shadow: 0 18px 42px hsl(221 92% 56% / .26), 0 24px 70px hsl(265 80% 60% / .18); } }
@keyframes pulseGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@keyframes spinFlat { to { transform: rotate(360deg); } }
@keyframes micPulse { 0% { transform: scale(.84); opacity: .46; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes wave { 0%,100% { height: 10px; opacity: .55; } 50% { height: 32px; opacity: 1; } }
@keyframes particleDrift { 0% { transform: translate3d(0, 30px, 0); opacity: 0; } 20%,80% { opacity: .32; } 100% { transform: translate3d(30px, -110vh, 0); opacity: 0; } }
@keyframes sceneReveal { 0% { opacity: 0; transform: translateY(34px) scale(.965); filter: blur(8px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes cameraZoom { 0% { transform: scale(1); } 100% { transform: scale(1.045); } }
@keyframes gradientCinema { 0% { transform: translate3d(-1%, -1%, 0) scale(1); filter: hue-rotate(0deg) saturate(1.02); } 100% { transform: translate3d(1.5%, 1%, 0) scale(1.06); filter: hue-rotate(8deg) saturate(1.16); } }
@keyframes floatOrb { 0% { transform: translate3d(-12px, 16px, 0) scale(.94); } 100% { transform: translate3d(18px, -18px, 0) scale(1.08); } }
@keyframes orbFloat { 0%,100% { transform: translate3d(0, 0, 0) rotateX(0deg); } 50% { transform: translate3d(0, -16px, 0) rotateX(4deg); } }
@keyframes orbBreathe { 0%,100% { scale: 1; } 50% { scale: 1.035; } }
@keyframes corePulse { 0%,100% { transform: scale(.98); opacity: .86; filter: brightness(1); } 50% { transform: scale(1.045); opacity: .98; filter: brightness(1.18); } }
@keyframes ringRotate { to { rotate: 360deg; } }
@keyframes orbWave { 0% { transform: scale(.78); opacity: .62; } 100% { transform: scale(1.42); opacity: 0; } }
@keyframes orbParticleSpin { to { transform: rotate(360deg); background-position: 64px 32px, -48px 48px; } }
@keyframes orbAura { 0% { transform: scale(.92); opacity: .52; } 100% { transform: scale(1.08); opacity: .92; } }
@media (max-width: 640px) { .section-heading { font-size: 2.35rem; } .aurynex-mic-button { width: 116px; height: 116px; } .cinema-caption { align-items: start; flex-direction: column; } .ambient-control { flex-direction: column; gap: .3rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }