.hero{--hero-transition-duration:1050ms}
.hero:after{content:'';position:absolute;z-index:5;inset:0;pointer-events:none;background:rgba(4,17,33,0);transition:background 260ms ease}
.hero.is-switching:after{background:rgba(4,17,33,.18)}
.hero-slide{will-change:clip-path,transform,filter}
.hero-slide.active{animation:heroMediaEnter var(--hero-transition-duration) cubic-bezier(.2,.72,.2,1) both}
.hero-copy{will-change:transform,opacity}
.hero.is-switching .hero-copy{animation:heroCopyReenter var(--hero-transition-duration) cubic-bezier(.2,.72,.2,1) both}
.hero.is-switching .hero-status{animation:heroStatusReenter var(--hero-transition-duration) cubic-bezier(.2,.72,.2,1) both}
.hero.is-switching .hero-dots{opacity:.68;transition:opacity .2s ease}
.hero:not(.is-switching) .hero-dots{opacity:1;transition:opacity .3s ease}
@keyframes heroMediaEnter{0%{clip-path:inset(0 100% 0 0);transform:scale(1.045);filter:brightness(.74)}62%{clip-path:inset(0 0 0 0);transform:scale(1.012);filter:brightness(.62)}100%{clip-path:inset(0 0 0 0);transform:scale(1);filter:brightness(.62)}}
@keyframes heroCopyReenter{0%,18%{opacity:0;transform:translateY(calc(-50% + 20px))}55%{opacity:0;transform:translateY(calc(-50% + 11px))}100%{opacity:1;transform:translateY(-50%)}}
@keyframes heroStatusReenter{0%,42%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero:after,.hero-slide.active,.hero.is-switching .hero-copy,.hero.is-switching .hero-status,.hero.is-switching .hero-dots,.hero:not(.is-switching) .hero-dots{animation:none!important;transition:none!important}.hero.is-switching:after{background:transparent}}