/* Timings measured from the reference hero: 200ms content swap, 300ms text
   transition, 700ms retained-image crossfade, and an eight-second dot fill. */
.hero-content{transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);opacity:1;transform:translateY(0)}
.hero-content.hero-content-changing{opacity:0;transform:translateY(6px)}
.hero-art-layer{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .7s ease-in-out}
.hero-art-layer.is-active{opacity:1}
.hero-art-layer .hero-backdrop-image{animation:none!important}
.hero-dot{transition:width .3s cubic-bezier(.4,0,.2,1)}
.hero-dot:after{background:#ffffff66;transition:background-color .3s cubic-bezier(.4,0,.2,1)}
.hero-dot:hover:after{background:#ffffff99}
.hero-dot.active:after{background:#ffffff4d}
.hero-dot-progress{position:absolute;top:8px;left:0;width:100%;height:8px;border-radius:20px;background:#fff;transform:scaleX(0);transform-origin:left center;pointer-events:none;opacity:0;z-index:1}
.hero-dot.active .hero-dot-progress{opacity:1;will-change:transform}
.hero-dot:not(.active) .hero-dot-progress{visibility:hidden}
.hero-dot.active:hover:after{background:#ffffff4d}
@media(prefers-reduced-motion:reduce){:where(html:not([data-motion=full])) .hero-dot,:where(html:not([data-motion=full])) .hero-content,:where(html:not([data-motion=full])) .hero-art-layer{transition:none}:where(html:not([data-motion=full])) .hero-dot.active .hero-dot-progress{transform:scaleX(1)!important;will-change:auto}}
:where(html[data-motion=reduced]) .hero-dot,:where(html[data-motion=reduced]) .hero-content,:where(html[data-motion=reduced]) .hero-art-layer{transition:none}
:where(html[data-motion=reduced]) .hero-dot.active .hero-dot-progress{transform:scaleX(1)!important;will-change:auto}