:root {
  --bg-top: #02070b;
  --bg-bottom: #06131f;
  --mx: 0.5;
  --my: 0.5;
  --px: 0px;
  --py: 0px;
  --ax: 0px;
  --ay: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow: 1;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-top);
}

body {
  overflow: hidden;
  font-family: sans-serif;
}

.page-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-top) 0%, #041018 58%, var(--bg-bottom) 100%);
}

.page-shell::before,
.page-shell::after,
.aurora-field,
.grain,
.vignette,
.stage,
.console-text {
  position: absolute;
}

.page-shell::before,
.page-shell::after,
.aurora-field,
.grain,
.vignette,
.console-text {
  inset: 0;
  pointer-events: none;
}

.page-shell::before {
  content: "";
  background:
    radial-gradient(circle at 20% 18%, rgba(164, 224, 255, 0.08), transparent 12%),
    radial-gradient(circle at 76% 14%, rgba(133, 192, 255, 0.06), transparent 10%),
    radial-gradient(circle at 60% 34%, rgba(176, 255, 239, 0.05), transparent 8%);
  opacity: 0.8;
  transform: translate(calc(var(--px) * -0.04), calc(var(--py) * -0.04));
}

.page-shell::after {
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.12));
}

.aurora-field {
  inset: -8%;
  filter: blur(14px) saturate(108%);
  opacity: 0.9;
  transform-origin: 50% 30%;
}

.aurora-field-a {
  background:
    linear-gradient(
      102deg,
      transparent 14%,
      rgba(94, 255, 198, 0.1) 20%,
      rgba(110, 255, 166, 0.22) 28%,
      rgba(124, 255, 212, 0.18) 34%,
      rgba(104, 230, 255, 0.16) 40%,
      rgba(78, 156, 255, 0.14) 46%,
      rgba(152, 102, 255, 0.2) 53%,
      rgba(190, 118, 255, 0.14) 58%,
      transparent 62%
    );
  transform:
    translate(calc(var(--ax) * 0.28), calc(var(--ay) * 0.18))
    skewX(var(--tilt-y))
    rotate(calc(-12deg + var(--tilt-x)))
    scale(calc(1.18 + (var(--glow) - 1) * 0.12));
  opacity: calc(0.8 + (var(--glow) - 1) * 0.45);
  animation: aurora-drift-a 14s ease-in-out infinite, aurora-color-a 9s ease-in-out infinite;
}

.aurora-field-b {
  background:
    linear-gradient(
      78deg,
      transparent 24%,
      rgba(124, 255, 190, 0.08) 30%,
      rgba(96, 255, 162, 0.18) 38%,
      rgba(84, 220, 255, 0.16) 46%,
      rgba(92, 144, 255, 0.14) 54%,
      rgba(156, 108, 255, 0.15) 60%,
      rgba(196, 116, 255, 0.1) 65%,
      transparent 68%
    );
  transform:
    translate(calc(var(--ax) * -0.24), calc(var(--ay) * 0.14))
    skewX(calc(var(--tilt-y) * -0.8))
    rotate(calc(8deg - var(--tilt-x)))
    scale(calc(1.14 + (var(--glow) - 1) * 0.1));
  opacity: calc(0.7 + (var(--glow) - 1) * 0.35);
  animation: aurora-drift-b 17s ease-in-out infinite, aurora-color-b 11s ease-in-out infinite;
}

.grain {
  width: 100%;
  height: 100%;
  opacity: 0.42;
  mix-blend-mode: soft-light;
}

.vignette {
  background:
    radial-gradient(circle at center, transparent 54%, rgba(0, 0, 0, 0.12) 78%, rgba(0, 0, 0, 0.28) 100%);
}

