:root{--bg:#080808;--fg:#F4F1EA;--ac:#D7FF00;--pad:clamp(14px,2vw,32px);--fs:18vw;--wh:calc(var(--fs)*.36);
--disp:'Anton','Bebas Neue',Impact,'Arial Narrow Bold','Haettenschweiler',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);min-height:100svh;overflow-x:clip;position:relative}
.page{min-height:100svh;display:flex;align-items:center;padding:var(--pad);padding-top:max(var(--pad),env(safe-area-inset-top));padding-bottom:max(var(--pad),env(safe-area-inset-bottom))}
.stage{position:relative;width:100%;margin-top:calc(var(--fs)*.34)}

h1{font-family:var(--disp);font-weight:400;line-height:.84;text-transform:uppercase;letter-spacing:-.015em;display:block}
.w{display:block;white-space:nowrap}
.ln{display:inline-block;overflow:hidden;padding:.035em .01em 0;vertical-align:top}
.ln>span{display:inline-block;transform:translateY(105%);animation:up 1.1s cubic-bezier(.2,.85,.1,1) forwards;transition:color .25s}
@keyframes up{to{transform:none}}
.under{font-size:calc(var(--fs)*.56);color:var(--ac);margin-left:34%;margin-bottom:-.06em;position:relative;z-index:2;line-height:.8}
.under .ln>span{animation-delay:.1s}
.big{display:inline-block;font-size:var(--fs);color:var(--fg);position:relative;z-index:1}
.big .ln:nth-child(1)>span{animation-delay:.3s}.big .ln:nth-child(2)>span{animation-delay:.42s}.big .ln:nth-child(3)>span{animation-delay:.54s}
.big .ln:hover>span{color:var(--ac)}
.under .ln:hover>span{color:var(--fg)}

/* workers */
.wk{position:absolute;left:0;top:0;height:var(--wh);aspect-ratio:110/140;transform:translate(-50%,-100%);overflow:visible;pointer-events:none;
 color:var(--fg);fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:9;opacity:0;visibility:hidden}
.wk.on{visibility:visible;animation:fade .9s 1.2s forwards}
@keyframes fade{to{opacity:1}}
.f{fill:currentColor;stroke:none}
.hat{fill:var(--ac);stroke:none}
.hm,.roll,.lg{transform-box:view-box}
.hm{transform-origin:50px 50px;animation:hit .9s cubic-bezier(.6,0,.9,.5) infinite}
@keyframes hit{0%{transform:rotate(-85deg)}55%{transform:rotate(18deg)}100%{transform:rotate(-85deg)}}
.spark{opacity:0;animation:flash .9s infinite}
@keyframes flash{0%,50%{opacity:0}56%{opacity:1}75%,100%{opacity:0}}
.roll{transform-origin:50px 50px;animation:sweep 1.5s ease-in-out infinite alternate}
@keyframes sweep{from{transform:rotate(-40deg)}to{transform:rotate(35deg)}}
.glow{fill:var(--ac);stroke:none;animation:glow .18s steps(2) infinite}
@keyframes glow{50%{opacity:.35;transform:scale(.6)}}
.sp circle{fill:var(--ac);stroke:none;animation:fly .5s linear infinite}
@keyframes fly{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.walk{animation:go 9s linear infinite}
@keyframes go{0%{transform:translateX(0)}50%{transform:translateX(190px)}100%{transform:translateX(0)}}
.flip{transform-origin:55px 70px;animation:turn 9s linear infinite}
@keyframes turn{0%,49.9%{transform:scaleX(1)}50%,99.9%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.lg{transform-origin:50px 84px;animation:step .6s ease-in-out infinite alternate}
.lg.b{animation-direction:alternate-reverse}
@keyframes step{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}

.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

@media (max-width:720px){
  :root{--wh:calc(var(--fs)*.3)}
  .big,.big .ln{display:block}
  .under{margin-left:0;font-size:calc(var(--fs)*.62);margin-bottom:-.04em}
  .walk{animation-name:go-m}
  @keyframes go-m{0%{transform:translateX(0)}50%{transform:translateX(150px)}100%{transform:translateX(0)}}
}
@media (prefers-reduced-motion:reduce){
  .ln>span{transform:none;animation:none}
  .hm,.roll,.walk,.flip,.lg,.sp circle,.glow,.spark{animation:none}
  .wk.on{opacity:1;animation:none}
}