/* The opening composition remains the baseline. Scroll only changes its layers. */
.hp-hero--outline[data-hero-scroll] .hp-portrait {
  transform-origin: 50% 28%;
  transform: translate3d(0, var(--hero-portrait-y, 0px), 0)
    rotate(var(--hero-portrait-turn, 0deg)) scale(var(--hero-portrait-scale, 1));
}
.hp-hero--outline[data-hero-scroll] .hp-portrait img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--hero-ink-end, 100%), transparent var(--hero-paper-edge, 112%));
  mask-image: linear-gradient(to bottom, #000 0%, #000 var(--hero-ink-end, 100%), transparent var(--hero-paper-edge, 112%));
}
.hp-hero--outline[data-hero-scroll] .hp-hero-description {
  transform: translate3d(0, var(--hero-description-y, 0px), 0);
  opacity: var(--hero-description-opacity, 1);
}
.hp-hero--outline[data-hero-scroll][data-hero-in-view] .hp-portrait {
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hp-hero--outline[data-hero-scroll] :is(.hp-portrait, .hp-identity-side, .hp-hero-description) {
    transform: none !important;
    opacity: 1 !important;
  }
  .hp-hero--outline[data-hero-scroll] .hp-portrait img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}