/* ============================================
   FenceX Premium Background System
   Stars + Aurora + Cursor Glow
   ============================================ */

:root {
  /* Aurora colors - slightly softer alpha for smoother blending */
  --fx-bg-blue: rgba(59, 130, 246, 0.14);
  --fx-bg-purple: rgba(76, 40, 155, 0.12);
  --fx-bg-purple-deep: rgba(62, 30, 130, 0.08);
}

/* Keep content above background */
body {
  position: relative;
  z-index: 0;
}

#nav-root,
main,
footer,
header {
  position: relative;
  z-index: 1;
}

/* Hide legacy aurora layer to avoid double background */
.fx-aurora {
  display: none !important;
}

.fx-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  --fx-scroll-y: 0px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.fx-bg-aurora,
.fx-bg-stars,
.fx-bg-ambient-1,
.fx-bg-ambient-2,
.fx-bg-ambient-3,
.fx-bg-ambient-4,
.fx-bg-ambient-5 {
  position: absolute;
  inset: -10%;
}

.fx-bg-glow {
  position: absolute;
  top: 0;
  left: 0;
}

/* Starfield / dust — color-tinted, atmospheric
   Palette: white (dominant), cool blue, soft cyan, faint lavender */
.fx-bg-stars {
  transform: translate3d(0, calc(var(--fx-scroll-y) * 0.06), 0);
  opacity: 0.58;
  filter: blur(0.06px);
  background-image:
    /* — white (dominant) — */
    radial-gradient(1.5px 1.5px at 8% 14%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(1.2px 1.2px at 18% 26%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(1.4px 1.4px at 42% 20%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(1.2px 1.2px at 72% 22%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(1.3px 1.3px at 92% 16%, rgba(255, 255, 255, 0.48), transparent 70%),
    radial-gradient(1.2px 1.2px at 36% 46%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(1.5px 1.5px at 64% 44%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(1.2px 1.2px at 88% 54%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(1.4px 1.4px at 20% 76%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(1.2px 1.2px at 72% 80%, rgba(255, 255, 255, 0.48), transparent 70%),
    radial-gradient(1.3px 1.3px at 44% 94%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(1.2px 1.2px at 86% 94%, rgba(255, 255, 255, 0.45), transparent 70%),
    /* — cool blue — */
    radial-gradient(1.6px 1.6px at 28% 12%, rgba(147, 197, 253, 0.4), transparent 70%),
    radial-gradient(1.4px 1.4px at 58% 16%, rgba(59, 130, 246, 0.35), transparent 70%),
    radial-gradient(1.5px 1.5px at 12% 44%, rgba(147, 197, 253, 0.35), transparent 70%),
    radial-gradient(1.3px 1.3px at 76% 48%, rgba(59, 130, 246, 0.3), transparent 70%),
    radial-gradient(1.5px 1.5px at 8% 70%, rgba(147, 197, 253, 0.38), transparent 70%),
    radial-gradient(1.4px 1.4px at 60% 74%, rgba(59, 130, 246, 0.32), transparent 70%),
    radial-gradient(1.3px 1.3px at 30% 90%, rgba(147, 197, 253, 0.3), transparent 70%),
    /* — soft cyan — */
    radial-gradient(1.5px 1.5px at 50% 50%, rgba(56, 189, 248, 0.3), transparent 70%),
    radial-gradient(1.3px 1.3px at 84% 74%, rgba(56, 189, 248, 0.25), transparent 70%),
    radial-gradient(1.4px 1.4px at 16% 92%, rgba(56, 189, 248, 0.28), transparent 70%),
    /* — faint lavender — */
    radial-gradient(1.4px 1.4px at 86% 28%, rgba(99, 102, 241, 0.28), transparent 70%),
    radial-gradient(1.3px 1.3px at 24% 52%, rgba(167, 139, 250, 0.22), transparent 70%),
    radial-gradient(1.5px 1.5px at 46% 78%, rgba(99, 102, 241, 0.25), transparent 70%),
    radial-gradient(1.3px 1.3px at 92% 82%, rgba(167, 139, 250, 0.2), transparent 70%),
    radial-gradient(1.4px 1.4px at 32% 72%, rgba(99, 102, 241, 0.22), transparent 70%),
    radial-gradient(1.2px 1.2px at 58% 92%, rgba(167, 139, 250, 0.2), transparent 70%),
    radial-gradient(1.4px 1.4px at 72% 90%, rgba(99, 102, 241, 0.22), transparent 70%);
  animation: fx-stars-drift 38s linear infinite;
}

/* Second star layer — slightly larger dots, same color balance */
.fx-bg-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.85;
  background-image:
    /* — white — */
    radial-gradient(2px 2px at 6% 10%, rgba(255, 255, 255, 0.65), transparent 70%),
    radial-gradient(1.8px 1.8px at 52% 20%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(1.8px 1.8px at 84% 22%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(2px 2px at 28% 52%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(1.8px 1.8px at 60% 54%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(2px 2px at 16% 74%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(1.8px 1.8px at 64% 82%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(2px 2px at 92% 86%, rgba(255, 255, 255, 0.5), transparent 70%),
    /* — cool blue — */
    radial-gradient(2px 2px at 22% 18%, rgba(147, 197, 253, 0.45), transparent 70%),
    radial-gradient(1.9px 1.9px at 70% 14%, rgba(59, 130, 246, 0.38), transparent 70%),
    radial-gradient(2px 2px at 12% 44%, rgba(147, 197, 253, 0.4), transparent 70%),
    radial-gradient(1.8px 1.8px at 80% 76%, rgba(59, 130, 246, 0.35), transparent 70%),
    /* — soft cyan — */
    radial-gradient(2px 2px at 38% 12%, rgba(56, 189, 248, 0.32), transparent 70%),
    radial-gradient(1.9px 1.9px at 76% 48%, rgba(56, 189, 248, 0.28), transparent 70%),
    radial-gradient(2px 2px at 48% 74%, rgba(56, 189, 248, 0.3), transparent 70%),
    /* — faint lavender — */
    radial-gradient(1.9px 1.9px at 44% 46%, rgba(99, 102, 241, 0.3), transparent 70%),
    radial-gradient(2px 2px at 90% 56%, rgba(167, 139, 250, 0.25), transparent 70%),
    radial-gradient(1.8px 1.8px at 32% 80%, rgba(99, 102, 241, 0.25), transparent 70%);
  filter: blur(0.08px);
}

:root[data-theme='light'] .fx-bg-stars {
  opacity: 0.8;
  filter: invert(1) blur(0.05px);
  mix-blend-mode: multiply;
}

:root[data-theme='light'] .fx-bg-stars::after {
  opacity: 0.9;
  filter: invert(1) blur(0.05px);
  mix-blend-mode: multiply;
}

/* Aurora haze - flowier, more atmospheric */
.fx-bg-aurora {
  transform: translate3d(0, calc(var(--fx-scroll-y) * 0.04), 0);
  background:
    radial-gradient(ellipse 80% 70% at 15% -5%, var(--fx-bg-blue), transparent 70%),
    radial-gradient(ellipse 70% 65% at 85% 5%, var(--fx-bg-purple), transparent 70%),
    radial-gradient(ellipse 65% 80% at 50% 95%, var(--fx-bg-purple-deep), transparent 65%);
  filter: blur(120px);
  opacity: 0.5;
  mix-blend-mode: soft-light;
  animation: fx-aurora-drift 38s ease-in-out infinite alternate;
}

/* Cursor glow - softer, more integrated */
.fx-bg-glow {
  width: 580px;
  height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(59, 130, 246, 0.12) 0%,
    rgba(76, 40, 155, 0.06) 40%,
    transparent 75%);
  filter: blur(25px);
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.5s ease;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.fx-bg-glow.is-active {
  opacity: 0.7;
}

/* Ambient color fades (non-pointer) */
.fx-bg-ambient-1,
.fx-bg-ambient-2,
.fx-bg-ambient-3,
.fx-bg-ambient-4,
.fx-bg-ambient-5 {
  filter: blur(110px);
  opacity: 0.55;
  mix-blend-mode: soft-light;
  animation: fx-ambient-drift 52s ease-in-out infinite alternate;
  pointer-events: none;
}

.fx-bg-ambient-1 {
  background: radial-gradient(ellipse 45% 38% at 12% 22%, rgba(59, 130, 246, 0.26), transparent 70%);
  animation-duration: 56s;
}

.fx-bg-ambient-2 {
  background: radial-gradient(ellipse 48% 55% at 86% 18%, rgba(76, 40, 155, 0.24), transparent 70%);
  animation-duration: 62s;
}

.fx-bg-ambient-3 {
  background: radial-gradient(ellipse 52% 45% at 70% 80%, rgba(56, 189, 248, 0.2), transparent 72%);
  animation-duration: 68s;
}

.fx-bg-ambient-4 {
  background: radial-gradient(ellipse 40% 35% at 30% 70%, rgba(59, 130, 246, 0.22), transparent 70%);
  animation-duration: 60s;
}

.fx-bg-ambient-5 {
  background: radial-gradient(ellipse 42% 48% at 45% 12%, rgba(99, 60, 180, 0.2), transparent 72%);
  animation-duration: 66s;
}

@keyframes fx-ambient-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(14px, 10px, 0) scale(1.02); }
  100% { transform: translate3d(-10px, 8px, 0) scale(1); }
}

@keyframes fx-stars-drift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-8px, 6px, 0); }
  100% { transform: translate3d(6px, -4px, 0); }
}

@keyframes fx-aurora-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(12px, 10px, 0) scale(1.01); }
  100% { transform: translate3d(-10px, 6px, 0) scale(1); }
}

/* ============================================
   Spinning Star Particles
   4-point stars that drift and rotate
   ============================================ */
.fx-bg-spinning-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, calc(var(--fx-scroll-y) * 0.1), 0);
}

.fx-spinning-star {
  position: absolute;
  width: var(--star-size, 12px);
  height: var(--star-size, 12px);
  opacity: var(--star-opacity, 0.35);
  animation:
    fx-star-spin var(--star-spin-dur, 8s) linear infinite,
    fx-star-drift var(--star-drift-dur, 20s) ease-in-out infinite alternate,
    fx-star-pulse var(--star-pulse-dur, 3.2s) ease-in-out infinite;
  will-change: transform;
}

.fx-spinning-star svg {
  width: 100%;
  height: 100%;
  fill: var(--star-color, rgba(180, 200, 255, 0.6));
  filter: drop-shadow(0 0 var(--star-glow, 2px) var(--star-color, rgba(180, 200, 255, 0.3)));
}

:root[data-theme='light'] .fx-spinning-star {
  --star-color: rgba(37, 99, 235, 0.85);
}

:root[data-theme='light'] .fx-spinning-star svg {
  opacity: 1;
  fill: rgba(37, 99, 235, 0.7);
  filter: drop-shadow(0 0 var(--star-glow, 3px) rgba(37, 99, 235, 0.5));
}

@keyframes fx-star-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fx-star-drift {
  0%   { translate: 0 0; }
  25%  { translate: var(--drift-x1, 30px) var(--drift-y1, -20px); }
  50%  { translate: var(--drift-x2, -15px) var(--drift-y2, 25px); }
  75%  { translate: var(--drift-x3, 20px) var(--drift-y3, -10px); }
  100% { translate: var(--drift-x4, -10px) var(--drift-y4, 15px); }
}

@keyframes fx-star-pulse {
  0%, 100% { scale: var(--star-pulse-min, 0.82); opacity: calc(var(--star-opacity, 0.35) * 0.8); }
  50% { scale: var(--star-pulse-max, 1.2); opacity: var(--star-opacity, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-bg-stars,
  .fx-bg-aurora,
  .fx-bg-ambient-1,
  .fx-bg-ambient-2,
  .fx-bg-ambient-3,
  .fx-bg-ambient-4,
  .fx-bg-ambient-5 {
    animation: none !important;
  }

  .fx-bg-glow {
    display: none;
  }

  .fx-spinning-star {
    animation: none !important;
  }

  .fx-bg-spinning-stars {
    display: none;
  }
}