.hero{background:#dce3d6 url('assets/cities/grozny.jpg') 58% 54%/cover;isolation:isolate}
.hero-city-photos{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-city-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.3s ease}
.hero-city-photo.active{opacity:1}
.hero .hero-shade{z-index:1;background:linear-gradient(90deg,rgba(236,240,228,.97) 0%,rgba(236,240,228,.9) 29%,rgba(236,240,228,.35) 61%,rgba(17,36,27,.08) 100%)}
.hero .hero-content,.hero .hero-note{z-index:2}
.hero .photo-caption{z-index:2;bottom:64px;background:rgba(25,38,29,.6);backdrop-filter:blur(6px);padding:7px 10px;border-radius:5px;letter-spacing:1.5px}
.hero-city-controls{position:absolute;z-index:3;right:33px;bottom:22px;display:flex;align-items:center;gap:7px;background:rgba(25,38,29,.42);padding:4px 8px;border-radius:25px;backdrop-filter:blur(8px)}
.hero-city-dot{width:25px;height:25px;display:grid;place-items:center;padding:0}
.hero-city-dot:before{content:'';width:6px;height:6px;border-radius:50%;background:#ffffff85;transition:width .25s,background .25s}
.hero-city-dot[aria-pressed=true]:before{width:20px;border-radius:4px;background:white}
.hero-city-pause{font:12px Arial,sans-serif;color:white;min-width:28px;height:25px;padding:0 5px;border-left:1px solid #ffffff3b}
@media(max-width:600px){.hero .hero-shade{background:linear-gradient(90deg,rgba(236,240,228,.96),rgba(236,240,228,.8) 47%,rgba(236,240,228,.26))}.hero-city-controls{right:14px;bottom:14px;gap:1px;padding:2px 6px}.hero .photo-caption{bottom:53px;right:14px;font-size:7px;letter-spacing:1px}.hero-city-dot{width:22px;height:22px}.hero-city-pause{height:22px;min-width:24px}.hero .hero-caption{max-width:155px;line-height:1.8}}
@media(prefers-reduced-motion:reduce){.hero-city-photo{transition:none}}