:root {
  --bg-mouse-x: 0;
  --bg-mouse-y: 0;
  --bg-idle-x: 0;
  --bg-idle-y: 0;
  --bg-scale: 1.02;
  --bg-glow-x: 0;
  --bg-glow-y: 0;
  --bg-spark-x: 0;
  --bg-spark-y: 0;
}

.page {
  isolation: isolate;
}

.page-home {
  background: #030714;
}

.page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 6, 18, 0.82) 0%, rgba(3, 6, 18, 0.58) 24%, rgba(3, 6, 18, 0.22) 52%, rgba(3, 6, 18, 0.38) 100%),
    linear-gradient(180deg, rgba(5, 10, 24, 0.08) 0%, rgba(5, 10, 24, 0.28) 100%);
}

.page-home .page::before {
  background:
    linear-gradient(90deg, rgba(1, 5, 15, 0.88) 0%, rgba(2, 7, 19, 0.72) 28%, rgba(3, 8, 20, 0.38) 56%, rgba(2, 6, 16, 0.56) 100%),
    linear-gradient(180deg, rgba(4, 9, 21, 0.18) 0%, rgba(3, 7, 18, 0.42) 100%);
}

.page::after {
  content: "";
  position: fixed;
  inset: -8%;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at left center, rgba(126, 233, 255, 0.08), transparent 24%),
    radial-gradient(circle at right center, rgba(154, 102, 255, 0.12), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(74, 35, 155, 0.16), transparent 28%);
  filter: blur(44px);
  transform: translate3d(calc(var(--bg-glow-x) * 1px), calc(var(--bg-glow-y) * 1px), 0);
  will-change: transform;
}

.page-home .page::after {
  background:
    radial-gradient(circle at 16% 44%, rgba(61, 218, 255, 0.13), transparent 25%),
    radial-gradient(circle at 82% 24%, rgba(149, 92, 255, 0.12), transparent 24%),
    radial-gradient(circle at 60% 92%, rgba(36, 147, 255, 0.12), transparent 30%);
  filter: blur(48px);
}

.background,
.bg-shadow,
.neon-orbs,
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  transition: none;
  will-change: transform, opacity;
}

.background {
  z-index: -6;
  transform:
    translate3d(
      calc((var(--bg-mouse-x) + var(--bg-idle-x)) * 1px),
      calc((var(--bg-mouse-y) + var(--bg-idle-y)) * 1px),
      0
    )
    scale(var(--bg-scale));
}

.page-home .background {
  background:
    linear-gradient(90deg, rgba(1, 5, 15, 0.34) 0%, rgba(3, 8, 19, 0.18) 38%, rgba(2, 5, 14, 0.22) 100%),
    url("assets/5984a0ca-30f0-42c7-b755-28fd3574a493.png") center center / cover no-repeat,
    radial-gradient(circle at 74% 34%, rgba(36, 198, 255, 0.2), transparent 20%),
    radial-gradient(circle at 42% 18%, rgba(220, 196, 255, 0.12), transparent 16%),
    linear-gradient(180deg, #05081a 0%, #07091d 100%);
  filter: saturate(1.12) contrast(1.06) brightness(0.94);
}

.bg-shadow {
  z-index: -5;
  transform:
    translate3d(
      calc((var(--bg-mouse-x) * 1.25 + var(--bg-idle-x) * 1.15) * 1px),
      calc((var(--bg-mouse-y) * 1.15 + var(--bg-idle-y) * 1.1) * 1px),
      0
    )
    scale(calc(var(--bg-scale) + 0.01));
  opacity: 0.92;
}

.page-home .bg-shadow {
  background:
    linear-gradient(180deg, rgba(2, 5, 15, 0.05) 0%, rgba(2, 5, 15, 0.26) 72%, rgba(2, 5, 15, 0.5) 100%),
    radial-gradient(circle at 18% 38%, rgba(50, 211, 255, 0.18), transparent 24%),
    radial-gradient(circle at 78% 26%, rgba(137, 82, 255, 0.22), transparent 22%),
    radial-gradient(circle at 64% 64%, rgba(77, 198, 255, 0.12), transparent 20%);
  opacity: 0.82;
}

.neon-orbs {
  z-index: -4;
  transform:
    translate3d(
      calc((var(--bg-mouse-x) * 1.55 + var(--bg-idle-x) * 1.35) * 1px),
      calc((var(--bg-mouse-y) * 1.3 + var(--bg-idle-y) * 1.2) * 1px),
      0
    )
    scale(calc(var(--bg-scale) + 0.015));
  opacity: 0.82;
}

.page-home .neon-orbs {
  opacity: 0.68;
}

.page-home .neon-orbs::before {
  background: radial-gradient(circle, rgba(61, 218, 255, 0.24), transparent 64%);
}

.page-home .neon-orbs::after {
  background: radial-gradient(circle, rgba(138, 95, 255, 0.18), transparent 66%);
}

.stars {
  z-index: -3;
  transform:
    translate3d(
      calc((var(--bg-mouse-x) * 0.7 + var(--bg-spark-x)) * 1px),
      calc((var(--bg-mouse-y) * 0.6 + var(--bg-spark-y)) * 1px),
      0
    )
    scale(calc(var(--bg-scale) + 0.005));
  opacity: 0.36;
  animation: sparkle-breathe 16s ease-in-out infinite;
}

.page-home .stars {
  opacity: 0.28;
}

.stars::before,
.stars::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  opacity: 0.14;
  will-change: transform, opacity;
}

.stars::before {
  background-image:
    radial-gradient(circle, rgba(137, 244, 255, 0.8) 1px, transparent 1.2px),
    radial-gradient(circle, rgba(222, 196, 255, 0.78) 1px, transparent 1.25px);
  background-size: 240px 240px, 320px 320px;
  background-position: 30px 50px, 110px 80px;
  animation: particle-drift-a 28s linear infinite;
}

.stars::after {
  background-image:
    radial-gradient(circle, rgba(171, 123, 255, 0.72) 1px, transparent 1.2px),
    radial-gradient(circle, rgba(126, 233, 255, 0.66) 1px, transparent 1.3px);
  background-size: 300px 300px, 380px 380px;
  background-position: 160px 40px, 40px 160px;
  animation: particle-drift-b 34s linear infinite;
}

@keyframes sparkle-breathe {
  0%, 100% {
    opacity: 0.28;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes particle-drift-a {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(10px, -14px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes particle-drift-b {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-12px, 10px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 720px) {
  .page::before {
    background:
      linear-gradient(180deg, rgba(3, 6, 18, 0.76) 0%, rgba(3, 6, 18, 0.38) 42%, rgba(3, 6, 18, 0.56) 100%);
  }

  .page-home .page::before {
    background:
      linear-gradient(180deg, rgba(2, 5, 15, 0.82) 0%, rgba(2, 7, 18, 0.52) 42%, rgba(2, 5, 15, 0.68) 100%);
  }

  .stars::before,
  .stars::after {
    opacity: 0.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page::after,
  .background,
  .bg-shadow,
  .neon-orbs,
  .stars,
  .stars::before,
  .stars::after {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  .background {
    transform: scale(1.02) !important;
  }
}