/* The original hero remains fully readable before this enhancement starts. */
.hero-chapter[data-hero-pinned]::after {
  content: "";
  display: block;
  height: 320px;
}

.hero-chapter[data-hero-pinned] > .hero {
  position: sticky;
  top: 24px;
}

.hero-chapter[data-hero-scroll-ready] .portrait-fact[data-caption] {
  opacity: 0;
  transform: translateY(12px);
}

.hero-chapter[data-hero-scroll-ready] .portrait-fact[data-caption-revealed] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

@media (max-width: 1000px) {
  .hero-chapter[data-hero-pinned]::after { display: none; }
  .hero-chapter[data-hero-pinned] > .hero { position: relative; top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-chapter[data-hero-pinned]::after { display: none; }
  .hero-chapter[data-hero-pinned] > .hero { position: relative; top: auto; }
  .hero-chapter[data-hero-scroll-ready] .portrait-fact[data-caption] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}