.hero-story{isolation:isolate}
.hero-story:before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:var(--green-deep);transform:translateX(-102%)}
.hero-story.changing:before{animation:hero-wipe .7s cubic-bezier(.65,0,.35,1)}
.hero-story.changing .hero-overlay{opacity:.15;transform:translateY(10px)}
.hero-overlay{transition:opacity .3s,transform .3s}
.hero-navigation{position:absolute;z-index:5;right:25px;bottom:24px;display:flex;align-items:center;gap:10px;background:rgba(0,39,24,.82);padding:8px 10px;color:white;backdrop-filter:blur(8px)}
.hero-navigation>button{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);background:transparent;color:white;cursor:pointer}
.hero-navigation>button:hover{border-color:var(--gold);color:var(--gold)}
.hero-navigation>span{font-size:.65rem;letter-spacing:.08em;min-width:42px;text-align:center}
.hero-dots{display:flex;gap:6px}
.hero-dots button{width:7px;height:7px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.4);cursor:pointer}
.hero-dots button.active{width:20px;border-radius:5px;background:var(--gold)}
.hero-progress{position:absolute;z-index:5;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.18)}
.hero-progress span{display:block;width:100%;height:100%;background:var(--gold);transform-origin:left;animation:hero-progress 8s linear infinite}
.hero-story:hover .hero-progress span{animation-play-state:paused}
@keyframes hero-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hero-wipe{0%{transform:translateX(-102%)}48%{transform:translateX(0)}52%{transform:translateX(0)}100%{transform:translateX(102%)}}
@media(max-width:600px){.hero-navigation{right:14px;bottom:15px}.hero-navigation>button{width:31px;height:31px}.hero-dots{display:none}.hero-overlay{padding-bottom:85px}}
@media(prefers-reduced-motion:reduce){.hero-story.changing:before,.hero-progress span{animation:none}.hero-overlay{transition:none}}