/* ============================================================
   NOVA — A companion who's truly yours.
   Scroll-snap cinematic landing. A pinned face PORTAL sits in the
   optical centre; copy "scenes" scroll past it to the SIDES.
   The face in the portal CHANGES every scene (video <-> 4 stills),
   answering the brief: "different expression per scroll +
   how you customize a face into someone you want to talk to."

   Deep cool-dark base, tasteful violet -> cyan accents (no neon).
   Fonts: Space Grotesk (ui) + Fraunces (display) + Inter (body).
   Pattern proven on truthlens: Lenis + GSAP, fixed chrome,
   ambient aura + grain + vignette, right progress rail.
   ============================================================ */
:root{
  --bg:#07060e;
  --bg2:#0b0a16;
  --ink:#f3f0fb;
  --ink-dim:rgba(243,240,251,.62);
  --ink-faint:rgba(243,240,251,.34);
  --violet:#9b7bff;        /* warm-cool accent */
  --violet-soft:#bca6ff;
  --cyan:#56dcff;
  --cyan-soft:#9aecff;
  --warm:#ffb59a;          /* skin-warm highlight */
  --line:rgba(243,240,251,.12);
  --panel:rgba(255,255,255,.045);
  --panel-edge:rgba(255,255,255,.10);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  --pad:clamp(20px,5vw,72px);
  --portal-w:clamp(280px,32vw,392px);
  --portal-h:clamp(370px,46vw,520px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif; font-weight:400;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
a{color:inherit;text-decoration:none}
strong{color:var(--ink);font-weight:600}
em{font-style:italic}

/* ---------- ambient backdrop ---------- */
.bg-aura{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 48% at 50% 42%, rgba(155,123,255,.12) 0%, transparent 62%),
    radial-gradient(46% 40% at 72% 70%, rgba(86,220,255,.07) 0%, transparent 64%),
    radial-gradient(120% 120% at 50% 28%, #100d20 0%, #07060e 56%, #030208 100%);}
.bg-aura::after{content:"";position:absolute;inset:0;
  background:radial-gradient(38% 34% at 50% 46%, rgba(155,123,255,.10), transparent 70%);
  animation:auraPulse 8s ease-in-out infinite}
@keyframes auraPulse{0%,100%{opacity:.5}50%{opacity:1}}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  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='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 48%, transparent 50%, rgba(0,0,0,.66) 100%);}

/* ---------- fixed chrome ---------- */
.chrome{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(15px,3vw,28px) var(--pad);pointer-events:none}
.chrome a{pointer-events:auto}
.brand{display:flex;align-items:center;gap:11px;font-family:"Space Grotesk";font-weight:600;font-size:clamp(17px,2vw,21px);letter-spacing:.02em;
  text-shadow:0 2px 20px rgba(0,0,0,.6)}
.brand-orb{width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 32% 30%, #fff 0%, var(--violet-soft) 30%, var(--violet) 62%, #4b2fae 100%);
  box-shadow:0 0 14px rgba(155,123,255,.65), inset 0 0 6px rgba(255,255,255,.5)}
.brand-orb.sm{width:13px;height:13px}
.meta{display:flex;gap:9px;align-items:center;font-size:11px;letter-spacing:.22em;color:var(--ink-dim);text-transform:uppercase}
.meta .sep{color:var(--ink-faint)}
#meta-scene{color:var(--violet-soft);min-width:9ch;text-align:right;transition:color .4s}

/* premium nav actions (right) — quiet Log in + accent Create yours */
.nav-actions{display:flex;align-items:center;gap:clamp(14px,2vw,26px);font-family:"Space Grotesk"}
.nav-login{font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--ink-dim);
  transition:color .35s var(--ease);text-shadow:0 2px 14px rgba(0,0,0,.5)}
.nav-login:hover{color:var(--ink)}
.nav-cta{display:inline-flex;align-items:center;gap:9px;padding:10px 14px 10px 18px;border-radius:100px;
  font-size:14px;font-weight:600;letter-spacing:.01em;color:#0a0718;
  background:linear-gradient(120deg,#a98bff,#56dcff);
  box-shadow:0 10px 30px -12px rgba(155,123,255,.6),inset 0 0 0 1px rgba(255,255,255,.26);
  transition:transform .4s var(--ease-soft),box-shadow .4s var(--ease-soft)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(86,220,255,.6),inset 0 0 0 1px rgba(255,255,255,.4)}
.nav-cta-ic{width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(10,7,24,.14);transition:transform .4s var(--ease-soft)}
.nav-cta:hover .nav-cta-ic{transform:translateX(2px)}
@media (max-width:480px){
  .nav-actions{gap:12px}
  .nav-login{font-size:13px}
  .nav-cta{padding:9px 12px 9px 15px;font-size:13px}
  .nav-cta span{display:inline}
}

.rail{position:fixed;top:0;right:0;bottom:0;z-index:30;width:2px;background:var(--line);pointer-events:none}
.rail i{position:absolute;top:0;left:0;width:100%;height:0%;
  background:linear-gradient(var(--violet),var(--cyan));box-shadow:0 0 12px var(--violet)}

/* ============================================================
   THE PINNED FACE PORTAL — centered focal object
   ============================================================ */
#stage{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  pointer-events:none;transition:opacity .7s var(--ease)}
/* on the final CTA scene the portal recedes so the centred CTA owns the
   screen (never centred copy ON TOP of the centred graphic) */
#stage.cta-active{opacity:.16}
#stage.cta-active #portal{transform:scale(.9)}
.portal-aura{position:absolute;top:46%;left:50%;width:min(640px,94vw);height:min(640px,94vw);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(155,123,255,.30) 0%, rgba(86,220,255,.10) 42%, transparent 70%);
  filter:blur(8px);animation:auraPulse 8s ease-in-out infinite}

#portal{position:relative;width:var(--portal-w);height:var(--portal-h);will-change:transform;
  transition:transform .7s var(--ease);
  filter:drop-shadow(0 46px 80px rgba(0,0,0,.72)) drop-shadow(0 0 50px rgba(155,123,255,.22));}
.portal-inner{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;
  background:#0b0a14;
  /* thin COOL border (premium, not neon) */
  box-shadow:
    inset 0 0 0 1.5px rgba(188,166,255,.45),
    inset 0 0 0 5px rgba(11,10,20,.9),
    inset 0 0 60px rgba(86,220,255,.06),
    0 0 0 1px rgba(0,0,0,.5);}

/* every visual layer fills the portal; crossfade via opacity */
.layer{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  transition:opacity 1s var(--ease);will-change:opacity}
.layer.on{opacity:1}
.live{object-fit:cover;object-position:50% 30%;display:block;background:#0b0a14}
.face{background-size:cover;background-position:50% 22%;
  transform:scale(1.06);transition:opacity 1s var(--ease), transform 9s linear;will-change:opacity,transform}
.face.on{transform:scale(1.14)}   /* slow Ken-Burns so stills feel alive */

/* warm cinematic grade + readable scrim that ALSO hides the corner watermark */
.portal-grade{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(255,181,154,.10), transparent 55%),
    linear-gradient(180deg, rgba(7,6,14,.10) 0%, transparent 26%, transparent 62%, rgba(7,6,14,.62) 100%),
    linear-gradient(300deg, rgba(7,6,14,.55) 0%, transparent 30%);
  mix-blend-mode:normal}
.portal-grain{position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.portal-tag{position:absolute;left:14px;bottom:13px;z-index:3;
  font-family:"Space Grotesk";font-weight:600;font-size:10px;letter-spacing:.24em;color:var(--cyan-soft);
  padding:5px 11px;border-radius:99px;background:rgba(7,6,14,.55);border:1px solid rgba(154,236,255,.35);
  backdrop-filter:blur(6px);transition:opacity .5s, color .5s}

/* ============================================================
   SCROLL SCENES — copy lives to the SIDE of the portal
   ============================================================ */
#scenes{position:relative;z-index:8}
/* extra top/bottom padding keeps vertically-centred headings clear of the
   fixed chrome (brand + meta nav) even on short viewports */
.scene{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;
  padding:clamp(84px,12vh,120px) var(--pad);pointer-events:none}
.scene>*{pointer-events:auto}
.scene.s-left{justify-content:flex-start}
.scene.s-right{justify-content:flex-end}
.scene.s-cta{justify-content:center;text-align:center;z-index:9}
.cta-copy{position:relative;z-index:9}
/* copy must END before the portal: portal half = portal-w/2, plus a hard gap */
.side-copy{width:min(40ch,calc(50vw - (var(--portal-w) / 2) - 84px));max-width:440px}
.s-right .side-copy{text-align:right}
.s-right .eyebrow,.s-right .index{justify-content:flex-end}

/* entrance — copy fades up per scene (driven by JS .in class) */
.side-copy>*,.cta-copy>*{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft),filter .9s var(--ease-soft)}
.scene.in .side-copy>*,.scene.in .cta-copy>*{opacity:1;transform:none;filter:blur(0)}
.scene.in .side-copy>*:nth-child(2),.scene.in .cta-copy>*:nth-child(2){transition-delay:.07s}
.scene.in .side-copy>*:nth-child(3),.scene.in .cta-copy>*:nth-child(3){transition-delay:.14s}
.scene.in .side-copy>*:nth-child(4),.scene.in .cta-copy>*:nth-child(4){transition-delay:.21s}
.scene.in .side-copy>*:nth-child(5),.scene.in .cta-copy>*:nth-child(5){transition-delay:.28s}
/* hero must be visible the instant it loads — never wait on JS */
.scene.is-hero .side-copy>*{opacity:1;transform:none;filter:none}

.eyebrow{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--violet-soft);margin-bottom:22px}
.eyebrow.center{justify-content:center}
.ey-dot{width:7px;height:7px;border-radius:50%;background:var(--violet);
  box-shadow:0 0 10px var(--violet);animation:auraPulse 2.4s ease-in-out infinite}
