/* ============================================================
   NOWILL — DREAMGATE  (film-5)
   Surreal dusk futurism · deep navy + candle-amber
   Fingerprint: Fraunces (candle-lit serif, italic drift lines)
                + Instrument Sans (quiet wayfinding)
   ============================================================ */

:root{
  --bg:        #050a1a;
  --bg-deep:   #030712;
  --navy-2:    #0a1128;
  --navy-3:    #111d3f;
  --ink:       #f0e7d5;
  --ink-dim:   rgba(240,231,213,.64);
  --ink-faint: rgba(240,231,213,.38);
  --amber:     #e8a24b;
  --amber-hi:  #f7cd85;
  --amber-deep:#8a5416;
  --line:      rgba(232,162,75,.22);
  --line-soft: rgba(232,162,75,.12);
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Instrument Sans", -apple-system, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(232,162,75,.35);color:var(--ink)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}

::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--bg-deep)}
::-webkit-scrollbar-thumb{background:#1d2747;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--amber-deep)}

.wrap{width:min(1240px,92vw);margin-inline:auto}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:300;color:var(--ink)}
h1{font-size:clamp(2.7rem,7vw,5.9rem);line-height:1.04;letter-spacing:-.01em}
h2{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.08}
h3{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:400;line-height:1.2}
h1 em,h2 em,h3 em{font-style:italic;color:var(--amber-hi)}

.eyebrow{
  font:600 .68rem/1 var(--sans);
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--amber);margin-bottom:1.6rem;
}
.lede{font-size:clamp(1rem,1.35vw,1.2rem);color:var(--ink-dim);max-width:46ch}
.body{font-size:1.05rem;color:var(--ink-dim);max-width:56ch}
.drift-line{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.9rem,4.4vw,3.7rem);line-height:1.15;
  text-shadow:0 2px 40px rgba(3,7,18,.65);
}
.drift-line em{color:var(--amber-hi)}
.drift-sub{margin-top:1.2rem;color:rgba(240,231,213,.78);font-size:clamp(.95rem,1.2vw,1.1rem)}
.statement{
  font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.7rem);
  line-height:1.35;margin-top:2rem;max-width:34ch;
}
.statement em{color:var(--amber-hi)}
.slogan{
  margin-top:2.4rem;font-family:var(--serif);font-style:italic;
  color:var(--ink-faint);font-size:1.05rem;
}

/* ---------- buttons ---------- */
.btn{display:inline-block;border-radius:999px;font:600 .82rem/1 var(--sans);letter-spacing:.05em}
.btn--ghost{
  padding:.7em 1.35em;border:1px solid var(--line);color:var(--ink-dim);
  transition:border-color .3s,color .3s,box-shadow .3s;
  background:rgba(5,10,26,.25);backdrop-filter:blur(6px);
}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber-hi);box-shadow:0 0 26px -6px rgba(232,162,75,.5)}
.btn--amber{
  font-size:.95rem;padding:1em 2.2em;color:#1b1103;
  background:linear-gradient(160deg,var(--amber-hi),var(--amber) 55%,#c97f2b);
  box-shadow:0 12px 48px -10px rgba(232,162,75,.6),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .35s cubic-bezier(.19,1,.22,1),filter .3s;
}
.btn--amber:hover{transform:translateY(-2px);filter:brightness(1.07)}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:100;background:var(--bg-deep);
  display:grid;place-items:center;
  transition:opacity .9s ease .1s,visibility 0s 1.1s;
}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader__inner{display:flex;flex-direction:column;align-items:center;position:relative}
.loader__ring{width:92px;height:92px;position:absolute;top:-14px}
.ring-track{fill:none;stroke:rgba(232,162,75,.14);stroke-width:1.5}
.ring-arc{
  fill:none;stroke:var(--amber);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:70 257;transform-origin:center;
  animation:spin 1.7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader__mark{width:40px;color:var(--ink);margin-top:12px}
.mark-dot{fill:var(--amber)}
.loader__word{margin-top:34px;font:600 .8rem/1 var(--sans);letter-spacing:.55em;text-indent:.55em;color:var(--ink)}
.loader__line{margin-top:.9rem;font:italic 300 .95rem var(--serif);color:var(--ink-faint)}

/* ---------- atmosphere ---------- */
#vignette{
  position:fixed;inset:0;z-index:40;pointer-events:none;
  background:
    radial-gradient(125% 92% at 50% 44%,transparent 52%,rgba(3,6,17,.52) 100%),
    linear-gradient(180deg,rgba(3,6,17,.32),transparent 12%,transparent 88%,rgba(3,6,17,.4));
}
#embers{position:fixed;inset:0;width:100vw;height:100vh;z-index:45;pointer-events:none}
#grain{position:fixed;inset:0;width:100vw;height:100vh;z-index:46;pointer-events:none;mix-blend-mode:overlay;opacity:.85}

