/* ============================================================
   MARRIAGE.OS — Unified oil-slick shader background
   Shared across all six pages. Load this AFTER each page's own
   stylesheet so it fully overrides the per-page `.shader-bg`
   stand-in.

   Look: warm amber pools with a faint green iridescence,
   slowly drifting on near-black (#0a0805). Sits behind all
   content (z-0) and beneath the CRT vignette/scanline overlays.
   ============================================================ */

.shader-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* two broad amber pools that slowly slide across each other */
  background:
    radial-gradient(60% 80% at 25% 28%, rgba(255, 176,  0, 0.11), transparent 62%),
    radial-gradient(55% 75% at 82% 72%, rgba(255, 120, 20, 0.09), transparent 62%);
  background-repeat: no-repeat;
  background-size: 180% 180%, 200% 200%;
  animation: slick-shift 42s ease-in-out infinite alternate;
}

/* Shutdown bookend: same shader, clearly dimmer & more receded than
   boot — "going to sleep" vs boot's brighter "waking up". */
.shader-bg--dim { opacity: 0.4; }

/* two large blurred blobs, screen-blended for the oil-slick sheen */
.shader-bg::before,
.shader-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  will-change: transform;
}

.shader-bg::before {
  width: 65vw; height: 65vw;
  left: -8vw; top: -18vh;
  background: radial-gradient(circle,
              rgba(255, 176,  0, 0.30) 0%,
              rgba(255, 140, 10, 0.13) 45%,
              transparent 70%);
  animation: drift-a 30s ease-in-out infinite alternate;
}

.shader-bg::after {
  width: 58vw; height: 58vw;
  right: -12vw; bottom: -16vh;
  background: radial-gradient(circle,
              rgba(255, 150, 30, 0.22) 0%,
              rgba( 51, 255, 153, 0.07) 55%,
              transparent 72%);
  animation: drift-b 38s ease-in-out infinite alternate;
}

@keyframes slick-shift {
  0%   { background-position:   0%   0%, 100% 100%; }
  100% { background-position: 100% 100%,   0%   0%; }
}
@keyframes drift-a {
  0%   { transform: translate(0, 0)        scale(1);    }
  50%  { transform: translate(8vw, 6vh)    scale(1.12); }
  100% { transform: translate(-4vw, 10vh)  scale(1.05); }
}
@keyframes drift-b {
  0%   { transform: translate(0, 0)        scale(1.05); }
  50%  { transform: translate(-9vw, -5vh)  scale(1.15); }
  100% { transform: translate(5vw, -9vh)   scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
  .shader-bg,
  .shader-bg::before,
  .shader-bg::after { animation: none; }
}