:root {
  color-scheme: dark;
  --bg: #02040d;
  --ink: #f4fbff;
  --ink-shadow: rgba(0, 0, 0, 0.54);
  --amber: #f8d66d;
  --teal: #35f6ff;
  --red: #ff4f9a;
  --blue: #7aa7ff;
  --violet: #9c7bff;
  --radius: 8px;
}

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

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
}

body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  background:
    linear-gradient(125deg, rgba(53, 246, 255, 0.22), transparent 30%, rgba(156, 123, 255, 0.17) 62%, transparent),
    linear-gradient(235deg, transparent 8%, rgba(255, 79, 154, 0.15), transparent 48%, rgba(70, 255, 178, 0.12)),
    linear-gradient(18deg, transparent 18%, rgba(248, 214, 109, 0.08), transparent 46%),
    linear-gradient(115deg, rgba(53, 246, 255, 0.13), transparent 38%),
    linear-gradient(300deg, rgba(255, 79, 154, 0.11), transparent 46%),
    linear-gradient(180deg, #02040d 0%, #06112b 48%, #010208 100%);
  color: var(--ink);
  font-family: "Space Mono", "Courier New", monospace;
  letter-spacing: 0;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body::before {
  background:
    linear-gradient(110deg, rgba(53, 246, 255, 0.16), transparent 28%, rgba(156, 123, 255, 0.13) 58%, transparent),
    linear-gradient(250deg, transparent 12%, rgba(255, 79, 154, 0.12), transparent 55%, rgba(70, 255, 178, 0.1)),
    linear-gradient(315deg, transparent 10%, rgba(248, 214, 109, 0.08), transparent 48%),
    linear-gradient(180deg, rgba(244, 251, 255, 0.06), transparent 26%);
  background-size:
    150% 150%,
    140% 140%,
    160% 160%,
    auto;
  opacity: 0.56;
  animation: aurora-drift 38s linear infinite;
}

body::after {
  box-shadow:
    inset 0 0 8rem rgba(0, 0, 0, 0.74),
    inset 0 0 3rem rgba(53, 246, 255, 0.1);
}

img {
  display: block;
  max-width: 100%;
}

.moving-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.moving-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, transparent, rgba(53, 246, 255, 0.16), transparent 46%, rgba(156, 123, 255, 0.13), transparent),
    linear-gradient(155deg, rgba(248, 214, 109, 0.11), transparent 34%, rgba(255, 79, 154, 0.13), transparent 72%),
    linear-gradient(25deg, transparent 10%, rgba(70, 255, 178, 0.11), transparent 48%),
    linear-gradient(205deg, rgba(122, 167, 255, 0.1), transparent 32%, rgba(255, 79, 154, 0.09), transparent);
  background-size:
    180% 180%,
    160% 160%,
    150% 150%,
    150% 150%;
  opacity: 0.52;
  animation: aurora-flow 26s ease-in-out infinite alternate;
}

.moving-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(70deg, transparent 18%, rgba(244, 251, 255, 0.08), transparent 44%),
    linear-gradient(290deg, transparent 20%, rgba(53, 246, 255, 0.1), transparent 52%),
    linear-gradient(178deg, rgba(156, 123, 255, 0.08), transparent 36%, rgba(70, 255, 178, 0.06), transparent 70%);
  background-size:
    170% 170%,
    160% 160%,
    190% 190%;
  opacity: 0.32;
  animation: aurora-flow 34s ease-in-out infinite alternate-reverse;
}

.star-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.star-dot {
  position: absolute;
  left: var(--star-x);
  top: var(--star-y);
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: hsl(var(--star-hue) 100% 88%);
  box-shadow:
    0 0 calc(var(--star-size) * 3) hsl(var(--star-hue) 100% 70% / 0.62),
    0 0 calc(var(--star-size) * 8) hsl(var(--star-hue) 100% 64% / 0.24);
  opacity: var(--star-opacity);
  transform: translate3d(-50%, -50%, 0);
  animation: star-twinkle var(--star-speed) ease-in-out infinite;
  animation-delay: var(--star-delay);
}