/* ---------- journey thread ---------- */
#thread{
  position:fixed;left:26px;top:50%;transform:translateY(-50%);
  z-index:78;display:flex;flex-direction:column;align-items:center;gap:18px;
}
.thread__rail{position:absolute;top:0;bottom:0;width:1px;background:var(--line-soft);z-index:-1}
.thread__fill{width:100%;height:0;background:linear-gradient(180deg,var(--amber-hi),var(--amber))}
.thread__dot{position:relative;padding:3px}
.thread__dot span{
  display:block;width:7px;height:7px;border-radius:50%;
  border:1px solid rgba(232,162,75,.5);background:var(--bg);
  transition:background .3s,box-shadow .3s;
}
.thread__dot.active span{background:var(--amber);box-shadow:0 0 12px rgba(232,162,75,.8)}
.thread__dot::after{
  content:attr(data-label);position:absolute;left:22px;top:50%;translate:0 -50%;
  font:500 .62rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber-hi);white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none;
}
.thread__dot:hover::after{opacity:1}

/* ---------- header ---------- */
#top{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 36px;
  transition:background .5s,backdrop-filter .5s,border-color .5s,padding .5s;
  border-bottom:1px solid transparent;
}
#top.scrolled{
  background:rgba(4,8,20,.55);backdrop-filter:blur(16px) saturate(1.15);
  border-bottom-color:var(--line-soft);padding:13px 36px;
}
.brand{display:flex;align-items:center;gap:.8rem;color:var(--ink)}
.brand__mark{width:30px;color:var(--ink)}
.brand__word{font:600 .82rem/1 var(--sans);letter-spacing:.34em}
.topnav{display:flex;gap:2.2rem}
.topnav a{
  font:500 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);transition:color .3s;
}
.topnav a:hover{color:var(--amber-hi)}

