/* Progressive enhancement: the original hero is unchanged without JS. */
.hero-scroll-track.is-enabled {
  height: calc(var(--hero-height) + var(--hero-scroll-distance));
  background: var(--ink);
}
.hero-scroll-track.is-enabled > .hero {
  position: sticky;
  top: var(--hero-header-height);
  overflow: hidden;
  padding: 0;
}
.hero-scroll-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: inherit;
  padding: var(--hero-copy-padding);
  transform: scale(var(--hero-frame-scale, .9));
  transform-origin: center;
}
.hero-scroll-visual {
  position: absolute;
  inset: 0;
  z-index: -1;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  transform: scale(var(--hero-frame-scale, .9));
  border-radius: var(--hero-frame-radius, 22px);
  transform-origin: center;
  will-change: transform;
}
.hero-scroll-visual .hero-photo {
  transform: translate(var(--hero-photo-x, 0px), var(--hero-photo-y, 0px)) scale(var(--hero-photo-scale, 1));
  transform-origin: center;
}
.hero-scroll-track .hero-content {
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll-track.is-enabled { height: auto; }
  .hero-scroll-track.is-enabled > .hero { position: relative; top: auto; }
  .hero-scroll-copy, .hero-scroll-visual, .hero-scroll-visual .hero-photo {
    transform: none;
    border-radius: 0;
    will-change: auto;
  }
}