html, body { height: 100%; margin: 0; }
body {
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, #1a0010 0%, #000 70%);
  overflow: hidden;
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
}
img {
  max-width: min(100%, 720px);
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(255, 0, 80, .35);
}

/* Neon gradient headline with a subtle glitch. */
.glitch {
  position: relative;
  margin: 0;
  text-align: center;
  font-family: Impact, "Arial Black", system-ui, sans-serif;
  font-size: clamp(1.8rem, 6vw, 4.5rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.05;
  background: linear-gradient(90deg, #ff0050, #ff8a00, #ffe600, #00f0ff, #ff0050);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 0, 80, .6));
  animation: shimmer 6s linear infinite, pulse 2.5s ease-in-out infinite;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}
.glitch::before {
  background-image: linear-gradient(#00f0ff, #00f0ff);
  animation: glitch-a 3s infinite steps(1);
}
.glitch::after {
  background-image: linear-gradient(#ff0050, #ff0050);
  animation: glitch-b 3s infinite steps(1);
}

@keyframes shimmer { to { background-position: 300% 0; } }
@keyframes pulse {
  50% { filter: drop-shadow(0 0 24px rgba(0, 240, 255, .7)); }
}
@keyframes glitch-a {
  0%, 88%, 100% { transform: none; opacity: 0; }
  90% { transform: translate(-3px, 2px); opacity: .8; clip-path: inset(10% 0 55% 0); }
  94% { transform: translate(3px, -1px); opacity: .8; clip-path: inset(60% 0 5% 0); }
}
@keyframes glitch-b {
  0%, 89%, 100% { transform: none; opacity: 0; }
  91% { transform: translate(3px, -2px); opacity: .8; clip-path: inset(40% 0 30% 0); }
  95% { transform: translate(-3px, 1px); opacity: .8; clip-path: inset(0 0 70% 0); }
}

@media (prefers-reduced-motion: reduce) {
  .glitch, .glitch::before, .glitch::after { animation: none; }
}
