/* POV motion & light layer. Loaded after brand.css. Everything here is GPU-only (transform, opacity, filter)
   and collapses to static under prefers-reduced-motion. */
@property --fx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { --fx-red: #FF3B2F; --fx-coral: #FF7A45; --fx-pink: #FF2D7A; --fx-blue: #3B5BFF; --fx-ease: cubic-bezier(.16, 1, .3, 1); }

/* ── Aurora: living light behind every non-video surface ── */
.fx-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx-aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(90px); opacity: .55; mix-blend-mode: screen; will-change: transform; }
.fx-aurora i:nth-child(1) { left: -20vmax; top: -30vmax; background: radial-gradient(circle, var(--fx-red), transparent 62%); animation: fx-drift-a 22s var(--fx-ease) infinite alternate; }
.fx-aurora i:nth-child(2) { right: -25vmax; top: 10vh; background: radial-gradient(circle, var(--fx-pink), transparent 60%); opacity: .38; animation: fx-drift-b 28s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(3) { left: 10vw; bottom: -45vmax; background: radial-gradient(circle, var(--fx-blue), transparent 60%); opacity: .32; animation: fx-drift-c 34s ease-in-out infinite alternate; }
@keyframes fx-drift-a { to { transform: translate(18vw, 22vh) scale(1.15); } }
@keyframes fx-drift-b { to { transform: translate(-22vw, 18vh) scale(.9); } }
@keyframes fx-drift-c { to { transform: translate(14vw, -20vh) scale(1.2); } }
/* Film grain, fixed and non-interactive */
.fx-aurora::after { content: ''; position: absolute; inset: -50%; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: fx-grain 1.2s steps(4) infinite; }
@keyframes fx-grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
.fx-aurora ~ main, .fx-aurora ~ section.app { position: relative; z-index: 1; }

/* ── Kinetic headline: words rise in from blur ── */
.fx-words .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(10px); animation: fx-word .9s var(--fx-ease) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes fx-word { to { opacity: 1; transform: none; filter: blur(0); } }
.fx-shine { background: linear-gradient(100deg, var(--ink) 30%, #FFD3C7 45%, var(--fx-coral) 50%, var(--ink) 62%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; opacity: 1 !important; animation: fx-sheen 6s ease-in-out 1.2s infinite; }
@keyframes fx-sheen { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }

/* ── Scroll reveal (native scroll-driven where supported; JS fallback adds .in) ── */
.fx-on .fx-reveal { opacity: 0; transform: translateY(28px) scale(.985); transition: opacity .9s var(--fx-ease), transform .9s var(--fx-ease); }
.fx-on .fx-reveal.in { opacity: 1; transform: none; }

/* ── Spotlight cards: light follows the pointer, gradient rim ── */
.fx-spot { position: relative; isolation: isolate; overflow: hidden; }
.fx-spot::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,90,60,.16), transparent 45%); opacity: .7; transition: opacity .4s; pointer-events: none; }
.fx-spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255,140,110,.9), rgba(255,255,255,.08) 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.fx-spot:hover::before { opacity: 1; }
.fx-spot { transition: transform .5s var(--fx-ease); } .fx-spot:hover { transform: translateY(-4px); }

/* ── Primary buttons: moving sheen + soft colored lift ── */
.cta, .pill, .e-cta, .nq-go { position: relative; overflow: hidden; isolation: isolate; }
.cta::after, .pill::after, .e-cta::after, .nq-go::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); transition: transform .9s var(--fx-ease); }
.cta:hover::after, .pill:hover::after, .e-cta:hover::after, .nq-go:hover::after { transform: translateX(120%); }
.cta:hover, .e-cta:hover { box-shadow: 0 10px 40px rgba(255,80,50,.35) !important; }

