/* ============================================================
   Full-height parallax body background (Aquarium Park)
   - Pseudo-element is 130% of viewport height so it can travel
     slower than the foreground without ever exposing an edge.
   - --pbg-y is driven by assets/js/parallax-bg.js (lerped rAF).
   - Overlay uses the active color preset via var(--cp-navy).
   ============================================================ */
html,
body {
  background-color: transparent;
}

body::before {
  content: "";
  position: fixed;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--cp-navy) 58%, transparent) 0%,
      color-mix(in srgb, var(--cp-navy) 66%, transparent) 55%,
      color-mix(in srgb, var(--cp-navy) 78%, transparent) 100%
    ),
    url("../images/aquarium-parallax.jpg") center / cover no-repeat;
  transform: translate3d(0, var(--pbg-y, 0px), 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    transform: none;
    will-change: auto;
  }
}