/* Cinematic scroll layer for the landing page. Everything here is gated on
   html.motion (set by cinematic.js only when reduced motion is NOT requested),
   so without JS or with reduced motion the page renders exactly as before. */

/* ---------- scroll progress ---------- */
.scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--crimson),var(--gold),var(--gold-bright));box-shadow:0 0 12px rgba(232,197,107,.55);pointer-events:none}

/* ---------- hero layers ---------- */
.hero-sigil{position:absolute;z-index:0;right:-8%;top:50%;width:min(720px,80vw);aspect-ratio:1;
  translate:0 -50%;color:var(--gold);opacity:.10;pointer-events:none}
.hero-sigil svg{width:100%;height:100%;display:block}
.hero-glow{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(40% 35% at 70% 30%,rgba(193,48,60,.18),transparent 70%)}
html.motion .hero-inner,html.motion .hero-sigil,html.motion .hero-glow{will-change:transform,opacity}

/* intro: hero copy rises in on load */
html.motion .hero-inner>*{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
html.motion.loaded .hero-inner>*{opacity:1;transform:none}
html.motion.loaded .hero-inner>:nth-child(2){transition-delay:.12s}
html.motion.loaded .hero-inner>:nth-child(3){transition-delay:.28s}
html.motion.loaded .hero-inner>:nth-child(4){transition-delay:.42s}
html.motion.loaded .hero-inner>:nth-child(5){transition-delay:.56s}
html.motion .hero-sigil{opacity:0;transition:opacity 2.4s ease .2s}
html.motion.loaded .hero-sigil{opacity:.10}

/* ---------- manifesto: pinned, words ignite as you scroll ---------- */
.manifesto{position:relative;border-bottom:1px solid var(--line);padding:0;overflow:clip}
.manifesto-pin{display:flex;align-items:center;padding-block:clamp(70px,12vw,140px)}
.manifesto-pin::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--glow,.4);
  background:radial-gradient(55% 45% at 50% 55%,rgba(201,162,74,.13),transparent 70%)}
.manifesto-text{position:relative;font-family:var(--font-display);font-weight:700;letter-spacing:.005em;
  font-size:clamp(1.65rem,4.6vw,3.4rem);line-height:1.22;max-width:22ch;text-wrap:balance;color:var(--fg)}
.manifesto-text em{font-style:normal;color:var(--gold-bright)}
.manifesto .eyebrow{margin-bottom:26px}
html.motion .manifesto{height:240vh}
html.motion .manifesto-pin{position:sticky;top:0;height:100vh;padding-block:0}
html.motion .manifesto-text .w{color:rgba(236,230,217,.13);transition:color .35s ease,text-shadow .35s ease}
html.motion .manifesto-text .w.lit{color:var(--fg)}
html.motion .manifesto-text em .w.lit,html.motion .manifesto-text .w.gold.lit{color:var(--gold-bright);text-shadow:0 0 28px rgba(232,197,107,.35)}

/* ---------- generic reveals ---------- */
html.motion [data-reveal]{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 90ms)}
html.motion [data-reveal="up"]{transform:translateY(46px)}
html.motion [data-reveal="tilt"]{transform:perspective(900px) translateY(60px) rotateX(14deg);transform-origin:50% 100%}
html.motion [data-reveal="left"]{transform:translateX(-70px) rotate(-1.2deg)}
html.motion [data-reveal="right"]{transform:translateX(70px) rotate(1.2deg)}
html.motion [data-reveal="zoom"]{transform:scale(.92);filter:blur(6px);transition-property:opacity,transform,filter}
html.motion [data-reveal="pop"]{transform:translateY(16px) scale(.9)}
html.motion [data-reveal].in{opacity:1;transform:none;filter:none}

/* headings: words slide up out of a mask */
html.motion .split .wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
html.motion .split .wi{display:inline-block;transform:translateY(105%);transition:transform .95s cubic-bezier(.2,.75,.15,1);
  transition-delay:calc(var(--i,0) * 55ms)}
html.motion .split.in .wi{transform:none}

/* eyebrow rule draws in */
html.motion .eyebrow::before{width:0;transition:width .9s cubic-bezier(.2,.7,.2,1) .15s}
html.motion .eyebrow.in::before,html.motion .hero .eyebrow::before{width:26px}

/* chips row drifts sideways with scroll */
html.motion .chips{will-change:transform}

/* ---------- cursor light on cards ---------- */
.card,.edition,.pkg,.portal{--mx:50%;--my:-30%}
.card::after,.pkg::after,.edition::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .3s;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(232,197,107,.10),transparent 65%)}
.card,.pkg{position:relative}
.card:hover::after,.pkg:hover::after,.edition:hover::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .hero-sigil{display:none}
}

/* portal orb drifts with scroll */
html.motion .portal::after{transform:translate3d(0,var(--orb,0px),0)}
.manifesto-pin .wrap{width:100%}
html.motion main{overflow-x:clip}