/* ── LIVE: a breathing red signal ── */
.live-pill { position: relative; background: linear-gradient(90deg, var(--fx-red), #FF5A3C) !important; box-shadow: 0 0 0 0 rgba(255,59,47,.6); animation: fx-live 2s ease-out infinite; }
@keyframes fx-live { 0% { box-shadow: 0 0 0 0 rgba(255,59,47,.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255,59,47,0); } }

/* ── GO LIVE: rotating light ring around the record button ── */
.golive, .home-hero .golive, #go.golive { background: radial-gradient(circle at 50% 30%, #FF6A4D, var(--fx-red) 55%, #D81F14) !important; animation: fx-breathe 3.2s ease-in-out infinite; }
.golive::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; z-index: -1; background: conic-gradient(from var(--fx-a), transparent 0 55%, var(--fx-coral), var(--fx-pink), transparent 85%); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%); mask: radial-gradient(circle, transparent 66%, #000 67%); animation: fx-spin 3.6s linear infinite; filter: blur(1px); }
.home-hero .golive { isolation: isolate; }
@keyframes fx-spin { to { --fx-a: 360deg; } }
@keyframes fx-breathe { 50% { box-shadow: 0 0 0 6px var(--base), 0 0 0 8px rgba(255,255,255,.9), 0 30px 90px rgba(255,59,47,.5); transform: scale(1.015); } }
.golive:active { animation: none; transform: scale(.95); }

/* ── Progress: a lit filament that shimmers as it grows ── */
.qs-bar i, .ql-bar i, .qd-t i, .ph-q .fr i { background: linear-gradient(90deg, var(--fx-red), var(--fx-coral), #FFF 85%) !important; background-size: 200% 100% !important; animation: fx-flow 2.4s linear infinite; box-shadow: 0 0 12px rgba(255,110,70,.8); }
@keyframes fx-flow { to { background-position: -200% 0; } }

/* ── Quick Decision: the winning option glows; your ring is lit ── */
.qd-o.mine { box-shadow: inset 0 0 0 1.5px #fff, 0 0 24px rgba(255,255,255,.25) !important; }
.qd-o.win i { background: linear-gradient(90deg, rgba(255,59,47,.55), rgba(255,122,69,.4)) !important; }
.qd-o i { transition: width .8s var(--fx-ease) !important; }
.qd.qd-new { animation: fx-pop .7s var(--fx-ease) both !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 60px rgba(255,59,47,.35) !important; }
@keyframes fx-pop { 0% { transform: translateY(40px) scale(.94); opacity: 0; filter: blur(8px); } 100% { transform: none; opacity: 1; filter: none; } }

/* ── Unlock: white flash, then a burst of warm light behind the result ── */
.flash::after { content: ''; position: absolute; left: 50%; top: 40%; width: 120vmax; height: 120vmax; translate: -50% -50%; z-index: -2; border-radius: 50%; background: radial-gradient(circle, rgba(255,90,60,.55), rgba(255,45,122,.2) 30%, transparent 60%); animation: fx-burst 1.6s var(--fx-ease) forwards; pointer-events: none; }
@keyframes fx-burst { from { transform: scale(.1); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.f-t { animation: fx-pop .8s var(--fx-ease) .15s both !important; text-shadow: 0 4px 40px rgba(255,80,50,.6) !important; }

/* ── Live overlay arrivals ── */
.qs, .mission, .spm, .recog { animation: fx-pop .6s var(--fx-ease) both !important; }
.dock > button, .dock-react button { transition: transform .25s var(--fx-ease), background .2s; }
.dock > button:hover { transform: translateY(-2px); }
.dock-react button:active { transform: scale(1.35) !important; }

/* ── Nobody live: the photo slowly breathes ── */
.empty { animation: fx-kenburns 24s ease-in-out infinite alternate; background-size: cover !important; }
@keyframes fx-kenburns { from { background-position: 40% 50%; } to { background-position: 62% 50%; } }
.empty h1 .w { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .fx-aurora i, .fx-aurora::after, .fx-words .w, .fx-shine, .live-pill, .golive, .golive::before, .qs-bar i, .ql-bar i, .qd-t i, .empty, .qs, .mission, .qd.qd-new, .f-t, .flash::after { animation: none !important; }
  .fx-words .w { opacity: 1; transform: none; filter: none; }
  .fx-reveal { opacity: 1; transform: none; }
}

/* ── Mobile-first: the nobody-live landing gets living light over the photo ── */
.empty::after { content: ''; position: absolute; inset: -20%; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(40% 30% at 20% 30%, rgba(255,59,47,.45), transparent 70%), radial-gradient(35% 30% at 80% 60%, rgba(255,45,122,.3), transparent 70%), radial-gradient(40% 35% at 50% 100%, rgba(59,91,255,.25), transparent 70%);
  animation: fx-drift-a 14s ease-in-out infinite alternate; }
.empty > * { z-index: 1; }
.empty h1 { animation: fx-pop 1s var(--fx-ease) .1s both; }
.empty .e-sub { animation: fx-pop 1s var(--fx-ease) .3s both; }
.empty .e-steps li { animation: fx-pop .8s var(--fx-ease) both; } .empty .e-steps li:nth-child(1) { animation-delay: .45s; } .empty .e-steps li:nth-child(2) { animation-delay: .55s; } .empty .e-steps li:nth-child(3) { animation-delay: .65s; }
.empty .e-next { animation: fx-pop .8s var(--fx-ease) .8s both; }
.empty .e-cta { animation: fx-pop .8s var(--fx-ease) .95s both, fx-glow 3s ease-in-out 2s infinite; }
@keyframes fx-glow { 50% { box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 12px 40px rgba(255,80,50,.4); } }
/* Touch: press feedback everywhere, no hover dependence */
@media (hover: none) { .fx-spot:hover { transform: none; } .fx-spot:active { transform: scale(.985); } .cta:active::after, .e-cta:active::after { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .empty::after, .empty h1, .empty .e-sub, .empty .e-steps li, .empty .e-next, .empty .e-cta { animation: none !important; } }

/* ── POV reel background ── */
.reel { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; background: #000; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .18s linear, transform 2.2s cubic-bezier(.16,1,.3,1); }
.reel video.on { opacity: 1; transform: scale(1); }
.reel::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(10,10,11,.6) 0%, rgba(10,10,11,.5) 35%, rgba(10,10,11,.8) 70%, var(--base) 100%), radial-gradient(80% 60% at 20% 30%, rgba(255,59,47,.25), transparent 70%); }
.reel-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; }
.reel-flash.go { animation: reel-flash .32s ease-out; }
@keyframes reel-flash { 0% { opacity: .35; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reel video { transition: none; transform: none; } .reel-flash { display: none; } }
.hero-reel { position: absolute !important; top: 0; left: 0; right: 0; height: min(100dvh, 920px); inset: 0 0 auto 0; }
.gate-reel { position: fixed !important; inset: 0; } .gate-reel[hidden] { display: none; }
/* Guide buttons: primary white, Back quiet glass; both inside the screen. No hover glow on touch screens. */
.guide .gd-acts .cta { width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; }
.guide .gd-acts .gd-back { flex: 0 0 34% !important; background: rgba(255,255,255,.1) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important; }
@media (hover: none) { .cta:hover, .e-cta:hover { box-shadow: none !important; } .cta:hover::after, .pill:hover::after, .e-cta:hover::after { transform: translateX(-120%); } }
.empty.settled, .empty.settled * { animation: none !important; }
/* Steps: plain sequence, no button outline (beats the shared glass rule) */
#empty .e-steps li, #empty .e-steps li + li { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important; }
#empty .e-steps li + li { box-shadow: inset 1px 0 0 rgba(255,255,255,.18) !important; }
#empty .e-steps b { font-family: 'Doto', monospace !important; font-weight: 900 !important; color: var(--rec) !important; letter-spacing: .1em !important; }
.in-creator-app #empty .e-steps.for-creator { display: flex !important; }
.in-creator-app #empty .e-next { display: none !important; }
.in-creator-app #empty .e-steps.for-web { display: none !important; }
.hero-reel { -webkit-mask-image: linear-gradient(#000 55%, transparent 100%); mask-image: linear-gradient(#000 55%, transparent 100%); }

/* Landing, visual-first: title, launch pill, one action. */
#empty .e-sub, #empty .e-steps, #empty .e-eyebrow, #empty .e-next .s, #empty .e-next .k { display: none !important; }
#empty h1 { font-size: clamp(52px, 17vw, 96px) !important; line-height: .92 !important; margin: 0 0 22px !important; }
#empty h1 em { color: #FF5A3C !important; opacity: 1 !important; }
#empty .e-next { display: inline-flex !important; align-self: flex-start; width: auto !important; padding: 9px 16px 9px 14px !important; margin: 0 0 16px !important; border-radius: 999px !important; background: rgba(28,28,31,.42) !important; -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important; }
#empty .e-next .t { display: flex; align-items: center; gap: 9px; margin: 0 !important; font: 600 14px Geist, sans-serif !important; letter-spacing: .01em; }
#empty .e-next .t::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #FF5A3C; box-shadow: 0 0 0 4px rgba(255,90,60,.2); animation: fx-pulse-dot 1.6s ease-in-out infinite; }
@keyframes fx-pulse-dot { 50% { opacity: .35; } }
.in-creator-app #empty .e-next { display: none !important; }