/* ATLAS — homepage cinematic composition. Builds on atlas.css tokens; overrides nothing in the system. */
body.home{background:var(--surface-canvas)}
#cine{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;background:var(--surface-canvas)}
body.cine-off #cine{display:none}
.home main{position:relative;z-index:1}

/* navigation stays invisible until the visitor moves */
.home .nav{opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s .9s}
.home.scrolled-in .nav,.home .nav.open,.home .nav:focus-within{opacity:1;visibility:visible;transition:opacity .9s var(--ease)}

/* ---------- I · AWAKEN ---------- */
.awaken{min-height:100svh;display:grid;align-content:center;justify-items:center;text-align:center;padding:calc(var(--nav-h) + env(safe-area-inset-top,0px)) var(--gutter) 10vh;position:relative}
.awaken .emblem{width:clamp(160px,22vw,250px);margin-bottom:clamp(30px,4.5vh,48px)}
.awaken .wordmark{width:clamp(210px,26vw,340px);margin-bottom:18px}
.awaken .sub{display:block;font:400 12px/1 var(--f-sans);letter-spacing:.42em;text-transform:uppercase;color:var(--text-primary);padding-left:.42em;margin-bottom:clamp(44px,8vh,80px)}
.awaken .mantra{font-family:var(--f-serif);font-weight:300;font-size:clamp(32px,4.4vw,62px);line-height:1.05;letter-spacing:-.02em;max-width:15em;text-wrap:balance}
.awaken .cue{position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;justify-items:center;gap:10px;font:400 10px/1 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--text-secondary);padding:12px;min-height:44px}
.awaken .cue i{display:block;width:1px;height:38px;background:linear-gradient(var(--text-secondary),transparent)}
.awaken .cue:hover{color:var(--text-primary)}

/* the emblem resolves in stages: apex → halo → ridge → legs → fill. All state lives on #awaken. */
.emblem .e-apex{opacity:0;transition:opacity 1.8s var(--ease)}
.emblem .e-halo{stroke-dasharray:480;stroke-dashoffset:480;transition:stroke-dashoffset 2.6s var(--ease)}
.emblem .e-ridge{stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.6s var(--ease)}
.emblem .e-legs{stroke-dasharray:640;stroke-dashoffset:640;transition:stroke-dashoffset 1.5s var(--ease)}
.emblem .e-fill{opacity:0;transition:opacity 1.6s var(--ease)}
.emblem .e-legs.done{opacity:0;transition:opacity .8s var(--ease) 1.2s}
.s-apex .e-apex{opacity:1}
.s-halo .e-halo{stroke-dashoffset:0}
.s-ridge .e-ridge{stroke-dashoffset:0}
.s-legs .e-legs{stroke-dashoffset:0}
.s-fill .e-fill{opacity:1}
.s-fill .e-legs{opacity:0;transition:opacity 1s var(--ease) .6s}
.awaken .wordmark,.awaken .sub,.awaken .mantra,.awaken .cue{opacity:0;transform:translateY(10px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)}
.s-word .wordmark,.s-sub .sub,.s-mantra .mantra,.s-cue .cue{opacity:1;transform:none}

/* ---------- movements II–IV: tall wrappers with a pinned viewport ---------- */
.move{position:relative;height:240vh}
.move .pin{position:sticky;top:0;height:100svh;display:grid;align-content:center;padding:0 var(--gutter)}
.move .stage{display:grid;gap:18px;max-width:var(--max);margin:0 auto;width:100%}
.move .k{font:500 11px/1 var(--f-mono);letter-spacing:.32em;text-transform:uppercase;color:var(--brand-accent)}
.move .line{font-family:var(--f-serif);font-weight:300;font-size:clamp(30px,4vw,58px);line-height:1.05;letter-spacing:-.02em;max-width:14em;text-wrap:balance}
.move .line.big{font-size:clamp(34px,5.2vw,76px)}
.move .state{font:400 11px/1.8 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}
.move [data-at]{opacity:0;transform:translateY(10px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.move [data-at].on{opacity:1;transform:none}
/* text sits above the canvas drawing, positioned per movement */
#search .stage{align-content:start;padding-top:12vh;min-height:70svh}
#prove .stage{align-content:start;padding-top:10vh;min-height:70svh}
#prove .line{margin-top:auto}
#authority .stage{align-content:start;padding-top:10vh;min-height:74svh}
#authority .state{margin-top:auto}
@media (max-width:720px){
  .move{height:200vh}
  .move .line{font-size:clamp(30px,9vw,40px)}
  .move .line.big{font-size:clamp(34px,10vw,44px)}
  #search .stage,#prove .stage,#authority .stage{padding-top:8vh;min-height:0}
  #prove .line,#authority .state{margin-top:0}
}

/* ---------- ENDING ---------- */
.ending{min-height:100svh;display:grid;align-content:center;justify-items:center;text-align:center;gap:0;padding:var(--sec) var(--gutter);position:relative}
.ending .emblem-static{width:88px;margin-bottom:32px}
.ending .mantra{font-family:var(--f-serif);font-weight:300;font-size:clamp(34px,5vw,72px);line-height:1.02;letter-spacing:-.025em;max-width:14em;text-wrap:balance}
.ending .door{margin-top:clamp(40px,6vh,60px)}
.ending .strip{margin-top:clamp(48px,8vh,80px);font:400 10.5px/1.8 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}

/* the home footer is quieter */
.home .foot{position:relative;z-index:1;background:var(--surface-canvas)}

/* reduced motion: everything at rest */
@media (prefers-reduced-motion:reduce){
  .home .nav{opacity:1;visibility:visible}
  .emblem .e-apex,.emblem .e-fill{opacity:1}.emblem .e-halo,.emblem .e-ridge{stroke-dashoffset:0}.emblem .e-legs{opacity:0}
  .awaken .wordmark,.awaken .sub,.awaken .mantra,.awaken .cue,.move [data-at]{opacity:1;transform:none}
  .move{height:auto}.move .pin{position:relative;height:auto;min-height:100svh}
}