/* Hero: wide gym photo on the right, copy on the left; the person is an optional separate layer */
.hero{padding:0;min-height:min(760px,100vh);display:flex;align-items:center}
.hero-in{display:block;padding:130px 0 80px;position:relative;z-index:4}
.hero-copy{max-width:520px}
.hero-stage{position:absolute;top:0;right:0;bottom:0;width:min(78%,1200px);z-index:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%);mask-image:linear-gradient(90deg,transparent 0,#000 28%)}
.hero-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;border-radius:0;box-shadow:none;aspect-ratio:auto}
.hero-stage{touch-action:pan-y}
.stage-base{transition:filter .5s ease,transform .5s ease}
.stage-person{z-index:2;pointer-events:none;transition:transform .25s ease-out,filter .4s ease;will-change:transform;filter:drop-shadow(0 0 0 rgba(251,212,11,0))}
.hero-stage.hot .stage-base{filter:blur(2.5px) brightness(.72) saturate(.9);transform:scale(1.02)}
.hero-stage.hot .stage-person{filter:drop-shadow(0 0 18px rgba(251,212,11,.55)) drop-shadow(0 18px 24px rgba(0,0,0,.5))}
.hero-bg{z-index:0}
.blob{z-index:0}
.hero-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(0deg,rgba(20,34,74,.55),transparent 30%)}
@media (max-width:960px){
  .hero{display:block;min-height:0}
  .hero-stage{position:relative;width:100%;height:56vw;min-height:300px;max-height:460px;margin-top:72px;-webkit-mask-image:none;mask-image:none}
  .hero-stage img{object-position:62% 35%}
  .hero-in{padding:2rem 0 3rem}
  .hero-copy{max-width:none}
}