/**
 * assets/css/orbs.css
 * Purpose: Background orb positioning, animations, prefers-reduced-motion override.
 * Orbs are decorative only — not interactive, not focusable.
 * Last modified: 2026-04-11
 */

/* ─── Orb container ─────────────────────────────────────────────────────────── */
.orb-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* ─── Individual orbs ───────────────────────────────────────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  will-change: transform;
}

.orb-1 {
  width: 600px;
  height: 600px;
  top: -100px;
  left: -120px;
  background: radial-gradient(circle, #4f8cff 0%, transparent 70%);
  animation: orb-drift-1 28s ease-in-out infinite alternate;
}

.orb-2 {
  width: 500px;
  height: 500px;
  top: 30%;
  right: -80px;
  background: radial-gradient(circle, #b67dff 0%, transparent 70%);
  animation: orb-drift-2 24s ease-in-out infinite alternate;
}

.orb-3 {
  width: 700px;
  height: 700px;
  bottom: -150px;
  left: 20%;
  background: radial-gradient(circle, #2dd4bf 0%, transparent 70%);
  animation: orb-drift-3 32s ease-in-out infinite alternate;
}

.orb-4 {
  width: 450px;
  height: 450px;
  top: 15%;
  left: 40%;
  background: radial-gradient(circle, #1a4a8a 0%, transparent 70%);
  animation: orb-drift-4 20s ease-in-out infinite alternate;
}

/* ─── Drift keyframes ───────────────────────────────────────────────────────── */
@keyframes orb-drift-1 {
  from { transform: translate(0, 0); }
  to   { transform: translate(40px, 60px); }
}

@keyframes orb-drift-2 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-50px, 40px); }
}

@keyframes orb-drift-3 {
  from { transform: translate(0, 0); }
  to   { transform: translate(30px, -50px); }
}

@keyframes orb-drift-4 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-40px, 30px); }
}

/* ─── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .orb {
    animation: none !important;
  }
}