.head-field {
  position: absolute;
  inset: 0;
  isolation: isolate;
  z-index: 1;
}

.spencer-head {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: auto;
  opacity: var(--opacity);
  filter:
    saturate(var(--saturation))
    contrast(1.12)
    drop-shadow(0 1.35rem 2rem rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 1.45rem var(--glow))
    drop-shadow(0 0 0.8rem rgba(53, 246, 255, 0.2));
  transform:
    translate3d(var(--x), var(--y), 0)
    rotate(var(--rotation))
    scale(var(--scale));
  transform-origin: center;
  user-select: none;
  will-change: transform;
  z-index: var(--depth);
}

.spencer-head.is-primary {
  opacity: 0.78;
}

.landing-shell {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: clamp(1.25rem, 5vw, 3.5rem);
  text-align: center;
}

.headline {
  display: grid;
  justify-items: center;
  gap: clamp(0.65rem, 1.8vw, 1.35rem);
  width: min(92vw, 76rem);
  margin: 0;
  color: var(--ink);
  font-family: "Archivo Black", Impact, Haettenschweiler, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 0.045em 0.14em var(--ink-shadow),
    0.012em 0.012em 0 rgba(255, 79, 154, 0.44),
    -0.012em -0.008em 0 rgba(53, 246, 255, 0.42);
}

.headline-main,
.headline-soon {
  display: block;
}

.headline-main {
  display: grid;
  justify-items: center;
  gap: 0.05em;
  width: 100%;
  font-size: clamp(2.75rem, 8.4vw, 8.8rem);
  line-height: 0.84;
}

.headline-main span {
  display: block;
}

.headline-light {
  font-family: "Space Mono", "Courier New", monospace;
  font-size: clamp(1.2rem, 3.2vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.05;
}

.headline-bold {
  font-family: "Archivo Black", Impact, Haettenschweiler, sans-serif;
  font-weight: 900;
  max-width: 100%;
  white-space: nowrap;
}

.headline-soon {
  color: rgba(244, 251, 255, 0.78);
  font-family: "Space Mono", "Courier New", monospace;
  font-size: clamp(0.72rem, 1.25vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-shadow: 0 0.18rem 0.85rem rgba(0, 0, 0, 0.48);
}

@keyframes aurora-drift {
  to {
    background-position:
      100% 40%,
      0 70%,
      70% 30%,
      0 0;
  }
}

@keyframes aurora-flow {
  to {
    background-position:
      100% 65%,
      0 30%,
      70% 35%,
      50% 100%;
  }
}

@keyframes star-twinkle {
  0%,
  100% {
    opacity: calc(var(--star-opacity) * 0.45);
    transform: translate3d(-50%, -50%, 0) scale(0.78);
  }

  45% {
    opacity: var(--star-opacity);
    transform: translate3d(-50%, -50%, 0) scale(1.18);
  }
}

@media (max-width: 560px) {
  .headline {
    width: min(86vw, 22rem);
    gap: 0.62rem;
  }

  .headline-main {
    font-size: clamp(2.1rem, 10.5vw, 3.85rem);
    width: 100%;
  }

  .headline-light {
    font-size: clamp(0.98rem, 5vw, 1.6rem);
    letter-spacing: 0.12em;
  }

  .headline-bold {
    font-size: clamp(2rem, 10.2vw, 3.65rem);
  }

  .headline-soon {
    font-size: clamp(0.68rem, 3.1vw, 0.86rem);
    letter-spacing: 0.14em;
  }
}

@media (max-height: 520px) {
  .headline {
    gap: 0.38rem;
  }

  .headline-main {
    font-size: clamp(2.3rem, 7.2vw, 5.4rem);
    line-height: 0.82;
  }

  .headline-light {
    font-size: clamp(0.82rem, 2.3vw, 1.4rem);
  }

  .headline-bold {
    font-size: clamp(2.2rem, 7vw, 5.2rem);
  }

  .headline-soon {
    font-size: clamp(0.66rem, 1.5vw, 0.86rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  body {
    overflow: hidden;
  }

  .spencer-head {
    opacity: 0.52;
  }
}