:root {
  color-scheme: dark;
  --ink: #f7efff;
  --muted: rgba(247, 239, 255, 0.68);
  --hot: #ff2fb3;
  --cold: #47f7ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(120, 42, 255, 0.35), transparent 34rem),
    radial-gradient(circle at 80% 90%, rgba(0, 221, 255, 0.18), transparent 30rem),
    #05020c;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}

.hud {
  position: fixed;
  left: clamp(1.25rem, 5vw, 5rem);
  bottom: clamp(1.5rem, 7vw, 5rem);
  z-index: 2;
  width: min(35rem, calc(100vw - 2.5rem));
  pointer-events: none;
  text-shadow: 0 0 2rem rgba(71, 247, 255, 0.45);
}

.eyebrow {
  margin: 0 0 0.8rem;
  color: var(--cold);
  font-size: clamp(0.72rem, 1.5vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(3.8rem, 15vw, 12rem);
  line-height: 0.78;
  letter-spacing: -0.09em;
  text-transform: uppercase;
}

.copy {
  width: min(28rem, 88vw);
  margin: 1.35rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 17% 31%, rgba(255, 255, 255, 0.8) 0 0.7px, transparent 0.9px 4px),
    repeating-linear-gradient(108deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 7px);
  animation: static-drift 1.5s steps(2, end) infinite;
}

@keyframes static-drift {
  0% { transform: translate3d(-2%, 1%, 0); }
  100% { transform: translate3d(2%, -1%, 0); }
}

@media (max-width: 700px) {
  .hud {
    bottom: 1.25rem;
  }

  .copy {
    max-width: 19rem;
  }
}