:root {
  --page-bg: #010303;
  --stage-bg: #010303;
  --grid-perspective: 1200px;
  --tile-perspective: 720px;
  --tile-depth: 4px;
  --tile-radius: 7px;
  --tile-border: 1px solid rgba(188, 231, 229, 0.2);
  --tile-shadow:
    0 22px 34px rgba(0, 0, 0, 0.46),
    0 0 18px rgba(124, 235, 231, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.48);
  --tile-sheen:
    linear-gradient(
      138deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.08) 22%,
      rgba(255, 255, 255, 0.02) 48%,
      rgba(0, 0, 0, 0.26) 100%
    );
  --spine-size: 1px;
  --spine-color: rgba(228, 246, 245, 0.32);
  --spine-opacity: 0.5;
  --axle-size: 4px;
  --axle-color: rgba(231, 248, 246, 0.8);
  --axle-shadow:
    0 0 10px rgba(121, 232, 230, 0.28),
    0 0 16px rgba(255, 177, 75, 0.14);
  --axle-opacity: 0.66;
  --wordmark-color: #f8fbfb;
  --wordmark-weight: 520;
  --wordmark-shadow:
    0 0 8px rgba(255, 255, 255, 0.75),
    0 0 22px rgba(169, 236, 235, 0.52),
    0 0 46px rgba(255, 179, 85, 0.18);
  --wordmark-offset-y: 0.5vh;
}

body.splash {
  background:
    radial-gradient(circle at 50% 47%, rgba(16, 27, 27, 0.94) 0 18%, transparent 35%),
    #010303;
}

.stage {
  background:
    radial-gradient(circle at 50% 48%, rgba(18, 26, 27, 0.95) 0 15%, rgba(4, 7, 7, 0.86) 32%, transparent 54%),
    radial-gradient(ellipse at 25% 62%, rgba(235, 147, 54, 0.18), transparent 34%),
    radial-gradient(ellipse at 76% 64%, rgba(53, 214, 219, 0.16), transparent 33%),
    linear-gradient(180deg, #030505 0%, #010202 100%);
}

.stage::before,
.stage::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.stage::before {
  z-index: 0;
  background:
    radial-gradient(ellipse 42% 18% at 29% 62%, rgba(255, 166, 63, 0.34), transparent 70%),
    radial-gradient(ellipse 38% 18% at 72% 65%, rgba(73, 231, 233, 0.26), transparent 72%),
    radial-gradient(ellipse 34% 14% at 61% 27%, rgba(255, 190, 103, 0.18), transparent 76%),
    radial-gradient(ellipse 42% 19% at 48% 78%, rgba(64, 208, 212, 0.13), transparent 74%);
  filter: blur(24px);
  opacity: 0.9;
}

.stage::after {
  z-index: 6;
  background:
    radial-gradient(ellipse 28% 16% at 50% 51%, rgba(1, 3, 3, 0.18), rgba(1, 3, 3, 0.78) 78%, transparent 79%),
    radial-gradient(ellipse 44% 27% at 50% 51%, rgba(0, 0, 0, 0) 0 38%, rgba(0, 0, 0, 0.55) 80%, rgba(0, 0, 0, 0.92) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 18% 82%, rgba(0, 0, 0, 0.7));
  box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.95);
}

.tile-grid {
  inset: -14vh -9vw;
  z-index: 2;
  transform: translate3d(0, -1vh, 0) rotateX(48deg) rotateZ(-8deg) scale(1.16);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}

.tile-grid::before {
  z-index: 4;
  background:
    radial-gradient(ellipse 33% 18% at 32% 57%, rgba(255, 185, 93, 0.28), transparent 74%),
    radial-gradient(ellipse 35% 18% at 69% 62%, rgba(94, 239, 240, 0.25), transparent 76%),
    radial-gradient(ellipse 26% 13% at 58% 30%, rgba(255, 210, 145, 0.2), transparent 80%);
  mix-blend-mode: screen;
}

.tile-grid::after {
  z-index: 5;
  background:
    radial-gradient(ellipse 27% 15% at 50% 51%, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.82) 67%, transparent 69%),
    radial-gradient(ellipse 64% 42% at 50% 52%, transparent 0 48%, rgba(0, 0, 0, 0.38) 74%, rgba(0, 0, 0, 0.82) 100%);
}

.tile {
  opacity: 0.78;
  filter: brightness(0.82) saturate(0.92);
}

.tile:nth-child(4n) {
  opacity: 0.52;
}

.tile:nth-child(5n + 2) {
  opacity: 0.64;
}

.tile:nth-child(9n + 4) {
  filter: brightness(1.05) saturate(1.12);
}

.tile:nth-child(13n + 7) {
  opacity: 0.36;
}

.tile-face {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035) 36%, rgba(0, 0, 0, 0.34) 100%),
    var(--tile-front);
}

.tile-face::before {
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--tile-radius) - 1px);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.2), transparent 24%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05) 46%, transparent 64%);
  opacity: 0.58;
  pointer-events: none;
  content: "";
}

.tile-face::after {
  opacity: 0.72;
}

.tile-front {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 38%, rgba(0, 0, 0, 0.42) 100%),
    var(--tile-front);
}

.tile-back {
  border-color: rgba(255, 237, 188, 0.42);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.54), transparent 26%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.25), transparent 35%, rgba(0, 0, 0, 0.22)),
    var(--tile-back);
  box-shadow:
    0 0 26px rgba(89, 235, 234, 0.22),
    0 0 36px rgba(255, 174, 73, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.tile.is-active {
  opacity: 1;
  filter: brightness(1.18) saturate(1.18);
}

.tile.is-active .tile-front,
.tile.is-active .tile-back {
  border-color: rgba(238, 255, 253, 0.58);
}

.brand-lockup {
  z-index: 10;
}

.wordmark-wrap {
  min-width: min(70vw, 760px);
  padding: clamp(1.1rem, 3.2vw, 3rem);
}

.wordmark {
  font-size: 5.2rem;
  letter-spacing: 0;
}

@media (max-width: 680px) {
  .tile-grid {
    inset: -10vh -22vw;
    transform: translate3d(0, -1vh, 0) rotateX(43deg) rotateZ(-9deg) scale(1.08);
  }

  .wordmark-wrap {
    min-width: min(88vw, 520px);
  }

  .wordmark {
    font-size: 2.7rem;
  }
}