:root{
  --ink:#0c0b09; --red:#e6362b; --paper:#ece6da;
  --disp:"Syne",sans-serif; --sans:"Inter",system-ui,sans-serif; --mono:"Space Grotesk",monospace;
  --pad:clamp(22px,5vw,80px); --mood:#0c0b09;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--mood);color:#fff;font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;
  transition:background .6s ease;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--red)}

/* canvas pinned */
.webgl{position:fixed;top:0;left:0;width:100vw;height:100vh;display:block;z-index:0}
.spacer{position:relative;z-index:-1}

/* TOP BAR */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);mix-blend-mode:difference}
.bar__brand img{height:26px;filter:invert(1) brightness(2)}
.bar__cta{font-family:var(--mono);font-size:13px;letter-spacing:.06em;border:1px solid #fff;padding:8px 18px;border-radius:30px}
.bar__cta:hover{background:#fff;color:#000}

/* LOADER */
.loader{position:fixed;inset:0;z-index:60;background:var(--ink);display:flex;align-items:center;justify-content:center;transition:opacity .8s}
.loader.done{opacity:0;pointer-events:none}
.loader__bar{width:min(220px,40vw);height:2px;background:rgba(255,255,255,.18);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--red);transition:width .3s}

/* INTRO */
.intro{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);max-width:1000px;transition:opacity .7s,transform .9s;pointer-events:none}
.intro.hide{opacity:0;transform:translateY(-30px)}
.intro__h{font-family:var(--disp);font-weight:800;font-size:clamp(3.2rem,10vw,9.5rem);line-height:.9;letter-spacing:-.03em;margin:20px 0 0}
.intro__h .out{color:transparent;-webkit-text-stroke:1.5px #fff}
.intro__p{max-width:480px;margin-top:24px;font-size:clamp(1rem,1.6vw,1.25rem);color:rgba(255,255,255,.88)}
.intro__cue{display:inline-block;margin-top:34px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* CAPTION */
.caption{position:fixed;left:var(--pad);bottom:46px;z-index:15;display:flex;align-items:flex-end;gap:16px;
  opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;mix-blend-mode:difference;color:#fff}
.caption.show{opacity:1;transform:none}
.caption__no{font-family:var(--disp);font-weight:800;font-size:2.4rem;line-height:.8}
.caption__txt b{font-family:var(--disp);font-weight:600;font-size:1.25rem;display:block}
.caption__txt small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* END */
.end{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  max-width:900px;opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s;pointer-events:none}
.end.show{opacity:1;transform:none;pointer-events:auto}
.end__h{font-family:var(--disp);font-weight:800;font-size:clamp(2.8rem,8vw,6.5rem);line-height:.94;letter-spacing:-.02em;margin:14px 0 0}
.end__p{max-width:46ch;margin:22px 0 34px;color:rgba(255,255,255,.7);font-size:1.1rem}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--red);color:#fff;font-family:var(--disp);font-weight:600;
  font-size:1.1rem;padding:17px 32px;border-radius:46px;transition:transform .3s,background .3s;width:max-content}
.btn:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
.end__foot{display:flex;gap:28px;flex-wrap:wrap;margin-top:54px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.55)}
.end__foot a:hover{color:#fff}

/* RAIL */
.rail{position:fixed;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.12);z-index:18}
.rail span{display:block;height:100%;width:0;background:var(--red)}

@media(max-width:700px){
  .caption{bottom:40px}.caption__no{font-size:1.8rem}
  .intro__p,.end__p{max-width:90%}
}
@media(prefers-reduced-motion:reduce){.intro__cue{animation:none}}