/* ============================================
   GLOBAL PARTICLES — full-page subtle network
   ============================================ */
.global-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* ============================================
   AMBIENT BACKGROUND
   Slow-moving aurora/nebula glow effect
   inspired by mokka.solutions
   ============================================ */

.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #010610;
}

.ambient-bg__orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

/* ---- MAIN GLOW ---- */
.ambient-bg__orb--1 {
  width: 1400px;
  height: 1400px;
  top: -40%;
  left: 0%;
  background: radial-gradient(
    circle,
    rgba(20, 80, 170, 0.75) 0%,
    rgba(14, 60, 140, 0.45) 15%,
    rgba(8, 40, 100, 0.2) 30%,
    rgba(4, 20, 60, 0.06) 45%,
    transparent 60%
  );
  animation: orb-drift-1 12s ease-in-out infinite alternate;
}

/* ---- RIGHT ORB ---- */
.ambient-bg__orb--2 {
  width: 1200px;
  height: 1200px;
  top: -10%;
  right: -25%;
  background: radial-gradient(
    circle,
    rgba(16, 70, 155, 0.6) 0%,
    rgba(10, 50, 120, 0.3) 15%,
    rgba(6, 30, 80, 0.12) 30%,
    transparent 50%
  );
  animation: orb-drift-2 15s ease-in-out infinite alternate;
}

/* ---- LOWER ORB ---- */
.ambient-bg__orb--3 {
  width: 1100px;
  height: 1100px;
  bottom: -20%;
  left: 15%;
  background: radial-gradient(
    circle,
    rgba(14, 65, 140, 0.55) 0%,
    rgba(8, 45, 100, 0.25) 18%,
    rgba(4, 20, 60, 0.06) 35%,
    transparent 55%
  );
  animation: orb-drift-3 18s ease-in-out infinite alternate;
}

/* ---- MID ORB ---- */
.ambient-bg__orb--4 {
  width: 900px;
  height: 900px;
  top: 25%;
  left: 40%;
  background: radial-gradient(
    circle,
    rgba(18, 75, 160, 0.4) 0%,
    rgba(10, 50, 110, 0.15) 20%,
    transparent 45%
  );
  animation: orb-drift-4 10s ease-in-out infinite alternate;
}

/* ---- ACCENT ---- */
.ambient-bg__orb--accent {
  width: 750px;
  height: 750px;
  top: 0%;
  left: 20%;
  background: radial-gradient(
    circle,
    rgba(30, 140, 230, 0.4) 0%,
    rgba(20, 110, 200, 0.15) 18%,
    rgba(14, 80, 170, 0.04) 35%,
    transparent 50%
  );
  animation: orb-drift-accent 11s ease-in-out infinite alternate;
}

@keyframes orb-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(60px, 40px) scale(1.04); }
  66%  { transform: translate(-40px, 80px) scale(0.97); }
  100% { transform: translate(100px, -30px) scale(1.02); }
}

@keyframes orb-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-70px, 50px) scale(0.96); }
  66%  { transform: translate(40px, -60px) scale(1.03); }
  100% { transform: translate(-50px, 100px) scale(0.98); }
}

@keyframes orb-drift-3 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(50px, -70px) scale(1.03); }
  66%  { transform: translate(-60px, 30px) scale(0.96); }
  100% { transform: translate(80px, 60px) scale(1.01); }
}

@keyframes orb-drift-4 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-100px, -50px) scale(1.06); }
  100% { transform: translate(60px, 80px) scale(0.94); }
}

@keyframes orb-drift-accent {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50%  { transform: translate(80px, 40px) scale(1.12); opacity: 1; }
  100% { transform: translate(-50px, -60px) scale(0.92); opacity: 0.5; }
}

.ambient-bg__noise {
  position: absolute;
  inset: 0;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

.ambient-bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 35% 30%, transparent 20%, rgba(1, 6, 16, 0.55) 100%);
}