.display{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(42px,7vw,98px);line-height:.95;letter-spacing:-.02em;
  text-shadow:0 4px 44px rgba(0,0,0,.7)}
.display em{font-style:italic;font-weight:400;
  background:linear-gradient(100deg,var(--violet-soft),var(--cyan-soft));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none}
.lede{margin-top:26px;font-family:"Inter";font-size:clamp(15px,1.4vw,18px);color:var(--ink-dim);line-height:1.62;
  text-shadow:0 2px 18px rgba(0,0,0,.7)}
.lede.center{margin-left:auto;margin-right:auto;max-width:48ch}

.index{display:flex;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--violet-soft);margin-bottom:18px}
.big{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(34px,5vw,68px);line-height:1.0;letter-spacing:-.015em;
  text-shadow:0 4px 40px rgba(0,0,0,.7)}
.big em{font-style:italic;font-weight:400;
  background:linear-gradient(100deg,var(--violet-soft),var(--cyan-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.body{margin-top:20px;font-family:"Inter";font-size:clamp(15px,1.35vw,17px);color:var(--ink-dim);line-height:1.64;
  text-shadow:0 2px 18px rgba(0,0,0,.7)}
.body em{font-style:italic;color:var(--warm);font-weight:400}
.micro{margin-top:16px;font-family:"Space Grotesk";font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}

.scroll-cue{margin-top:46px;display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.3em;color:var(--ink-dim)}
.cue-line{width:42px;height:1px;flex:0 0 auto;background:linear-gradient(90deg,var(--violet),transparent);
  animation:cueH 2.2s var(--ease) infinite;transform-origin:left}
@keyframes cueH{0%{transform:scaleX(0);opacity:0}35%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1) translateX(42px);opacity:0}}

/* ---------- CTA ---------- */
.cta-copy{max-width:640px}
.cta-title{margin-top:6px}
.btn{margin-top:34px;display:inline-flex;align-items:center;gap:14px;padding:15px 18px 15px 30px;border-radius:100px;
  background:linear-gradient(120deg,#a98bff,#56dcff);color:#0a0718;
  font-family:"Space Grotesk";font-weight:600;font-size:15px;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 16px 50px -14px rgba(155,123,255,.6),inset 0 0 0 1px rgba(255,255,255,.28);
  transition:transform .5s var(--ease-soft),box-shadow .5s var(--ease-soft)}
.btn:hover{transform:translateY(-3px);box-shadow:0 22px 60px -14px rgba(86,220,255,.6),inset 0 0 0 1px rgba(255,255,255,.4)}
.btn-ic{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(10,7,24,.16);transition:transform .5s var(--ease-soft)}
.btn:hover .btn-ic{transform:translateX(3px) translateY(-1px)}
.cta-url{margin-top:20px;font-family:"Space Grotesk";font-size:13px;letter-spacing:.18em;color:var(--ink-faint)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:8;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding:30px var(--pad) 38px;border-top:1px solid var(--line);
  font-family:"Space Grotesk";font-size:12px;letter-spacing:.04em;color:var(--ink-faint);
  background:linear-gradient(180deg,transparent,rgba(3,2,8,.85))}
.foot-brand{display:flex;align-items:center;gap:9px;color:var(--ink-dim);font-weight:600;font-size:15px}
.foot-tag{letter-spacing:.1em}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:var(--bg);
  transition:opacity .8s var(--ease),visibility .8s}
#loader.done{opacity:0;visibility:hidden}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.loader-mark{display:flex;align-items:center;gap:13px;font-family:"Space Grotesk";font-weight:600;
  font-size:clamp(26px,6vw,40px);letter-spacing:.04em;color:var(--ink)}
