/* Scroll treatment, using the shared hero-motion.js lifecycle. */
.hero-loading{display:none}
html[data-hero-load="pending"] .hero-image-wrap>:not(.hero-loading){visibility:hidden}
html[data-hero-load="pending"] .hero-image-wrap:before{visibility:hidden}
html[data-hero-load="pending"] .hero-loading{display:flex;position:absolute;inset:0;z-index:4;align-items:center;justify-content:center;gap:14px;background:#f5f6f7;color:#52616c;font-size:16px;line-height:1.6}
.hero-loading:before{content:'';width:22px;height:22px;border:2px solid #d6dde2;border-top-color:#52616c;border-radius:50%;animation:hero-loading-spin .8s linear infinite}
@keyframes hero-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero-loading:before{animation:none}}
.hero-story-track{display:contents}
.hero-story-layer{display:none;position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.has-hero-story .hero-story-assets-ready .hero-story-layer{display:block}
.hero-story-image{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;will-change:transform}
.hero-scroll-scene.has-hero-story.is-animated{height:calc(clamp(650px,100svh,1050px) + 140svh)}
@media(max-width:760px){
  .has-hero-story .hero.hero-open-channels{overflow:visible}
  .has-hero-story .hero-story-track{display:block;position:relative;order:1;width:100%;height:240svh;flex:none}
  .has-hero-story .hero-open-channels .hero-image-wrap{position:sticky;top:0;height:100svh}
  .hero-story-image{object-position:78% center}
}