:root{--bg:#0a0a0c;--purple:#a50dff;--ink:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);overflow-x:hidden;position:relative;min-height:100vh;min-height:100svh;
  font-family:"Teko","Barlow Condensed","Arial Narrow","Haettenschweiler",Impact,system-ui,sans-serif}

.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 14px;z-index:10;font:600 14px system-ui,sans-serif}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tattered checkered flag */
.flag{position:fixed;inset:-6%;z-index:0;pointer-events:none;
  background:url("/images/flag-bg.webp") center/cover no-repeat;
  opacity:.34;filter:grayscale(.2) contrast(.9);
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,#000 25%,transparent 95%);
          mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,#000 25%,transparent 95%);
  animation:drift 28s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-1.2%,0,0) rotate(-.4deg) scale(1.02)}to{transform:translate3d(1.2%,-1%,0) rotate(.4deg) scale(1.05)}}

.glow{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 55% 42% at 50% 46%,rgba(165,13,255,.30),transparent 70%),
             radial-gradient(ellipse 120% 90% at 50% 50%,transparent 45%,rgba(0,0,0,.75) 100%)}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.stage{position:relative;z-index:3;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(8px,2.5vw,26px);padding:6vh 5vw 10vh;text-align:center}

.logo{width:min(92vw,880px);height:auto;filter:drop-shadow(0 12px 40px rgba(165,13,255,.45));
  animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.soon{font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.09em;line-height:1;
  font-size:clamp(34px,7.5vw,84px);color:#fff;
  text-shadow:3px 3px 0 var(--purple),6px 6px 0 #000,0 0 30px rgba(165,13,255,.5);
  transform:skewX(-4deg);animation:rise .9s .15s cubic-bezier(.2,.8,.2,1) both}
.dots i{font-style:normal;animation:blink 1.4s infinite both}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.15}30%{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1}}
.soon{--x:0}
.sub{font:500 clamp(16px,2.6vw,22px)/1.4 system-ui,sans-serif;color:#cfcfd6}
.sub a{color:#fff;text-decoration-color:var(--purple);text-underline-offset:4px}

.foot{position:fixed;left:0;right:0;bottom:0;z-index:3;text-align:center;padding:14px;
  font:500 12px system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}

@media (prefers-reduced-motion:reduce){.flag,.logo,.soon,.dots i{animation:none}.dots i{opacity:1}}