:root {
  --bg: #05050a;
  --text: #f4f3fb;
  --muted: #8d8aa6;
  --spectrum: linear-gradient(90deg,
    #8f5bff, #4f7dff, #31d0ff, #3cf2a6, #ffe45c, #ff8a4c, #ff4f8b, #8f5bff);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

main {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1rem;
}

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 10vw, 8rem);
  font-weight: 200;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Pull the trailing letter-spacing back so the word sits optically centred */
  margin-right: -0.08em;
  background: var(--spectrum);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shift 18s linear infinite;
}

p {
  margin: 1.25rem 0 0;
  font-size: clamp(0.75rem, 1.6vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.45em;
  margin-right: -0.45em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Soft drifting colour glows behind the title */
.glow {
  position: fixed;
  inset: 0;
  filter: blur(90px);
  opacity: 0.35;
}

.glow span {
  position: absolute;
  width: 45vmax;
  height: 45vmax;
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: drift 26s ease-in-out infinite alternate;
}

.glow span:nth-child(1) { background: #6b3cff; top: -15%; left: -10%; }
.glow span:nth-child(2) { background: #00b3ff; bottom: -20%; right: -10%; animation-duration: 32s; }
.glow span:nth-child(3) { background: #ff3d8b; top: 40%; left: 45%; width: 30vmax; height: 30vmax; animation-duration: 22s; opacity: 0.6; }

@keyframes shift {
  to { background-position: 300% 0; }
}

@keyframes drift {
  to { transform: translate(8vw, -6vh) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  h1, .glow span { animation: none; }
}