/* Scroll changes only visual layers. The 16:9 film keeps its natural footprint. */
.has-hero-scroll .hero-visual {
  transform-origin: center 42%;
  transform: scale(calc(1 - var(--hero-inset-progress, 0) * .04));
  border-radius: calc(var(--hero-inset-progress, 0) * 18px);
}
/* Controls live inside the film and share its scroll transform. */
.has-hero-scroll .hero-chapters { opacity: 1; translate: none; }
.has-hero-reveal .page-title {
  opacity: calc(.72 + var(--hero-title-reveal, 1) * .28);
  translate: 0 calc((1 - var(--hero-title-reveal, 1)) * 18px);
}
.has-hero-reveal .page-subline {
  opacity: calc(.8 + var(--hero-copy-reveal, 1) * .2);
  translate: 0 calc((1 - var(--hero-copy-reveal, 1)) * 14px);
}
@media (min-width: 821px) and (min-height: 601px) {
  .has-hero-scroll .hero-caption {
    opacity: calc(var(--caption-opacity, 1) * (1 - var(--hero-inset-progress, 0) * .6));
  }
}
@media (max-width: 820px), (max-height: 600px) {
  .has-hero-scroll .hero-visual {
    transform: scale(calc(1 - var(--hero-inset-progress, 0) * .015));
    border-radius: calc(var(--hero-inset-progress, 0) * 10px);
  }
  .has-hero-scroll .hero-chapters {
    opacity: 1;
    translate: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .has-hero-scroll .hero-visual { transform: none; border-radius: 0; }
  .has-hero-scroll .hero-chapters,
  .has-hero-reveal .page-title,
  .has-hero-reveal .page-subline { opacity: 1; translate: none; }
}