:root {
  --bg-1: #ff1744;
  --bg-2: #00e5ff;
  --bg-3: #f500ff;
  --bg-4: #76ff03;
  --bg-5: #ffea00;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  font-family: "Arial Black", Impact, sans-serif;
  color: #fff;
  overflow: hidden;
  background: #050505;
}

.disco-bg {
  position: fixed;
  inset: -20vmax;
  background:
    radial-gradient(circle at 20% 20%, var(--bg-1), transparent 35%),
    radial-gradient(circle at 80% 25%, var(--bg-2), transparent 30%),
    radial-gradient(circle at 50% 85%, var(--bg-3), transparent 35%),
    radial-gradient(circle at 15% 70%, var(--bg-4), transparent 30%),
    radial-gradient(circle at 90% 80%, var(--bg-5), transparent 35%),
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 255, 255, 0.12) 0deg 12deg,
      rgba(0, 0, 0, 0.05) 12deg 24deg
    );
  filter: saturate(1.6) contrast(1.2) blur(6px);
  animation: spin 8s linear infinite, pulse 1.2s ease-in-out infinite alternate,
    hue 3s linear infinite;
  transform-origin: center;
}

.grain {
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 0.8px, transparent 0.8px);
  background-size: 3px 3px;
  mix-blend-mode: soft-light;
  opacity: 0.25;
  animation: flicker 0.08s steps(2) infinite;
  pointer-events: none;
}

.lasers {
  position: fixed;
  inset: -10vmax;
  background:
    linear-gradient(
      115deg,
      transparent 0 44%,
      rgba(255, 0, 98, 0.45) 46%,
      transparent 48%
    ),
    linear-gradient(
      295deg,
      transparent 0 46%,
      rgba(0, 255, 240, 0.4) 48%,
      transparent 50%
    ),
    linear-gradient(
      20deg,
      transparent 0 60%,
      rgba(255, 255, 255, 0.2) 62%,
      transparent 64%
    );
  filter: blur(3px) saturate(1.3);
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
  animation: laser-sweep 2.5s linear infinite;
}

.logo-rain {
  position: fixed;
  inset: -15vh 0 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.rain-logo {
  position: absolute;
  top: -18vh;
  opacity: 0.6;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
  animation-name: logo-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  gap: 1rem;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 9vw, 5.2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 8px #fff, 0 0 22px #ff00ea, 0 0 40px #00f7ff;
  animation: title-shake 0.18s steps(2) infinite;
}

.ticker {
  margin: -0.2rem 0 0.1rem;
  padding: 0.25rem 1rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  font-size: clamp(1rem, 3.5vw, 1.6rem);
  letter-spacing: 0.14em;
  color: #fff;
  background: linear-gradient(90deg, #ff005c, #ffea00, #00e5ff, #ff005c);
  background-size: 220% 100%;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.45);
  animation: ticker-wave 1.8s linear infinite;
}

.logo {
  width: min(72vw, 430px);
  aspect-ratio: 1;
  object-fit: contain;
  
  background: transparent;
  filter: contrast(1.35) saturate(1.2) drop-shadow(0 0 20px #fff)
    drop-shadow(0 0 35px #ff0088) drop-shadow(0 0 50px #00f0ff);
  animation: rave 0.55s ease-in-out infinite alternate,
    wobble 0.22s ease-in-out infinite;
}

.links {
  width: min(94vw, 780px);
  display: grid;
  gap: 0.65rem;
}

.chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: #fff;
  padding: 0.7rem 0.9rem;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.45);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  animation: chip-strobe 0.7s steps(2) infinite;
}

.chip:hover {
  transform: scale(1.02) translateY(-1px);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.35);
}

.icon {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.45);
}

.icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

.value {
  font-size: clamp(0.78rem, 2.4vw, 1rem);
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca .icon {
  background: #ff005c;
}

.tg .icon {
  background: #25a4e2;
}

.x .icon {
  background: #111;
}

@keyframes spin {
  to {
    transform: rotate(360deg) scale(1.08);
  }
}

@keyframes pulse {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}

@keyframes hue {
  to {
    filter: hue-rotate(360deg) saturate(1.8) contrast(1.2) blur(6px);
  }
}

@keyframes rave {
  from {
    transform: scale(0.93) rotate(-8deg) skew(-1deg, 1deg);
  }
  to {
    transform: scale(1.08) rotate(8deg) skew(1deg, -1deg);
  }
}

@keyframes wobble {
  0% {
    translate: -5px 0;
  }
  100% {
    translate: 5px 0;
  }
}

@keyframes title-shake {
  0% {
    transform: translate(-2px, 2px);
  }
  100% {
    transform: translate(2px, -2px);
  }
}

@keyframes flicker {
  50% {
    opacity: 0.18;
  }
}

@keyframes laser-sweep {
  0% {
    transform: translateX(-4%) rotate(0deg) scale(1);
  }
  50% {
    transform: translateX(4%) rotate(1.5deg) scale(1.02);
  }
  100% {
    transform: translateX(-4%) rotate(0deg) scale(1);
  }
}

@keyframes chip-strobe {
  0% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.45);
  }
}

@keyframes ticker-wave {
  0% {
    background-position: 0% 50%;
    transform: scale(0.98);
  }
  50% {
    background-position: 100% 50%;
    transform: scale(1.03);
  }
  100% {
    background-position: 0% 50%;
    transform: scale(0.98);
  }
}

@keyframes logo-fall {
  0% {
    transform: translate3d(0, -10vh, 0) rotate(var(--rot, 0deg)) scale(0.86);
  }
  100% {
    transform: translate3d(var(--drift, 0vw), 124vh, 0)
      rotate(calc(var(--rot, 0deg) + 120deg)) scale(1.12);
  }
}

@media (max-width: 640px) {
  .chip {
    padding: 0.62rem 0.74rem;
  }

  .icon {
    width: 1.7rem;
    height: 1.7rem;
  }

  .value {
    letter-spacing: 0.02em;
  }
}