/* Reveal band — full-bleed image; the "line-grow" reveal is driven by line-reveal.js.
   The land→alabaster gradient lives on its own layer (.reveal-band__bg) so line-reveal.js
   can fade it in WITH the image — otherwise the dark half flashes before the reveal runs. */
.reveal-band {
  position: relative;
}
/* Fallback only — section-reveal_band.php now sets an inline background that overrides this; kept so existing/unset Reveal bands still render land→alabaster. */
.reveal-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    var(--color-land) 50%,
    var(--color-alabaster) 50%
  );
}
/* Hidden until line-reveal.js runs (html.js) so there's no flash before the line-grow reveal;
   no-js users always see the image. The gradient backdrop stays visible from the start. */
.js [data-line-reveal] {
  visibility: hidden;
}
.reveal-band__media {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
}
.reveal-band__img {
  display: block;
  width: 100%;
  height: auto;
}
/* Black veil injected by line-reveal.js; fades off as the band opens to full width. */
.reveal-band__veil {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
}
.reveal-band__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  align-content: center;
  color: var(--c-inverse);
}
.reveal-band__copy {
  grid-column: 1 / span 8;
}

/* ── Zoom-out variant ─────────────────────────────────────────────────────────
   Medium image centred over the bg, zooming out to full-bleed WIDTH on a no-pin
   scrub as the section scrolls through the viewport (assets/js/reveal-band-zoom.js).
   At rest the media is 100vw wide with its
   height following the image's aspect ratio, so the JS only ever animates a single
   UNIFORM scale (0.55 → 1) — the image can't distort or crop. */
.reveal-band--zoom {
  /* min-height: 100vh; */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.reveal-band--zoom .reveal-band__media {
  width: 100vw;
  transform-origin: 50% 50%;
  will-change: transform;
}
/* Hidden until reveal-band-zoom.js applies the start scale (html.js) so the
   full-size image never flashes before the zoom; no-js users always see it. */
.js .reveal-band--zoom [data-reveal-zoom] {
  visibility: hidden;
}
/* Reduced motion: no zoom — show the image static at full-bleed width. */
@media (prefers-reduced-motion: reduce) {
  .reveal-band--zoom [data-reveal-zoom] {
    visibility: visible;
    transform: none;
  }
}