:root{--bg:#0d0d0f;--ink:#f4efe6}
@font-face{font-family:"Archivo Black";src:url(archivo-black.woff2) format("woff2");font-weight:400 900;font-display:block}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);overflow:hidden}
body{min-height:100vh;min-height:100dvh;display:grid;place-items:center;
  background:radial-gradient(120% 80% at 50% 50%,#1b1b20 0%,var(--bg) 70%);
  font-family:"Archivo Black","Arial Black",-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
main{width:100%;padding:4vmin;display:grid;place-items:center;min-height:100vh;min-height:100dvh}
h1{font-weight:900;text-transform:uppercase;text-align:center;line-height:.9;letter-spacing:-.02em;
  font-size:clamp(3.5rem,11.5vw,13rem);color:var(--ink);cursor:default;user-select:none;
  display:flex;flex-wrap:wrap;justify-content:center;column-gap:.28em;row-gap:.06em}
.w{display:inline-flex;white-space:nowrap}
.l{display:inline-block;opacity:0;transform-origin:50% 100%;
  background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 40%,#ffd36b 48%,#ff6b8b 52%,var(--ink) 60%,var(--ink) 100%);
  background-size:400% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:drop .9s cubic-bezier(.2,1.4,.4,1) calc(.3s + var(--i) * .07s) forwards,
            shimmer 5s ease-in-out calc(1.8s + var(--i) * .04s) infinite}
@keyframes drop{
  0%{opacity:0;transform:translateY(-120vh) rotate(-8deg)}
  60%{opacity:1;transform:translateY(0) scale(1.08,.88)}
  78%{transform:translateY(-6%) scale(.97,1.04)}
  100%{opacity:1;transform:none}}
@keyframes shimmer{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}
h1.shrug{animation:shrug 1.1s cubic-bezier(.36,.07,.19,.97)}
@keyframes shrug{
  0%,100%{transform:none}
  20%{transform:translateY(-.06em) rotate(-2.5deg)}
  40%{transform:translateY(0) rotate(2deg)}
  60%{transform:translateY(-.03em) rotate(-1deg)}
  80%{transform:rotate(.5deg)}}
@media (max-width:640px){h1{flex-direction:column;align-items:center;font-size:min(22vw,19vh)}}
@media (prefers-reduced-motion:reduce){.l{animation:none;opacity:1;background:none;color:var(--ink)}h1.shrug{animation:none}}
