:root {
  color-scheme: dark;
  --ink: #050007;
  --acid: #d7ff00;
  --hot: #ff00d4;
  --blue: #00e7ff;
  --sun: #fff200;
  --white: #fff8ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

body {
  font-family:
    Impact,
    Haettenschweiler,
    "Arial Black",
    system-ui,
    sans-serif;
}

.plasma {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #050007;
}

.stage {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
  padding: 32px;
}

.stage::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mix-blend-mode: overlay;
  animation: grid-slide 4s linear infinite;
}

.stage::after {
  position: fixed;
  inset: -20%;
  z-index: -1;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 242, 0, 0.75), transparent 18%),
    radial-gradient(circle at 84% 74%, rgba(0, 231, 255, 0.75), transparent 20%),
    radial-gradient(circle at 62% 18%, rgba(255, 0, 212, 0.65), transparent 16%);
  filter: saturate(1.5) contrast(1.2);
  mix-blend-mode: color-dodge;
  animation: spinwash 13s linear infinite;
}

.halo {
  position: absolute;
  width: min(72vw, 720px);
  aspect-ratio: 1;
  border: 10px double rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  box-shadow:
    0 0 30px var(--acid),
    0 0 70px var(--hot),
    inset 0 0 60px var(--blue);
  transform: rotate(-8deg);
  animation: wobble 3.2s ease-in-out infinite alternate;
}

h1 {
  position: relative;
  max-width: 100%;
  margin: 0;
  color: var(--white);
  font-size: 112px;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  text-shadow:
    5px 5px 0 #000,
    11px 11px 0 var(--hot),
    -9px 8px 0 var(--blue),
    0 0 24px var(--sun),
    0 0 56px var(--acid);
  animation: main-pulse 920ms steps(2, end) infinite;
}

h1::before,
h1::after {
  position: absolute;
  inset: 0;
  content: attr(data-text);
  pointer-events: none;
}

h1::before {
  color: var(--acid);
  transform: translate(-9px, -7px);
  mix-blend-mode: screen;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 50%);
  animation: glitch-a 620ms steps(2, end) infinite;
}

h1::after {
  color: var(--hot);
  transform: translate(8px, 8px);
  mix-blend-mode: screen;
  clip-path: polygon(0 50%, 100% 38%, 100% 100%, 0 100%);
  animation: glitch-b 740ms steps(2, end) infinite;
}

.orbit {
  position: absolute;
  width: min(84vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  animation: orbit 9s linear infinite;
  pointer-events: none;
}

.orbit span {
  position: absolute;
  width: 24px;
  aspect-ratio: 1;
  border: 3px solid #000;
  border-radius: 50%;
  background: var(--acid);
  box-shadow:
    0 0 18px var(--acid),
    0 0 34px var(--hot);
}

.orbit span:nth-child(1) {
  top: 0;
  left: 48%;
  background: var(--acid);
}

.orbit span:nth-child(2) {
  top: 20%;
  right: 4%;
  background: var(--hot);
}

.orbit span:nth-child(3) {
  right: 10%;
  bottom: 18%;
  background: var(--blue);
}

.orbit span:nth-child(4) {
  bottom: 0;
  left: 42%;
  background: var(--sun);
}

.orbit span:nth-child(5) {
  bottom: 24%;
  left: 3%;
  background: #00ff6a;
}

.orbit span:nth-child(6) {
  top: 18%;
  left: 9%;
  background: #ff4b00;
}

@media (max-width: 720px) {
  .stage {
    padding: 20px;
  }

  .halo {
    width: 88vw;
    border-width: 7px;
  }

  h1 {
    font-size: 68px;
    line-height: 0.92;
  }

  .orbit span {
    width: 18px;
  }
}

@media (max-width: 390px) {
  h1 {
    font-size: 54px;
  }
}

@keyframes grid-slide {
  to {
    background-position: 34px 34px;
  }
}

@keyframes spinwash {
  to {
    transform: rotate(360deg) scale(1.05);
  }
}

@keyframes wobble {
  from {
    transform: rotate(-8deg) scale(0.96);
  }

  to {
    transform: rotate(8deg) scale(1.04);
  }
}

@keyframes main-pulse {
  0%,
  100% {
    filter: hue-rotate(0deg) saturate(1.2);
    transform: rotate(-1deg) scale(1);
  }

  50% {
    filter: hue-rotate(80deg) saturate(1.9);
    transform: rotate(1deg) scale(1.035);
  }
}

@keyframes glitch-a {
  0%,
  100% {
    transform: translate(-9px, -7px);
  }

  50% {
    transform: translate(12px, -3px);
  }
}

@keyframes glitch-b {
  0%,
  100% {
    transform: translate(8px, 8px);
  }

  50% {
    transform: translate(-12px, 5px);
  }
}

@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}