/* Hero: slow zoom on the active photo (unchanged behaviour) */
.hero-slide img.hero-img{transform:scale(1.08);transition:transform 7s ease-out}
.hero-slide.is-active img.hero-img{transform:scale(1)}

/* Text block is hinged on the left border: --hero-pad is the gap from the border to the text,
   so transform-origin sits exactly on the border line. */
.hero-copy{--hero-pad:1.5rem;padding-left:var(--hero-pad);perspective:1400px;perspective-origin:0 50%}
@media (min-width:768px){.hero-copy{--hero-pad:2rem}}
.hero-in{opacity:0;transform:rotateY(-95deg);transform-origin:calc(var(--hero-pad) * -1) 50%;backface-visibility:hidden;will-change:transform,opacity}
.hero-slide.is-active .hero-in{animation:heroSwingIn .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-slide.is-active .hero-in:nth-child(2){animation-delay:.12s}
.hero-slide.is-active .hero-in:nth-child(3){animation-delay:.24s}
.hero-slide.is-active .hero-in:nth-child(4){animation-delay:.36s}
.hero-slide.is-leaving .hero-in{animation:heroSwingOut .6s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes heroSwingIn{from{opacity:0;transform:rotateY(-95deg)}50%{opacity:1}to{opacity:1;transform:rotateY(0)}}
@keyframes heroSwingOut{from{opacity:1;transform:rotateY(0)}to{opacity:0;transform:rotateY(95deg)}}

/* Progress bars */
.hero-dot{position:relative;height:4px;width:56px;background:rgba(255,255,255,.35);overflow:hidden}
.hero-dot i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.hero-dot.is-done i{transform:scaleX(1)}
.hero-dot.is-active i{animation:heroFill var(--hero-ms,6000ms) linear forwards}
#heroSlider.is-paused .hero-dot.is-active i{animation-play-state:paused}
@keyframes heroFill{to{transform:scaleX(1)}}
#heroSlider a:focus-visible,#heroSlider button:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .hero-slide img.hero-img{transition:none;transform:none}
  .hero-in{animation:none!important;opacity:1;transform:none}
  .hero-dot.is-active i{animation:none;transform:scaleX(1)}
}