/* ---------- pinned film sections ---------- */
.pin{position:relative}
.pin--hero{height:520vh}
.pin--why{height:430vh}
.pin--cta{height:330vh}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--bg-deep);
}
.plate__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.95) contrast(1.05) brightness(.94);
}
.rm-poster{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.grade{position:absolute;inset:0;pointer-events:none}
.grade--hero{
  background:
    linear-gradient(180deg,rgba(5,10,26,.55),rgba(5,10,26,.08) 32%,rgba(5,10,26,.12) 60%,rgba(5,10,26,.7)),
    radial-gradient(75% 60% at 50% 55%,rgba(232,162,75,.08),transparent 72%);
}
.grade--valley{
  background:
    linear-gradient(180deg,rgba(5,10,26,.55),rgba(5,10,26,.2) 34%,rgba(5,10,26,.5) 100%),
    radial-gradient(62% 52% at 50% 52%,rgba(5,10,26,.34),transparent 78%);
}
.grade--cta{
  background:
    linear-gradient(180deg,rgba(5,10,26,.6),rgba(5,10,26,.14) 35%,rgba(5,10,26,.7)),
    radial-gradient(70% 58% at 50% 50%,rgba(232,162,75,.06),transparent 75%);
}
.grade--hall{
  background:
    linear-gradient(180deg,rgba(5,10,26,.88),rgba(5,10,26,.55) 26%,rgba(5,10,26,.55) 74%,rgba(5,10,26,.9)),
    radial-gradient(80% 66% at 50% 46%,transparent 30%,rgba(5,10,26,.45) 100%);
}
.grade--deep{
  background:linear-gradient(180deg,rgba(5,10,26,.9),rgba(5,10,26,.66) 40%,rgba(5,10,26,.94));
}
.grade--forest{
  background:
    linear-gradient(180deg,rgba(5,10,26,.9),rgba(5,10,26,.6) 45%,rgba(5,10,26,.92)),
    radial-gradient(70% 55% at 50% 60%,rgba(232,162,75,.07),transparent 75%);
}

/* beats — pixel-locked copy inside the sticky stage */
.beat{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 6vw;
  opacity:0;visibility:hidden;will-change:opacity,transform;
}
.beat h1,.beat h2{text-shadow:0 2px 44px rgba(3,7,18,.75),0 1px 10px rgba(3,7,18,.5)}
.beat .lede{margin-top:1.5rem;max-width:none;text-shadow:0 1px 24px rgba(3,7,18,.85),0 0 8px rgba(3,7,18,.55)}
.beat .eyebrow,.drift-sub{text-shadow:0 1px 18px rgba(3,7,18,.9),0 0 6px rgba(3,7,18,.6)}
.beat>*{position:relative;z-index:1}

/* local scrims — lift copy off the bright portal cores */
.beat--hero-a::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,transparent 34%,rgba(3,7,18,.58) 82%);
}
.beat--hero-b::before,.beat--hero-c::before,.beat--cta-a::before,.beat--cta-b::before,.beat--why::before{
  content:"";position:absolute;inset:-6%;z-index:0;
  background:radial-gradient(56% 46% at 50% 50%,rgba(3,7,18,.5),transparent 74%);
}

.beat--hero-a{justify-content:flex-end;padding-bottom:15vh}
.beat--hero-a .lede{margin-top:1.8rem}
.beat--hero-a h1{margin-top:.4rem}

.cue{
  position:absolute;bottom:36px;left:50%;translate:-50% 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;visibility:hidden;
}
.cue__label{font:500 .62rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--ink-dim)}
.cue__line{
  width:1px;height:52px;
  background:linear-gradient(180deg,var(--amber),transparent);
  animation:cuedrop 2.2s ease-in-out infinite;
  transform-origin:top;
}
@keyframes cuedrop{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* why — beat counter + eyebrow */
.why__eyebrow{
  position:absolute;top:16vh;left:50%;translate:-50% 0;z-index:3;margin:0;
  opacity:0;visibility:hidden;
}
.why__count{
  position:absolute;left:6vw;bottom:7vh;z-index:3;
  font:italic 300 1rem var(--serif);color:var(--ink-faint);letter-spacing:.1em;
}
.why__count #whyIndex{font-size:2.2rem;color:var(--amber);font-style:italic}
.beat--why .lede{color:rgba(240,231,213,.8)}

/* cta */
.beat--cta-b .btn--amber{margin-top:2.6rem}
.beat--cta-b .lede{color:rgba(240,231,213,.85)}
.cta__slogan{margin-top:2.2rem;font:italic 300 1rem var(--serif);color:var(--ink-faint)}

/* ---------- threshold (positioning) ---------- */
#threshold{position:relative;padding:24vh 0 22vh;overflow:hidden}
.threshold__bg{position:absolute;inset:-8% 0}
.threshold__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.85) saturate(.9)}
.fog{
  position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:1;
}
.fog--a{width:58vw;height:36vh;top:6%;right:-14vw;background:radial-gradient(closest-side,rgba(232,162,75,.13),rgba(17,29,63,.2),transparent)}
.fog--b{width:52vw;height:34vh;bottom:4%;left:-16vw;background:radial-gradient(closest-side,rgba(90,107,216,.1),rgba(17,29,63,.24),transparent)}
.threshold__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr .85fr;gap:6vw;align-items:center;
}
.threshold__copy h2{margin-bottom:1.6rem;max-width:16ch}
.threshold__window{justify-self:center;width:min(360px,80%)}
.arch{
  position:relative;overflow:hidden;aspect-ratio:3/4.1;
  border-radius:999px 999px 18px 18px;
  border:1px solid var(--line);
  box-shadow:0 30px 90px -30px rgba(3,7,18,.9),0 0 70px -24px rgba(232,162,75,.45);
}
.arch img,.arch video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arch__grade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,10,26,.42),transparent 34%,rgba(5,10,26,.66)),
    radial-gradient(90% 60% at 50% 100%,rgba(232,162,75,.2),transparent 60%);
}
.plate--forest{filter:sepia(.45) hue-rotate(-14deg) saturate(.72) brightness(.6) contrast(1.08)}
.arch__caption{
  margin-top:1.1rem;text-align:center;
  font:italic 300 .92rem var(--serif);color:var(--ink-faint);
}