.loader-mark .lo{width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fff 0%, var(--violet-soft) 30%, var(--violet) 62%, #4b2fae 100%);
  box-shadow:0 0 18px rgba(155,123,255,.7);animation:auraPulse 2s ease-in-out infinite}
.loader-bar{width:clamp(150px,30vw,230px);height:2px;background:var(--line);overflow:hidden}
.loader-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--violet),var(--cyan));box-shadow:0 0 12px var(--violet)}

/* ============================================================
   MOBILE — copy STACKS, never overlaps the portal
   ============================================================ */
@media (max-width:820px){
  :root{--portal-w:clamp(220px,62vw,300px);--portal-h:clamp(300px,84vw,400px)}
  /* portal sits a touch high; copy gets the lower half */
  #stage{align-items:flex-start}
  #portal{margin-top:max(14vh,86px)}
  .portal-aura{top:36%}
  .scene,.scene.s-left,.scene.s-right,.scene.s-cta{justify-content:center;align-items:flex-end;
    padding-bottom:max(7vh,40px);text-align:center}
  .side-copy,.s-right .side-copy{width:min(92vw,520px);max-width:520px;text-align:center}
  .eyebrow,.eyebrow.center,.s-right .eyebrow,.index,.s-right .index{justify-content:center}
  .display{font-size:clamp(36px,11vw,60px)}
  .big{font-size:clamp(30px,8.5vw,46px)}
  .lede,.body{font-size:15px}
  .scroll-cue{justify-content:center;margin-top:30px}
  /* darker bottom scrim so copy stays readable over the portal */
  .vignette{background:radial-gradient(140% 120% at 50% 40%, transparent 44%, rgba(0,0,0,.74) 100%)}
}
@media (max-width:430px){
  :root{--portal-w:62vw;--portal-h:78vw}
}

/* ============================================================
   REDUCED MOTION — fully static, hero + a face visible
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .bg-aura::after,.portal-aura,.ey-dot,.loader-mark .lo{animation:none}
  .cue-line{animation:none;transform:scaleX(1)}
  .face{transition:none}.face.on{transform:scale(1.06)}
  .layer{transition:opacity .2s linear}
  .side-copy>*,.cta-copy>*{opacity:1 !important;transform:none !important;filter:none !important}
}