/* ─────────────────────────────────────────────────────────────
   ACROPUNK · coming soon
   The game's wordmark on its night: ACRO in white, PUNK in the
   hot metal lettering, swaying in the light (the same film and
   sway as public/css/ui/metal.css), over a deep indigo sky with a
   soft violet pool of light behind it.
   ───────────────────────────────────────────────────────────── */

@property --tilt { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --hue { syntax: '<number>'; inherits: true; initial-value: 212; }
@keyframes metal-tilt { from { --tilt: 0; } to { --tilt: 1; } }
@keyframes metal-hue { from { --hue: 212; } to { --hue: 262; } }
@keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes glitch-a {
  0% { clip-path: inset(10% 0 80% 0); transform: translate(-3px, 0); }
  25% { clip-path: inset(60% 0 20% 0); transform: translate(3px, 0); }
  50% { clip-path: inset(35% 0 45% 0); transform: translate(-2px, 0); }
  75% { clip-path: inset(80% 0 5% 0); transform: translate(2px, 0); }
  100% { clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
}
@keyframes glitch-b {
  0% { clip-path: inset(70% 0 10% 0); transform: translate(3px, 0); }
  25% { clip-path: inset(15% 0 70% 0); transform: translate(-3px, 0); }
  50% { clip-path: inset(50% 0 30% 0); transform: translate(2px, 0); }
  75% { clip-path: inset(5% 0 85% 0); transform: translate(-2px, 0); }
  100% { clip-path: inset(100% 0 0 0); transform: translate(0, 0); }
}

:root {
  --pink: #ff2a6d;
  --cyan: #05d9e8;
  --text: #f4f2ff;
  --text-2: #aba8c3;
  --text-3: #6f6c88;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 32px 20px;
  overflow: hidden;
  background:
    radial-gradient(62vw 34vw at 50% 42%, rgba(44, 32, 112, .34), rgba(44, 32, 112, .12) 45%, transparent 75%),
    radial-gradient(60vmax 60vmax at 8% 6%, rgba(59, 45, 255, .07), transparent 70%),
    radial-gradient(50vmax 50vmax at 94% 96%, rgba(10, 124, 255, .05), transparent 70%),
    linear-gradient(180deg, #05051a, #020205);
  color: var(--text);
  font: 400 16px/1.5 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.soon { display: grid; justify-items: center; text-align: center; animation: rise 1.4s cubic-bezier(.16, 1, .3, 1) both; }

/* the wordmark: big, tight, stacked */
.word {
  font: 900 clamp(68px, 15vw, 196px)/.84 'Orbitron', 'Barlow Condensed', system-ui, sans-serif;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.word > span { display: block; }

/* PUNK: lettering made of the hot metal, its film sliding as it sways */
.metal-text {
  --h: calc(var(--hue) + 140);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .06) 46%, rgba(10, 0, 30, .2) 54%, rgba(255, 255, 255, .1)),
    linear-gradient(100deg, oklch(.88 .1 var(--h)), oklch(.72 .19 calc(var(--h) - 35)) 45%, oklch(.84 .14 calc(var(--h) - 70)), oklch(.72 .19 calc(var(--h) - 35))) calc(var(--tilt) * 100%) 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 .07em oklch(.65 .22 calc(var(--h) - 35) / .55));
  animation: metal-tilt 6.5s ease-in-out infinite alternate, metal-hue 9s ease-in-out infinite alternate;
}

/* the glitch: a cyan and a pink copy flicker across now and then (gate.js) */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-background-clip: border-box;
  background: none;
  filter: none;
}
.glitch::before { color: var(--cyan); }
.glitch::after { color: var(--pink); }
.glitch.is-glitching::before { opacity: .9; animation: glitch-a .42s steps(2, end) both; }
.glitch.is-glitching::after { opacity: .9; animation: glitch-b .42s steps(2, end) both; }

.kana {
  margin-top: clamp(14px, 2.4vw, 26px);
  font: 700 clamp(13px, 1.3vw, 16px)/1 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: .5em;
  padding-left: .5em; /* the tracking's last gap, so it centers */
  color: var(--text-3);
}

/* the status: a lit pill, like the game's own */
.status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(30px, 5vh, 52px);
  height: 44px;
  padding: 0 22px;
  border: 1px solid color-mix(in srgb, var(--pink) 70%, transparent);
  border-radius: 999px;
  background: rgba(14, 14, 32, .7);
  box-shadow: 0 0 34px -10px var(--pink), inset 0 1px 0 rgba(255, 255, 255, .06);
  font: 700 14.5px/1 'Barlow Condensed', system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ffd6e3;
}
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); animation: live 1.8s ease-in-out infinite; }
.status-jp { padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--pink) 40%, transparent); font: 700 13px/1 'Zen Kaku Gothic New', sans-serif; letter-spacing: .2em; color: var(--text-2); }

.tagline { max-width: 34em; margin-top: 22px; font-size: clamp(14px, 1.2vw, 16px); color: var(--text-2); text-wrap: balance; }

@media (max-width: 520px) {
  .status { height: 40px; padding: 0 18px; font-size: 13px; gap: 10px; }
  .status-jp { padding-left: 10px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .soon, .metal-text, .live { animation: none; }
}