/* Homepage only: approved A/B photographs and fixed copy.
   LY-inspired proportions; portrait switches only at the mobile breakpoint. */
.hero{width:calc(100% - 80px);height:auto;min-height:0;aspect-ratio:2.2577}
@media(max-width:1000px){.hero{width:calc(100% - 56px)}}
@media(max-width:760px){.hero{width:calc(100% - 24px)}}
/* Match LY's mobile image height (viewport minus its 40px gutters),
   retaining SWEEK's existing gutters and later portrait breakpoint. */
@media(max-width:760px){.hero{height:calc((100vw - 40px)/.80965);aspect-ratio:auto}}
@media(max-width:360px){.hero h1{font-size:28px}}
.hero .hero-scene{position:absolute;inset:0;overflow:hidden}
.hero .hero-scene-b{opacity:0}
.hero .hero-photo{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.025)}
.hero.is-ready .hero-photo{animation:hero-drift 10s linear infinite}
.hero.is-ready .hero-scene-b .hero-photo{animation-name:hero-drift-b}
.hero.is-ready .hero-scene-b{animation:hero-crossfade 10s ease-in-out infinite}
.hero:after{background:linear-gradient(90deg,rgba(12,25,36,.68),rgba(12,25,36,.45) 48%,rgba(12,25,36,.03) 80%)}
.hero-motion{position:absolute;z-index:2;right:20px;bottom:20px;width:44px;height:44px;border:1px solid #ffffff80;border-radius:50%;background:#14273180;color:white;display:grid;place-items:center;cursor:pointer}
.hero-motion[hidden]{display:none}
.hero-motion:hover{background:#142731}
.hero-motion svg{width:18px;height:18px;stroke-width:2}
.hero-motion .play-mark{display:none}
.hero-motion[aria-pressed="true"] .pause-mark{display:none}
.hero-motion[aria-pressed="true"] .play-mark{display:block}
.hero.is-paused .hero-scene-b,.hero.is-paused .hero-photo{animation-play-state:paused}
/* Reset only while B is fully opaque. Scale is continuous across the cycle boundary. */
@keyframes hero-drift{0%{transform:scale(1.1)}55%{transform:scale(1.375)}55.01%,80%{transform:scale(1)}100%{transform:scale(1.1)}}
/* Reset B only while invisible; both visible windows zoom at the same speed. */
@keyframes hero-drift-b{0%{transform:scale(1.35)}10%{transform:scale(1.4)}10.01%,30%{transform:scale(1)}100%{transform:scale(1.35)}}
@keyframes hero-crossfade{0%,40%,100%{opacity:0}50%,90%{opacity:1}}
@media(max-width:760px){
  .hero .hero-photo{object-position:73% center}
  .hero:after{background:linear-gradient(0deg,rgba(12,25,36,.76),rgba(12,25,36,.42) 45%,rgba(12,25,36,.02) 85%)}
  .hero-motion{right:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .hero.is-ready .hero-photo,.hero.is-ready .hero-scene-b{animation:none;transform:none}
  .hero-motion{display:none}
}