/* ---------- hall of gates ---------- */
.hall{position:relative}
.hall__bg{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg-deep)}
.hall__bg .plate__video{filter:saturate(1) contrast(1.03) brightness(.9)}
.hall__fore{position:relative;margin-top:-100vh;z-index:2}
.hall__intro{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
}
.hall__intro h2{text-shadow:0 2px 40px rgba(3,7,18,.75)}
.hall__intro .lede{margin-top:1.6rem;text-shadow:0 1px 20px rgba(3,7,18,.9),0 0 6px rgba(3,7,18,.6)}

.gates{
  display:grid;grid-template-columns:1fr 1fr;
  gap:11vh 7vw;padding:4vh 3vw 20vh;
}
.gate{position:relative;max-width:430px;justify-self:center}
.gate:nth-child(even){margin-top:18vh}
.gate__numeral{
  position:absolute;top:-5.2rem;left:-1.6rem;z-index:3;
  font:italic 300 clamp(4rem,6vw,6.2rem)/1 var(--serif);
  color:transparent;-webkit-text-stroke:1px rgba(232,162,75,.58);
  filter:drop-shadow(0 0 16px rgba(232,162,75,.3));
  pointer-events:none;
}
.gate .arch{aspect-ratio:3/3.9}
.gate .arch img{
  transform-origin:50% 60%;
  animation:kburns 17s ease-in-out infinite alternate;
}
.gate:nth-child(2n) .arch img{animation-delay:-5s;animation-duration:19s}
.gate:nth-child(3n) .arch img{animation-delay:-9s}
.gate:nth-child(5n) .arch img{animation-delay:-13s;animation-duration:21s}
@keyframes kburns{
  from{transform:scale(1.05) translate3d(0,-1.2%,0)}
  to{transform:scale(1.17) translate3d(1.5%,1.4%,0)}
}
.gate__body{padding:1.5rem .4rem 0}
.gate__body h3{margin-bottom:.55rem}
.gate__body p{font-size:.97rem;color:var(--ink-dim);max-width:40ch}
.gate__body p em{color:var(--amber-hi);font-style:italic}
.gate__paren{font-family:var(--sans);font-size:.72em;color:var(--ink-faint);letter-spacing:.02em}

