:root {
  color-scheme: dark;
  --background: #0b0c11;
  --rainbow-1: oklch(0.68 0.19 25);
  --rainbow-2: oklch(0.8 0.14 90);
  --rainbow-3: oklch(0.7 0.15 145);
  --rainbow-4: oklch(0.68 0.15 230);
  --rainbow-5: oklch(0.66 0.18 300);
}

* {
  box-sizing: border-box;
}

html,
body,
#stage {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 47%, rgb(67 78 144 / 15%), transparent 34%),
    radial-gradient(circle at 18% 12%, rgb(180 91 180 / 7%), transparent 28%),
    var(--background);
}

#stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#stage::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 26%, rgb(0 0 0 / 44%) 100%);
  content: "";
}

#wordmark {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.aura {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(68vw, 880px);
  aspect-ratio: 2.5;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    var(--rainbow-1),
    var(--rainbow-3),
    var(--rainbow-5)
  );
  opacity: 0.09;
  filter: blur(72px);
  transform: translate(-50%, -50%);
  animation: breathe 8s ease-in-out infinite alternate;
}

#fallback {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: none;
  max-width: calc(100vw - 48px);
  margin: 0;
  overflow: hidden;
  color: transparent;
  font: 650 clamp(4rem, 18vw, 11rem) / 0.9 Inter, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.07em;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(
    90deg,
    var(--rainbow-1),
    var(--rainbow-2),
    var(--rainbow-3),
    var(--rainbow-4),
    var(--rainbow-5)
  );
  background-clip: text;
  transform: translate(-50%, -50%);
}

.no-webgl #fallback {
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes breathe {
  from {
    opacity: 0.06;
    transform: translate(-50%, -50%) scale(0.88);
  }

  to {
    opacity: 0.12;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aura {
    animation: none;
  }
}