/* Background animation 10 – Orbit radar (clearly animated)
 *
 * Usage:
 *   <link rel="stylesheet" href="assets/style.css">
 *   <link rel="stylesheet" href="assets/bg-animation-10-orbit-rings.css">
 *
 * Premium radar-style animation at the bottom:
 *  - Rotating golden scanning arc
 *  - Soft navy + teal base glow
 *  - Very clearly visible motion, but still behind all content
 */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -28%;
  pointer-events: none;
  z-index: -1;
}

/* Base glow + faint rings */

body::before {
  background:
    radial-gradient(circle at 50% 100%, rgba(15, 23, 42, 0.98) 0, transparent 72%),
    radial-gradient(circle at 50% 100%, rgba(37, 99, 235, 0.5) 0, transparent 68%),
    radial-gradient(circle at 50% 100%, rgba(37, 99, 235, 0.0) 52%, rgba(148, 163, 184, 0.3) 53%, transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(37, 99, 235, 0.0) 64%, rgba(148, 163, 184, 0.22) 65%, transparent 74%);
  opacity: 0.85;
}

/* Rotating golden scanning arc using conic-gradient */

body::after {
  background:
    conic-gradient(
      from 0deg at 50% 100%,
      transparent 0deg,
      transparent 280deg,
      rgba(251, 191, 36, 0.75) 300deg,
      rgba(251, 191, 36, 0.0) 330deg,
      transparent 360deg
    ),
    radial-gradient(circle at 50% 100%, rgba(251, 191, 36, 0.18) 0, transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(56, 189, 248, 0.12) 0, transparent 60%);
  animation: caOrbitRadar10Rotate 18s linear infinite;
  opacity: 0.95;
  mix-blend-mode: screen;
}

/* Clear rotating arc around the bottom centre */

@keyframes caOrbitRadar10Rotate {
  0% {
    transform: rotate(0deg) scale(1.02);
  }
  50% {
    transform: rotate(180deg) scale(1.06);
  }
  100% {
    transform: rotate(360deg) scale(1.02);
  }
}

/* Motion safety */

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
  }
}