.stage {
  inset: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.console-text {
  inset: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  color: rgba(214, 246, 255, 0.88);
  font-family: "Major Mono Display", monospace;
  font-size: clamp(1.05rem, 2vw, 1.85rem);
  letter-spacing: 0.18em;
  text-transform: lowercase;
  text-shadow: 0 0 14px rgba(126, 219, 255, 0.14);
  white-space: nowrap;
}

.console-copy {
  min-width: 1ch;
}

.console-cursor {
  display: inline-block;
  margin-left: 0.08em;
  animation: blink-cursor 0.9s steps(1, end) infinite;
}

@keyframes aurora-drift-a {
  0% {
    transform:
      translate(calc(var(--ax) * 0.2), calc(var(--ay) * 0.12))
      skewX(calc(var(--tilt-y) * 0.5))
      rotate(calc(-13deg + var(--tilt-x)))
      scale(calc(1.12 + (var(--glow) - 1) * 0.08));
  }

  27% {
    transform:
      translate(calc(var(--ax) * 0.34), calc(var(--ay) * 0.22))
      skewX(calc(var(--tilt-y) * 1.05))
      rotate(calc(-9deg + var(--tilt-x)))
      scale(calc(1.18 + (var(--glow) - 1) * 0.11));
  }

  56% {
    transform:
      translate(calc(var(--ax) * 0.26), calc(var(--ay) * 0.2))
      skewX(calc(var(--tilt-y) * 0.7))
      rotate(calc(-6deg + var(--tilt-x)))
      scale(calc(1.2 + (var(--glow) - 1) * 0.13));
  }

  78% {
    transform:
      translate(calc(var(--ax) * 0.38), calc(var(--ay) * 0.16))
      skewX(calc(var(--tilt-y) * 1.15))
      rotate(calc(-10deg + var(--tilt-x)))
      scale(calc(1.16 + (var(--glow) - 1) * 0.1));
  }

  100% {
    transform:
      translate(calc(var(--ax) * 0.22), calc(var(--ay) * 0.14))
      skewX(calc(var(--tilt-y) * 0.55))
      rotate(calc(-12deg + var(--tilt-x)))
      scale(calc(1.13 + (var(--glow) - 1) * 0.09));
  }
}

@keyframes aurora-drift-b {
  0% {
    transform:
      translate(calc(var(--ax) * -0.18), calc(var(--ay) * 0.1))
      skewX(calc(var(--tilt-y) * -0.55))
      rotate(calc(9deg - var(--tilt-x)))
      scale(calc(1.1 + (var(--glow) - 1) * 0.08));
  }

  24% {
    transform:
      translate(calc(var(--ax) * -0.3), calc(var(--ay) * 0.18))
      skewX(calc(var(--tilt-y) * -0.9))
      rotate(calc(5deg - var(--tilt-x)))
      scale(calc(1.16 + (var(--glow) - 1) * 0.11));
  }

  51% {
    transform:
      translate(calc(var(--ax) * -0.22), calc(var(--ay) * 0.2))
      skewX(calc(var(--tilt-y) * -0.72))
      rotate(calc(2deg - var(--tilt-x)))
      scale(calc(1.19 + (var(--glow) - 1) * 0.12));
  }

  76% {
    transform:
      translate(calc(var(--ax) * -0.34), calc(var(--ay) * 0.13))
      skewX(calc(var(--tilt-y) * -1))
      rotate(calc(7deg - var(--tilt-x)))
      scale(calc(1.13 + (var(--glow) - 1) * 0.09));
  }

  100% {
    transform:
      translate(calc(var(--ax) * -0.2), calc(var(--ay) * 0.11))
      skewX(calc(var(--tilt-y) * -0.6))
      rotate(calc(8deg - var(--tilt-x)))
      scale(calc(1.11 + (var(--glow) - 1) * 0.08));
  }
}

@keyframes aurora-color-a {
  0%,
  100% {
    opacity: 0.66;
    filter: blur(15px) saturate(96%) brightness(0.9) hue-rotate(-8deg);
  }

  18% {
    opacity: 0.84;
    filter: blur(14px) saturate(128%) brightness(1.02) hue-rotate(-18deg);
  }

  36% {
    opacity: 0.72;
    filter: blur(15px) saturate(104%) brightness(0.92) hue-rotate(12deg);
  }

  52% {
    opacity: 0.96;
    filter: blur(13px) saturate(160%) brightness(1.2) hue-rotate(24deg);
  }

  70% {
    opacity: 0.74;
    filter: blur(15px) saturate(110%) brightness(0.95) hue-rotate(-10deg);
  }

  86% {
    opacity: 0.88;
    filter: blur(14px) saturate(138%) brightness(1.06) hue-rotate(18deg);
  }
}

@keyframes aurora-color-b {
  0%,
  100% {
    opacity: 0.58;
    filter: blur(15px) saturate(92%) brightness(0.84) hue-rotate(14deg);
  }

  20% {
    opacity: 0.64;
    filter: blur(15px) saturate(98%) brightness(0.88) hue-rotate(-14deg);
  }

  34% {
    opacity: 0.86;
    filter: blur(14px) saturate(144%) brightness(1.08) hue-rotate(22deg);
  }

  56% {
    opacity: 0.66;
    filter: blur(15px) saturate(102%) brightness(0.9) hue-rotate(-8deg);
  }

  74% {
    opacity: 0.84;
    filter: blur(13px) saturate(152%) brightness(1.14) hue-rotate(30deg);
  }

  88% {
    opacity: 0.62;
    filter: blur(15px) saturate(98%) brightness(0.88) hue-rotate(-18deg);
  }
}

@keyframes blink-cursor {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .aurora-field {
    filter: blur(12px) saturate(106%);
  }

  .console-text {
    font-size: clamp(0.95rem, 5vw, 1.3rem);
    letter-spacing: 0.14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell::before,
  .aurora-field,
  .grain {
    animation: none !important;
    transform: none !important;
  }

  .console-cursor {
    animation-duration: 1.2s;
  }
}