@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;--bone:#EFEBE3;--blaze:#E8541E;--marsh:#4E5634;--pad:clamp(18px,3.2vw,48px);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#2C3122}
body{color:var(--bone);-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:640vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg,#2C3122)}
.world{position:absolute;inset:0;perspective:2400px;perspective-origin:50% 40%;-webkit-mask:url(hoodie.webp) no-repeat;mask:url(hoodie.webp) no-repeat}
.stack{position:absolute;left:50%;top:50%;width:var(--sw);height:var(--sh);margin:calc(var(--sh) / -2) 0 0 calc(var(--sw) / -2);transform-style:preserve-3d;will-change:transform}
.stack > img{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform}
.stack .sh{opacity:0}
.ducks{position:absolute;inset:0;transform-style:preserve-3d}
.dk{position:absolute;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;will-change:transform,background-color}

.hoodie{position:absolute;left:50%;top:42%;width:min(42vw,calc(56vh / .8722));aspect-ratio:1/.8722;translate:-50% -50%;opacity:0;pointer-events:none}
.hoodie img{width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 24px 30px rgba(52,36,20,.18))}   /* fill: the same box the camo's hoodie mask uses */

.say{position:absolute;left:var(--pad);bottom:clamp(40px,9vh,96px);font:800 clamp(40px,5.4vw,92px)/.9 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;
  color:var(--bone);opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 18px));text-shadow:0 2px 30px rgba(0,0,0,.25);pointer-events:none}
.final{position:absolute;left:var(--pad);bottom:calc(var(--pad) * .9);color:var(--ink);opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 18px));pointer-events:none}
.final.live{pointer-events:auto}
.final h1{font:800 clamp(44px,6.6vw,112px)/.86 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;letter-spacing:-.012em}
.final p{margin-top:12px;font:500 clamp(11px,.95vw,14px)/1.4 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#5B5650}

.final .cta{margin-top:22px}
.hint{position:absolute;right:var(--pad);bottom:calc(var(--pad) * .9);display:flex;align-items:center;gap:10px;font:500 11px/1 "IBM Plex Mono",monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone);transition:opacity .5s}
.hint 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)}}
.hint.gone{opacity:0}

@media (max-width:760px){.hoodie{width:86vw}.say{font-size:clamp(34px,10vw,52px)}.final h1{font-size:clamp(40px,12vw,60px)}}
@media (prefers-reduced-motion:reduce){.hint svg{animation:none}}

/* on dark grounds: blaze × in the wordmark O and in the duck eye */
.mark{--wm-x:#E8541E;--duck-x:#E8541E}