/* =============================================================================
   site-background.css v11 — clear-but-not-loud (reverted from v12)
   ============================================================================= */

:root {
  --bg-green: 45, 181, 83;
  --bg-green-light: 52, 208, 96;
  --bg-cyan: 0, 212, 255;
}

html::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.15;
  mix-blend-mode: overlay;
}

body::before {
  content: '';
  position: fixed;
  top: -10%; left: -10%; right: -10%; bottom: -10%;
  background:
    radial-gradient(ellipse 1100px 850px at 92% 8%,
      rgba(var(--bg-cyan), 0.30) 0%, transparent 65%),
    radial-gradient(ellipse 1000px 750px at 8% 92%,
      rgba(var(--bg-green), 0.27) 0%, transparent 65%),
    radial-gradient(ellipse 800px 600px at 15% 45%,
      rgba(var(--bg-green-light), 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 800px 600px at 85% 55%,
      rgba(var(--bg-cyan), 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 600px 500px at 12% 18%,
      rgba(var(--bg-green-light), 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 600px 500px at 88% 82%,
      rgba(var(--bg-cyan), 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 1300px 800px at 50% 50%,
      rgba(var(--bg-cyan), 0.07) 0%, transparent 75%);
  pointer-events: none;
  z-index: -2;
  animation: ceBgOrbDrift 28s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ceBgOrbDrift {
  0%   { transform: translate3d(0, 0, 0)        scale(1);    }
  33%  { transform: translate3d(2.5%, -1.5%, 0) scale(1.04); }
  66%  { transform: translate3d(-1.8%, 2.2%, 0) scale(1.02); }
  100% { transform: translate3d(1.2%, 1.5%, 0)  scale(1);    }
}

body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 3px,
      rgba(255, 255, 255, 0.028) 3px, rgba(255, 255, 255, 0.028) 4px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0px, transparent 11px,
      rgba(var(--bg-cyan), 0.04) 11px, rgba(var(--bg-cyan), 0.04) 12px
    ),
    linear-gradient(90deg,  rgba(var(--bg-cyan),  0.20) 1px, transparent 1px),
    linear-gradient(180deg, rgba(var(--bg-cyan),  0.20) 1px, transparent 1px),
    linear-gradient(90deg,  rgba(var(--bg-cyan),  0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(var(--bg-cyan),  0.06) 1px, transparent 1px),
    radial-gradient(rgba(var(--bg-green-light), 0.45) 1.8px, transparent 2.4px);
  background-size:
    100% 4px,
    24px 24px,
    60px 60px, 60px 60px,
    12px 12px, 12px 12px,
    60px 60px;
  background-position:
    0 0,
    0 0,
    0 0, 0 0,
    0 0, 0 0,
    30px 30px;
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image: radial-gradient(ellipse 105% 95% at center,
                       #000 0%, #000 65%, transparent 100%);
          mask-image: radial-gradient(ellipse 105% 95% at center,
                       #000 0%, #000 65%, transparent 100%);
  opacity: 1;
  animation: ceBgGridPan 60s linear infinite;
}

@keyframes ceBgGridPan {
  from {
    background-position:
      0 0,
      0 0,
      0 0, 0 0,
      0 0, 0 0,
      30px 30px;
  }
  to {
    background-position:
      0 -160px,
      24px 24px,
      60px -60px, 60px -60px,
      12px -12px, 12px -12px,
      90px -30px;
  }
}

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

@media (max-width: 768px) {
  html::before {
    background-size: 180px 180px;
    opacity: 0.13;
  }
  body::after {
    background-size:
      100% 4px,
      20px 20px,
      44px 44px, 44px 44px,
      11px 11px, 11px 11px,
      44px 44px;
    background-position:
      0 0,
      0 0,
      0 0, 0 0,
      0 0, 0 0,
      22px 22px;
    opacity: 1;
  }
}

@media print {
  html::before,
  body::before,
  body::after { display: none !important; }
}