:root {
  --bg-0: #050816;
  --bg-1: #091127;
  --ink: rgba(255, 255, 255, 0.92);
  --mx: 50%;
  --my: 50%;
  --dx: 0px;
  --dy: 0px;
  --energy: 0.25;
  --halo-size: 32rem;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at top, #132249 0%, transparent 45%),
    linear-gradient(160deg, var(--bg-0), var(--bg-1) 55%, #04060f 100%);
  color: var(--ink);
  font-family: "Manrope", sans-serif;
}

body {
  position: relative;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  isolation: isolate;
}

.gradient-field,
.spark-canvas,
.cursor-bloom {
  position: absolute;
  inset: 0;
}

.spark-canvas {
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.gradient-field {
  overflow: hidden;
  background:
    radial-gradient(
      circle at var(--mx) var(--my),
      rgba(255, 255, 255, calc(0.07 + var(--energy) * 0.08)),
      transparent 18%
    ),
    radial-gradient(circle at 20% 20%, rgba(94, 219, 255, 0.16), transparent 28%),
    radial-gradient(circle at 80% 25%, rgba(255, 97, 180, 0.14), transparent 24%),
    radial-gradient(circle at 50% 80%, rgba(255, 209, 102, 0.08), transparent 34%);
}

.gradient {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(38px) saturate(130%);
  opacity: 0.8;
  mix-blend-mode: screen;
  animation: float 18s ease-in-out infinite;
  transform:
    translate3d(calc(var(--dx) * 0.03), calc(var(--dy) * 0.03), 0)
    scale(calc(1 + var(--energy) * 0.06));
}

.gradient-a {
  top: -18vmax;
  left: -10vmax;
  background:
    radial-gradient(circle at 35% 35%, rgba(84, 255, 227, 0.95), transparent 34%),
    radial-gradient(circle at 68% 42%, rgba(26, 121, 255, 0.82), transparent 52%),
    radial-gradient(circle at 50% 60%, rgba(125, 75, 255, 0.55), transparent 60%);
}

.gradient-b {
  right: -16vmax;
  top: -10vmax;
  animation-duration: 24s;
  animation-direction: reverse;
  background:
    radial-gradient(circle at 42% 38%, rgba(255, 109, 140, 0.95), transparent 34%),
    radial-gradient(circle at 66% 52%, rgba(255, 187, 86, 0.86), transparent 50%),
    radial-gradient(circle at 40% 65%, rgba(255, 255, 255, 0.28), transparent 58%);
}

.gradient-c {
  left: 15vmax;
  bottom: -26vmax;
  width: 72vmax;
  height: 72vmax;
  animation-duration: 22s;
  background:
    radial-gradient(circle at 40% 35%, rgba(73, 242, 255, 0.72), transparent 36%),
    radial-gradient(circle at 60% 52%, rgba(40, 95, 255, 0.62), transparent 52%),
    radial-gradient(circle at 48% 60%, rgba(194, 82, 255, 0.4), transparent 64%);
}

.gradient-d {
  right: -12vmax;
  bottom: -30vmax;
  width: 68vmax;
  height: 68vmax;
  animation-duration: 26s;
  animation-delay: -8s;
  background:
    radial-gradient(circle at 34% 35%, rgba(255, 124, 218, 0.74), transparent 32%),
    radial-gradient(circle at 58% 50%, rgba(255, 232, 108, 0.52), transparent 48%),
    radial-gradient(circle at 46% 62%, rgba(255, 119, 119, 0.42), transparent 60%);
}

.light {
  position: absolute;
  inset: -20%;
  mix-blend-mode: screen;
  opacity: 0.85;
  filter: blur(48px);
}

.light-a {
  background:
    conic-gradient(
      from 180deg at var(--mx) var(--my),
      rgba(255, 255, 255, 0.02),
      rgba(80, 241, 255, calc(0.18 + var(--energy) * 0.18)),
      rgba(255, 104, 155, calc(0.14 + var(--energy) * 0.12)),
      rgba(255, 206, 112, calc(0.08 + var(--energy) * 0.12)),
      rgba(255, 255, 255, 0.02)
    );
  animation: rotate 30s linear infinite;
}

.light-b {
  background:
    radial-gradient(
      circle at calc(var(--mx) + var(--dx) * 0.08) calc(var(--my) + var(--dy) * 0.08),
      rgba(255, 255, 255, calc(0.12 + var(--energy) * 0.22)),
      rgba(120, 194, 255, calc(0.08 + var(--energy) * 0.18)) 10%,
      transparent 28%
    );
}

.mesh,
.noise,
.vignette {
  position: absolute;
  inset: 0;
}

.mesh {
  opacity: 0.65;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: radial-gradient(circle at center, black 35%, transparent 80%);
}

.noise {
  opacity: 0.085;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.7) 0.06rem, transparent 0.07rem),
    radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.5) 0.05rem, transparent 0.07rem),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.45) 0.04rem, transparent 0.06rem);
  background-size: 1.5rem 1.5rem, 1.2rem 1.2rem, 1rem 1rem;
  mix-blend-mode: screen;
}

.vignette {
  background:
    radial-gradient(circle at center, transparent 45%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 25%, rgba(0, 0, 0, 0.18));
}

.cursor-bloom {
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(
      circle var(--halo-size) at var(--mx) var(--my),
      rgba(255, 255, 255, calc(0.08 + var(--energy) * 0.08)),
      rgba(137, 209, 255, calc(0.08 + var(--energy) * 0.12)) 12%,
      rgba(255, 92, 163, calc(0.07 + var(--energy) * 0.1)) 22%,
      rgba(255, 204, 112, calc(0.05 + var(--energy) * 0.08)) 30%,
      transparent 55%
    );
  mix-blend-mode: screen;
  filter: blur(14px) saturate(135%);
}

@keyframes float {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 1.5rem -2rem;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg) scale(1.05);
  }

  to {
    transform: rotate(360deg) scale(1.05);
  }
}

@media (max-width: 900px) {
  :root {
    --halo-size: 24rem;
  }

  .mesh {
    background-size: 3rem 3rem;
  }

  .gradient {
    filter: blur(30px) saturate(125%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gradient,
  .light-a {
    animation: none;
  }
}