/* River plate backdrop — full-viewport photography / video under the page.
   Dense color overlay so low-res plates tint the page; they never headline. */

.river-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.river-backdrop .river-move {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.22);
  transform-origin: 50% 50%;
}
.river-backdrop .river-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1600ms cubic-bezier(.33, 0, .2, 1);
}
/* default: quiet plate under dense ink */
.river-backdrop .river-plate.on {
  opacity: var(--river-opacity, 0.22);
}
.river-backdrop.river-strong .river-plate.on {
  opacity: var(--river-opacity, 0.32);
}
.river-backdrop.river-subtle .river-plate.on {
  opacity: var(--river-opacity, 0.14);
}

/* crush detail: low contrast, dim, mild soft blur hides 720p grain */
.river-backdrop .river-plate {
  filter:
    hue-rotate(var(--river-tint, -16deg))
    saturate(1.15)
    contrast(0.52)
    brightness(0.55)
    blur(var(--river-blur, 0.35px));
  mix-blend-mode: soft-light;
}

/* deep ink bed — denser than the plate */
.river-backdrop .river-move::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #0a1624 88%, #1a4a5c),
    #060b13 48%,
    color-mix(in srgb, #060b13 82%, #0c2840)
  );
}

/* multi-layer color overlay on top of video (this is what hides low-res) */
.river-backdrop .river-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* brand ink wash */
    linear-gradient(
      165deg,
      rgba(6, 11, 19, 0.72) 0%,
      rgba(8, 14, 24, 0.55) 35%,
      rgba(6, 11, 19, 0.78) 100%
    ),
    /* caplifi blue/teal cast */
    linear-gradient(
      200deg,
      color-mix(in srgb, #0b3a73 42%, transparent),
      transparent 55%,
      color-mix(in srgb, #1d5663 28%, transparent)
    ),
    /* vignette so edges never read as video frame */
    radial-gradient(120% 80% at 50% 40%, transparent 20%, rgba(0, 0, 0, 0.62) 100%),
    /* top/bottom bars for type */
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.55) 0%,
      transparent 28%,
      transparent 62%,
      rgba(0, 0, 0, 0.72) 100%
    );
  opacity: var(--river-veil, 0.92);
}

/* extra solid scrim — toggle via body class if needed */
.river-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: color-mix(in srgb, #060b13 58%, transparent);
  pointer-events: none;
}

body.river-on {
  background: #060b13;
}
body.river-on > *:not(.river-backdrop) {
  position: relative;
  z-index: 1;
}
body.river-on header.site,
body.river-on .site-header,
body.river-on header.nav,
body.river-on nav.nav {
  z-index: 50;
}

@media (prefers-reduced-motion: reduce) {
  .river-backdrop .river-move {
    transform: none !important;
  }
  .river-backdrop .river-plate {
    transition: none;
  }
  .river-backdrop video.river-plate {
    display: none;
  }
  .river-backdrop img.river-plate.on {
    opacity: var(--river-opacity, 0.18);
  }
  .river-backdrop .river-plate {
    filter: saturate(1.05) contrast(0.55) brightness(0.5) blur(2px);
  }
}