/* Global site background — animated aurora with cursor-reactive parallax */

:root {
  --cursor-x: 50vw;
  --cursor-y: 40vh;
  --cursor-active: 0;
  --cursor-rx: 0px;
  --cursor-ry: 0px;
}

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

.site-bg__base,
.site-bg__grid,
.site-bg__stars,
.site-bg__aurora,
.site-bg__beam,
.site-bg__particles,
.site-bg__halo {
  position: absolute;
  inset: 0;
}

.site-bg__base {
  background:
    radial-gradient(circle at 50% -10%, rgba(61, 207, 191, 0.06) 0%, transparent 32%),
    radial-gradient(circle at 80% 15%, rgba(11, 61, 122, 0.2) 0%, transparent 35%),
    linear-gradient(180deg, #030509 0%, #060a10 42%, #030509 100%);
}

/* ----- Starfield ----- */
.site-bg__stars {
  background-repeat: repeat;
  transform:
    translate(
      calc(var(--cursor-rx) * -0.008),
      calc(var(--cursor-ry) * -0.008)
    );
}

.site-bg__stars--sm {
  background-image:
    radial-gradient(circle at 12% 8%, #fff 0 0.6px, transparent 0.6px),
    radial-gradient(circle at 37% 22%, #fff 0 0.5px, transparent 0.5px),
    radial-gradient(circle at 58% 5%, #c8dce8 0 0.5px, transparent 0.5px),
    radial-gradient(circle at 81% 31%, #fff 0 0.6px, transparent 0.6px),
    radial-gradient(circle at 93% 12%, #c8dce8 0 0.5px, transparent 0.5px),
    radial-gradient(circle at 6% 42%, #fff 0 0.5px, transparent 0.5px),
    radial-gradient(circle at 48% 38%, #c8dce8 0 0.5px, transparent 0.5px),
    radial-gradient(circle at 72% 46%, #fff 0 0.6px, transparent 0.6px),
    radial-gradient(circle at 26% 55%, #fff 0 0.5px, transparent 0.5px),
    radial-gradient(circle at 88% 58%, #c8dce8 0 0.5px, transparent 0.5px),
    radial-gradient(circle at 15% 72%, #fff 0 0.5px, transparent 0.5px),
    radial-gradient(circle at 42% 68%, #c8dce8 0 0.6px, transparent 0.6px),
    radial-gradient(circle at 65% 78%, #fff 0 0.5px, transparent 0.5px),
    radial-gradient(circle at 95% 75%, #fff 0 0.5px, transparent 0.5px),
    radial-gradient(circle at 30% 88%, #c8dce8 0 0.5px, transparent 0.5px),
    radial-gradient(circle at 78% 92%, #fff 0 0.6px, transparent 0.6px),
    radial-gradient(circle at 55% 95%, #fff 0 0.5px, transparent 0.5px),
    radial-gradient(circle at 8% 96%, #c8dce8 0 0.5px, transparent 0.5px);
  opacity: 0.55;
  animation: wlStarTwinkle 6s ease-in-out infinite alternate;
}

.site-bg__stars--md {
  background-image:
    radial-gradient(circle at 22% 14%, #fff 0 0.9px, transparent 0.9px),
    radial-gradient(circle at 68% 10%, rgba(61, 207, 191, 0.9) 0 0.8px, transparent 0.8px),
    radial-gradient(circle at 44% 28%, #fff 0 0.8px, transparent 0.8px),
    radial-gradient(circle at 85% 42%, #c8dce8 0 0.9px, transparent 0.9px),
    radial-gradient(circle at 16% 50%, rgba(61, 207, 191, 0.8) 0 0.8px, transparent 0.8px),
    radial-gradient(circle at 52% 56%, #fff 0 0.9px, transparent 0.9px),
    radial-gradient(circle at 76% 65%, #c8dce8 0 0.8px, transparent 0.8px),
    radial-gradient(circle at 34% 74%, #fff 0 0.9px, transparent 0.9px),
    radial-gradient(circle at 62% 86%, rgba(61, 207, 191, 0.85) 0 0.8px, transparent 0.8px),
    radial-gradient(circle at 90% 82%, #fff 0 0.9px, transparent 0.9px),
    radial-gradient(circle at 10% 90%, #c8dce8 0 0.8px, transparent 0.8px);
  opacity: 0.62;
  animation: wlStarTwinkle 8s ease-in-out 2s infinite alternate;
  transform:
    translate(
      calc(var(--cursor-rx) * -0.012),
      calc(var(--cursor-ry) * -0.012)
    );
}

.site-bg__stars--lg {
  background-image:
    radial-gradient(circle at 28% 18%, #fff 0 1.3px, transparent 1.4px),
    radial-gradient(circle at 74% 26%, rgba(61, 207, 191, 0.95) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 50% 48%, #fff 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 18% 62%, rgba(61, 207, 191, 0.9) 0 1.3px, transparent 1.4px),
    radial-gradient(circle at 82% 70%, #fff 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 40% 84%, #fff 0 1.3px, transparent 1.4px),
    radial-gradient(circle at 64% 35%, #c8dce8 0 1.1px, transparent 1.2px);
  opacity: 0.72;
  animation: wlStarTwinkle 10s ease-in-out 4s infinite alternate;
  transform:
    translate(
      calc(var(--cursor-rx) * -0.018),
      calc(var(--cursor-ry) * -0.018)
    );
}

.site-bg__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.38;
  transform: translate(
      calc(var(--cursor-rx) * -0.02),
      calc(var(--cursor-ry) * -0.02)
    );
}

.site-bg__aurora {
  filter: blur(72px);
  mix-blend-mode: screen;
  opacity: 0.6;
}

.site-bg__aurora--one {
  inset: auto auto 10% -12%;
  width: 46rem;
  height: 26rem;
  border-radius: 45% 55% 60% 40%;
  background:
    linear-gradient(115deg, rgba(11, 61, 122, 0.05) 0%, rgba(11, 61, 122, 0.45) 35%, rgba(61, 207, 191, 0.32) 100%);
  transform:
    translate(
      calc(var(--cursor-rx) * -0.04),
      calc(var(--cursor-ry) * -0.03)
    )
    rotate(-14deg);
  animation: wlAuroraFloatOne 18s ease-in-out infinite alternate;
}

.site-bg__aurora--two {
  inset: -8% -10% auto auto;
  width: 42rem;
  height: 24rem;
  border-radius: 60% 40% 48% 52%;
  background:
    linear-gradient(140deg, rgba(61, 207, 191, 0.18) 0%, rgba(26, 122, 140, 0.34) 45%, rgba(11, 61, 122, 0.08) 100%);
  transform:
    translate(
      calc(var(--cursor-rx) * 0.035),
      calc(var(--cursor-ry) * -0.025)
    )
    rotate(20deg);
  animation: wlAuroraFloatTwo 22s ease-in-out infinite alternate;
}

.site-bg__aurora--three {
  inset: 28% auto auto 18%;
  width: 28rem;
  height: 18rem;
  border-radius: 52% 48% 44% 56%;
  background:
    linear-gradient(120deg, rgba(61, 207, 191, 0.08) 0%, rgba(61, 207, 191, 0.2) 40%, rgba(11, 61, 122, 0.28) 100%);
  transform:
    translate(
      calc(var(--cursor-rx) * -0.02),
      calc(var(--cursor-ry) * 0.03)
    )
    rotate(-8deg);
  animation: wlAuroraFloatThree 16s ease-in-out infinite alternate;
}

.site-bg__particles {
  background-image:
    radial-gradient(circle at 18% 24%, rgba(61, 207, 191, 0.6) 0 1px, transparent 1.2px),
    radial-gradient(circle at 76% 18%, rgba(61, 207, 191, 0.5) 0 1px, transparent 1.2px),
    radial-gradient(circle at 64% 68%, rgba(61, 207, 191, 0.34) 0 1px, transparent 1.2px),
    radial-gradient(circle at 32% 74%, rgba(61, 207, 191, 0.42) 0 1px, transparent 1.2px),
    radial-gradient(circle at 84% 52%, rgba(61, 207, 191, 0.3) 0 1px, transparent 1.2px),
    radial-gradient(circle at 52% 40%, rgba(61, 207, 191, 0.22) 0 1px, transparent 1.2px);
  opacity: calc(0.18 + var(--cursor-active) * 0.16);
  transform:
    translate(
      calc(var(--cursor-rx) * 0.015),
      calc(var(--cursor-ry) * 0.015)
    );
  animation: wlParticleDrift 26s linear infinite;
}

.site-bg__halo {
  inset: auto auto auto auto;
  width: 28rem;
  height: 28rem;
  left: var(--cursor-x);
  top: var(--cursor-y);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(61, 207, 191, 0.16) 0%, rgba(61, 207, 191, 0.04) 28%, transparent 68%);
  filter: blur(8px);
  opacity: calc(0.08 + var(--cursor-active) * 0.14);
  transition: opacity var(--wl-duration) var(--wl-ease);
}

.site-bg__trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
}

body.has-cursor-bg {
  background: transparent;
}

@keyframes wlAuroraFloatOne {
  from { margin-left: 0; margin-top: 0; }
  to { margin-left: 3rem; margin-top: -2rem; }
}

@keyframes wlAuroraFloatTwo {
  from { margin-right: 0; margin-top: 0; }
  to { margin-right: 2rem; margin-top: 3rem; }
}

@keyframes wlAuroraFloatThree {
  from { margin-left: 0; margin-top: 0; }
  to { margin-left: -2rem; margin-top: 2rem; }
}

@keyframes wlStarTwinkle {
  0% { opacity: var(--_base-o, 0.55); }
  40% { opacity: calc(var(--_base-o, 0.55) + 0.18); }
  70% { opacity: calc(var(--_base-o, 0.55) - 0.08); }
  100% { opacity: var(--_base-o, 0.55); }
}

.site-bg__stars--sm { --_base-o: 0.55; }
.site-bg__stars--md { --_base-o: 0.62; }
.site-bg__stars--lg { --_base-o: 0.72; }

@keyframes wlParticleDrift {
  from { transform: translate(calc(var(--cursor-rx) * 0.015), calc(var(--cursor-ry) * 0.015)); }
  50% { transform: translate(calc(var(--cursor-rx) * 0.02 + 0.5rem), calc(var(--cursor-ry) * 0.018 - 0.5rem)); }
  to { transform: translate(calc(var(--cursor-rx) * 0.015), calc(var(--cursor-ry) * 0.015)); }
}

@media (prefers-reduced-motion: reduce) {
  .site-bg__aurora,
  .site-bg__stars,
  .site-bg__particles {
    animation: none !important;
  }

  .site-bg__grid,
  .site-bg__stars,
  .site-bg__aurora,
  .site-bg__particles,
  .site-bg__halo {
    transform: none !important;
  }

  .site-bg__grid {
    opacity: 0.28;
  }

  .site-bg__halo {
    left: 50%;
    top: 40%;
    opacity: 0.18;
  }
}

@media (pointer: coarse), (max-width: 768px) {
  .site-bg__grid,
  .site-bg__stars,
  .site-bg__aurora,
  .site-bg__particles,
  .site-bg__halo,
  .site-bg__trail {
    transform: none !important;
  }

  .site-bg__trail {
    display: none;
  }

  .site-bg__stars--md,
  .site-bg__stars--lg,
  .site-bg__particles,
  .site-bg__halo {
    display: none;
  }

  .site-bg__stars--sm {
    opacity: 0.35;
    animation: none !important;
  }

  .site-bg__grid {
    opacity: 0.18;
    background-size: 96px 96px;
  }

  .site-bg__aurora {
    animation: none !important;
    filter: blur(48px);
    opacity: 0.35;
    mix-blend-mode: normal;
  }

  .site-bg__aurora--one {
    width: 24rem;
    height: 14rem;
    inset: auto auto 8% -20%;
  }

  .site-bg__aurora--two {
    width: 20rem;
    height: 12rem;
    inset: -4% -18% auto auto;
  }

  .site-bg__aurora--three {
    display: none;
  }
}