@font-face{font-family:"Archivo";src:url(../assets/fonts/archivo-latin-standard-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
:root{--ground:#E9E1DA;--ink:#121212;--ink-soft:#5B5650;--bone:#EFEBE3;--blaze:#E8541E;--pad:clamp(18px,3.2vw,48px);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ground)}
body{color:var(--ink);-webkit-font-smoothing:antialiased}
::selection{background:var(--blaze);color:var(--bone)}
:focus-visible{outline:2px solid var(--blaze);outline-offset:4px}

.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--pad) * .8) var(--pad);
  color:var(--bone);transition:color .6s var(--ease)}
.top.ink{color:var(--ink)}
.mark{display:flex;align-items:flex-end;gap:clamp(8px,.8vw,12px);height:clamp(18px,2.1vw,26px);color:inherit}
.mark span{display:block;height:100%}.mark .duck{height:132%;margin-bottom:-1%}.mark svg{height:100%;width:auto;display:block}
.drop{font:500 clamp(11px,.9vw,13px)/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:.7em}
.drop .sep{opacity:.5}
.eye{width:.8em;height:1.05em;border-radius:50%;background:var(--blaze);position:relative;display:inline-block}
.eye::before,.eye::after{content:"";position:absolute;left:50%;top:50%;width:.62em;height:.14em;background:var(--bone);transform:translate(-50%,-50%) rotate(45deg)}
.eye::after{transform:translate(-50%,-50%) rotate(-45deg)}

.run{height:620vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* words that belong to each moment; the script sets --o (0..1) */
.cue,.say{position:absolute;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 18px));pointer-events:none;will-change:opacity,transform}
.cue{left:50%;bottom:clamp(26px,5vh,52px);translate:-50% 0;display:flex;align-items:center;gap:12px;color:var(--bone);
  font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.cue svg{width:10px;height:30px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.s1{left:var(--pad);bottom:clamp(40px,9vh,96px);color:var(--bone);font:800 clamp(40px,5.4vw,92px)/.9 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;
  text-shadow:0 2px 30px rgba(0,0,0,.25)}
.s2{left:var(--pad);bottom:clamp(40px,8vh,90px)}
.s2{color:var(--bone);text-shadow:0 2px 30px rgba(0,0,0,.3)}
.s2 h2{font:800 clamp(44px,6.6vw,112px)/.86 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;letter-spacing:-.012em}
.s2 p{margin-top:14px;font:500 clamp(11px,.95vw,14px)/1.4 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--bone)}
.s3{left:var(--pad);top:50%;translate:0 -50%;max-width:44vw}
.s3 h1{font:800 clamp(56px,8.6vw,150px)/.84 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;letter-spacing:-.012em}
.s3[style*="--o:0;"] .go,.s3:not([style]) 
@media (max-width:760px){
  .s3{top:auto;bottom:clamp(30px,6vh,60px);translate:none;max-width:none;right:var(--pad)}
  .s3 h1{font-size:clamp(48px,14vw,72px)}
  .s1{font-size:clamp(34px,10vw,52px)}
}
@media (prefers-reduced-motion:reduce){.cue svg{animation:none}}

/* the × in the wordmark O in blaze */
.mark{--wm-x:#E8541E}