/* ==========================================================================
   background.css — Global Animated Glow Background
   Bankenveld Golf Estate
   A fixed, non-interactive ambient layer present on every page: soft blurred
   colour blobs drifting slowly + an optional canvas particle field. Designed
   to sit BEHIND all content (z-index below the page) and never distract.
   Motion is disabled under prefers-reduced-motion.
   ========================================================================== */

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 12% -10%, rgba(31, 122, 84, 0.10), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(200, 168, 106, 0.08), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(18, 53, 36, 0.08), transparent 60%);
}

/* Blurred drifting orbs ---------------------------------------------------- */
.site-bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
  mix-blend-mode: multiply;
}
.site-bg__blob--1 {
  width: 46vw; height: 46vw;
  top: -12vw; left: -8vw;
  background: radial-gradient(circle at 30% 30%, rgba(47, 157, 108, 0.55), transparent 70%);
  animation: blob-drift-1 26s var(--ease-in-out) infinite;
}
.site-bg__blob--2 {
  width: 40vw; height: 40vw;
  bottom: -14vw; right: -10vw;
  background: radial-gradient(circle at 60% 40%, rgba(200, 168, 106, 0.42), transparent 70%);
  animation: blob-drift-2 32s var(--ease-in-out) infinite;
}
.site-bg__blob--3 {
  width: 34vw; height: 34vw;
  top: 40%; left: 55%;
  background: radial-gradient(circle at 50% 50%, rgba(18, 53, 36, 0.30), transparent 70%);
  animation: blob-drift-3 38s var(--ease-in-out) infinite;
}

/* Particle canvas (drawn by js/background.js) ------------------------------ */
.site-bg__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

/* Dark sections keep the glow readable */
:root[data-theme="dark"] .site-bg,
.section--dark ~ .site-bg { }

@keyframes blob-drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(6vw, 4vw, 0) scale(1.08); }
  66%      { transform: translate3d(-3vw, 7vw, 0) scale(0.96); }
}
@keyframes blob-drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-7vw, -5vw, 0) scale(1.12); }
}
@keyframes blob-drift-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(-5vw, 3vw, 0) scale(1.1); }
  75%      { transform: translate3d(4vw, -4vw, 0) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .site-bg__blob { animation: none !important; }
  .site-bg__particles { display: none; }
}

/* Slightly simplify on small screens for performance */
@media (max-width: 640px) {
  .site-bg__blob { filter: blur(60px); opacity: 0.4; }
  .site-bg__blob--3 { display: none; }
}