/* ─────────────────────────────────────────
   AMBIENT BACKGROUND — orbs, moons, particles, stars, cursor
───────────────────────────────────────── */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ── Orbs ── */
.orb-glow { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.orb-1 {
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(0,229,153,0.09) 0%, rgba(0,229,153,0.02) 50%, transparent 70%);
  top: -300px; left: -200px;
  animation: orbDriftA 34s ease-in-out infinite;
}
.orb-2 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(79,158,255,0.08) 0%, rgba(79,158,255,0.02) 50%, transparent 70%);
  bottom: -260px; right: -200px;
  filter: blur(100px);
  animation: orbDriftB 44s ease-in-out infinite;
}
.orb-3 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(167,139,250,0.07) 0%, transparent 65%);
  top: 42%; left: 52%;
  transform: translate(-50%, -50%);
  filter: blur(110px);
  animation: orbDriftC 58s ease-in-out infinite;
}

@keyframes orbDriftA {
  0%   { transform: translate(0,0) scale(1); }
  20%  { transform: translate(160px,100px) scale(1.06); }
  45%  { transform: translate(60px,-50px) scale(0.94); }
  65%  { transform: translate(220px,70px) scale(1.08); }
  80%  { transform: translate(40px,140px) scale(1.02); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes orbDriftB {
  0%   { transform: translate(0,0) scale(1); }
  25%  { transform: translate(-120px,-80px) scale(1.07); }
  50%  { transform: translate(40px,-120px) scale(0.93); }
  75%  { transform: translate(-160px,50px) scale(1.04); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes orbDriftC {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.6; }
  30%     { transform: translate(-40%,-60%) scale(1.15); opacity: 0.9; }
  60%     { transform: translate(-62%,-40%) scale(0.85); opacity: 0.5; }
}

/* ── Radar pings — security scanner aesthetic ── */
.radar-ping {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  animation: radarExpand var(--rp-dur, 6s) ease-out var(--rp-delay, 0s) infinite;
}
@keyframes radarExpand {
  0%   { transform: scale(0.06); opacity: 0.7; }
  100% { transform: scale(1);    opacity: 0; }
}

/* Cluster A — top-right, accent green */
.rp-1 {
  width: 680px; height: 680px;
  top: -5%; right: -6%;
  margin: -340px -340px 0 0;
  border: 1px solid rgba(0,229,153,0.13);
  --rp-dur: 5.5s; --rp-delay: 0s;
}
.rp-2 {
  width: 440px; height: 440px;
  top: -5%; right: -6%;
  margin: -220px -220px 0 0;
  border: 1px solid rgba(0,229,153,0.10);
  --rp-dur: 5.5s; --rp-delay: 1.4s;
}
.rp-3 {
  width: 220px; height: 220px;
  top: -5%; right: -6%;
  margin: -110px -110px 0 0;
  border: 1px solid rgba(0,229,153,0.07);
  --rp-dur: 5.5s; --rp-delay: 2.7s;
}

/* Cluster B — bottom-left, blue */
.rp-4 {
  width: 580px; height: 580px;
  bottom: -4%; left: -4%;
  margin: 0 0 -290px -290px;
  border: 1px solid rgba(79,158,255,0.09);
  --rp-dur: 7s; --rp-delay: 0.6s;
}
.rp-5 {
  width: 350px; height: 350px;
  bottom: -4%; left: -4%;
  margin: 0 0 -175px -175px;
  border: 1px solid rgba(79,158,255,0.07);
  --rp-dur: 7s; --rp-delay: 2.1s;
}

/* Center — violet, very subtle */
.rp-6 {
  width: 960px; height: 960px;
  top: 50%; left: 50%;
  margin: -480px 0 0 -480px;
  border: 1px solid rgba(167,139,250,0.04);
  --rp-dur: 11s; --rp-delay: 3.5s;
}

/* ── Stars ── */
@keyframes starTwinkle {
  0%,100% { opacity: 0; transform: scale(0.3); }
  45%,55% { opacity: var(--so, 0.5); transform: scale(1); }
}
.star {
  position: absolute;
  border-radius: 50%;
  animation: starTwinkle var(--sd, 5s) ease-in-out var(--sde, 0s) infinite;
  will-change: opacity, transform;
  pointer-events: none;
}

/* ── Floating particles ── */
.float-particle {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: particleFloat 20s linear infinite;
  will-change: transform, opacity;
}
@keyframes particleFloat {
  0%   { opacity: 0; transform: translateY(0) translateX(0) scale(0); }
  8%   { opacity: 0.55; transform: translateY(-18px) translateX(4px) scale(1); }
  85%  { opacity: 0.35; }
  100% { opacity: 0; transform: translateY(-160px) translateX(-12px) scale(0.4); }
}
.fp-1  { left:  8%; bottom: 20%; animation-delay: -2s; }
.fp-2  { left: 18%; bottom: 35%; animation-delay: -7s;  animation-duration: 22s; }
.fp-3  { left: 28%; bottom: 15%; animation-delay: -13s; }
.fp-4  { left: 40%; bottom: 28%; animation-delay: -1s;  animation-duration: 18s; }
.fp-5  { left: 52%; bottom: 22%; animation-delay: -9s; }
.fp-6  { left: 62%; bottom: 40%; animation-delay: -4s;  animation-duration: 24s; }
.fp-7  { left: 74%; bottom: 18%; animation-delay: -16s; }
.fp-8  { left: 84%; bottom: 32%; animation-delay: -6s;  animation-duration: 19s; }
.fp-9  { left: 14%; bottom: 55%; animation-delay: -11s; }
.fp-10 { left: 46%; bottom: 60%; animation-delay: -3s;  animation-duration: 26s; background: var(--blue); }
.fp-11 { left: 70%; bottom: 48%; animation-delay: -14s; background: var(--blue); }
.fp-12 { left: 88%; bottom: 65%; animation-delay: -8s;  animation-duration: 21s; }
.fp-13 { left: 33%; bottom: 72%; animation-delay: -18s; background: var(--violet); }
.fp-14 { left: 56%; bottom: 78%; animation-delay: -5s;  animation-duration: 23s; }
.fp-15 { left: 76%; bottom: 70%; animation-delay: -12s; background: var(--violet); }
.fp-16 { left: 22%; bottom: 82%; animation-delay: -17s; }
.fp-17 { left: 92%; bottom: 45%; animation-delay: -10s; animation-duration: 17s; }
.fp-18 { left: 48%; bottom: 88%; animation-delay: -20s; }

/* ── Floating lines ── */
.float-line { position: absolute; height: 1px; opacity: 0; animation: lineFloat 28s linear infinite; }
@keyframes lineFloat {
  0%   { opacity: 0; transform: scaleX(0) translateY(0); }
  10%  { opacity: 0.18; transform: scaleX(1) translateY(0); }
  90%  { opacity: 0.08; }
  100% { opacity: 0; transform: scaleX(0.3) translateY(-80px); }
}
.fl-1 { width: 120px; left:  5%; top: 30%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation-delay: -4s; }
.fl-2 { width:  80px; left: 25%; top: 55%; background: linear-gradient(90deg, transparent, var(--blue), transparent);   animation-delay: -11s; animation-duration: 32s; }
.fl-3 { width: 160px; left: 55%; top: 20%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation-delay: -7s;  animation-duration: 25s; }
.fl-4 { width: 100px; left: 72%; top: 68%; background: linear-gradient(90deg, transparent, var(--blue), transparent);   animation-delay: -18s; }
.fl-5 { width:  60px; left: 40%; top: 80%; background: linear-gradient(90deg, transparent, var(--violet), transparent); animation-delay: -2s;  animation-duration: 36s; }
.fl-6 { width: 140px; left: 85%; top: 40%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation-delay: -14s; animation-duration: 30s; }
.fl-7 { width:  90px; left: 15%; top: 75%; background: linear-gradient(90deg, transparent, var(--violet), transparent); animation-delay: -22s; }

/* ── Cursor glow ── */
.cursor-glow {
  position: fixed; top: -240px; left: -240px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-color, rgba(0,229,153,0.10)) 0%, transparent 70%);
  pointer-events: none; z-index: 9998; opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform;
}
.cursor-ring {
  position: fixed; top: -14px; left: -14px;
  width: 28px; height: 28px;
  border: 1.5px solid rgba(0,229,153,0.35);
  border-radius: 50%;
  pointer-events: none; z-index: 9999; opacity: 0;
  transition: opacity 0.6s ease, border-color 0.25s ease;
  will-change: transform;
}
.cursor-ring--active { border-color: rgba(0,229,153,0.65); }