/* ---------- process (the crossing) ---------- */
#process{position:relative}
.process__bg{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg-deep)}
.process__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.process__fore{position:relative;margin-top:-100vh;z-index:2}
.process__fore .wrap{
  min-height:168vh;display:flex;flex-direction:column;justify-content:center;
  padding-top:16vh;padding-bottom:16vh;
}
.process__head{margin-bottom:7vh}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:3vw}
.step{border-top:1px solid var(--line);padding-top:1.6rem}
.step__num{
  display:block;font:italic 300 2.1rem/1 var(--serif);color:var(--amber);
  margin-bottom:1.1rem;
}
.step h3{margin-bottom:.6rem}
.step p{font-size:.94rem;color:var(--ink-dim)}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:2;background:var(--bg-deep);
  border-top:1px solid var(--line-soft);padding:9vh 0 4vh;
}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4vw}
.footer__tag{margin-top:1.4rem;font-family:var(--serif);font-size:1.1rem;max-width:24ch}
.footer__fact{margin-top:.9rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.footer__head{font:600 .68rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--amber);margin-bottom:1.3rem}
.footer__col{display:flex;flex-direction:column;gap:.65rem}
.footer__col a{font-size:.9rem;color:var(--ink-dim);transition:color .3s}
.footer__col a:hover{color:var(--amber-hi)}
.footer__base{
  margin-top:8vh;padding-top:2.2rem;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  font-size:.82rem;color:var(--ink-faint);
}
.footer__dream{font:italic 300 .85rem var(--serif)}

/* ---------- reveals ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity 1s ease,transform 1.15s cubic-bezier(.19,1,.22,1)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  #thread{display:none}
  .steps{grid-template-columns:1fr 1fr;gap:5vh 6vw}
}
@media (max-width:720px){
  #top{padding:15px 18px}
  #top.scrolled{padding:11px 18px}
  .topnav{display:none}
  .brand__mark{width:25px}
  .btn--ghost{font-size:.72rem;padding:.65em 1.05em}
  .pin--hero{height:420vh}
  .pin--why{height:360vh}
  .pin--cta{height:280vh}
  .beat{padding:0 7vw}
  .beat--hero-a{padding-bottom:17vh}
  .process__fore .wrap{min-height:150vh}
  .beat .lede br,.drift-sub br{display:none}
  .threshold__grid{grid-template-columns:1fr;gap:9vh}
  .threshold__window{width:min(300px,78%)}
  #threshold{padding:18vh 0 16vh}
  .gates{grid-template-columns:1fr;gap:12vh;padding-bottom:16vh}
  .gate:nth-child(even){margin-top:0}
  .gate__numeral{top:-4.2rem;left:-.2rem}
  .why__count{left:7vw;bottom:5vh}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
  .footer__base{flex-direction:column;gap:.5rem}
}

/* ---------- reduced motion: the still book of the dream ---------- */
@media (prefers-reduced-motion: reduce){
  #embers,#grain,#thread{display:none}
  #loader{display:none}
  .pin{height:auto}
  .stage{position:relative;height:auto;min-height:72vh}
  .plate__video{display:none}
  .rm-poster{display:block;position:absolute}
  .beat,.why__eyebrow,.cue{
    position:relative;inset:auto;opacity:1;visibility:visible;transform:none;
  }
  .beat{padding:11vh 6vw}
  .cue{display:none}
  .why__eyebrow{padding-top:8vh;text-align:center;left:auto;translate:none}
  .why__count{display:none}
  .gate .arch img{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .hall__bg{position:relative;height:52vh}
  .hall__bg .rm-poster{position:absolute}
  .hall__fore{margin-top:0}
  .hall__intro{min-height:auto;padding:14vh 0 6vh}
  .process__bg{position:relative;height:38vh}
  .process__bg video{display:none}
  .process__bg::before{
    content:"";position:absolute;inset:0;
    background:url("../img/poster-forest.jpg") center/cover;
    filter:sepia(.45) hue-rotate(-14deg) saturate(.72) brightness(.6);
  }
  .process__fore{margin-top:0}
  .arch video{display:none}
  .arch--window::before{
    content:"";position:absolute;inset:0;z-index:0;
    background:url("../img/poster-forest.jpg") center/cover;
    filter:sepia(.45) hue-rotate(-14deg) saturate(.72) brightness(.6);
  }
  .cue__line{animation:none}
  .ring-arc{animation:none}
}