/* === High-visibility Background Motion === */

html, body { min-height: 100%; }

/* Animate the body gradient itself */
body {
  position: relative;
  /* exaggerate the gradient area so motion is obvious */
  background-size: 220% 220% !important;
  animation: bg-pan 20s linear infinite alternate;
}

/* Motion overlay that sits behind content but above body bg */
body::before {
  content: "";
  position: fixed;
  inset: -15%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  /* three animated gradient blobs */
  background:
    radial-gradient(50% 60% at 20% 30%, rgba(255,200,120,0.35), transparent 60%),
    radial-gradient(60% 70% at 80% 25%, rgba(120,180,255,0.35), transparent 60%),
    radial-gradient(55% 65% at 40% 85%, rgba(160,255,210,0.32), transparent 60%);
  background-size: 250% 250%;
  animation: overlay-flow 12s ease-in-out infinite alternate;
}

/* Add a slowly rotating conic gradient for extra motion */
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,0.08),
    rgba(0,0,0,0.0),
    rgba(255,255,255,0.08),
    rgba(0,0,0,0.0)
  );
  animation: spin 28s linear infinite;
}

/* Keep all real content above overlays */
#___page, main, .page, .container, .wrapper, header, section, footer, .grid {
  position: relative;
  z-index: 1;
}

/* Keyframes */
@keyframes bg-pan {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

@keyframes overlay-flow {
  0%   { transform: translate3d(-4%, -4%, 0) scale(1.06); background-position: 0% 0%; }
  100% { transform: translate3d(4%, 4%, 0)  scale(1.09); background-position: 100% 100%; }
}

@keyframes spin {
  to { transform: rotate(360deg) }
}

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