/* === Orb Animations — Shared across all pages === */

.orbs {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}

.orb {
  position: absolute; border-radius: 50%;
  filter: blur(100px);
  opacity: var(--orb-op, .3);
  animation: drift 14s ease-in-out infinite alternate;
  will-change: transform;
}

.orb:nth-child(1) {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--c1), transparent 70%);
  top: -10%; left: -5%;
}

.orb:nth-child(2) {
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--c2), transparent 70%);
  top: 30%; right: -10%;
  animation-delay: -3s;
}

.orb:nth-child(3) {
  width: 350px; height: 350px;
  background: radial-gradient(circle, var(--indigo), transparent 70%);
  bottom: -5%; left: 30%;
  animation-delay: -7s;
}

.orb:nth-child(4) {
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--violet), transparent 70%);
  top: 60%; left: -8%;
  animation-delay: -10s;
}

@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.05); }
  50% { transform: translate(-20px, 30px) scale(.95); }
  75% { transform: translate(15px, 15px) scale(1.02); }
  100% { transform: translate(-10px, -25px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
}