/* Smooth hero crossfade — loaded after styles.css so these rules win.
   Incoming slide always fades in ON TOP of the outgoing one (no see-through
   dip), and the outgoing slide keeps its finished zoom + caption while it
   fades (no snap back to scale 1). Non-visible slides stay hidden so the
   graphics card isn't holding every photo at once. */

.hero-slide {
    z-index: 0;
    visibility: hidden;
    will-change: auto;
    transition: opacity 1.6s ease-in-out;
}
.hero-slide.leaving {
    visibility: visible;
}
.hero-slide.active {
    opacity: 1;
    z-index: 1;
    visibility: visible;
}
.hero-slide.active,
.hero-slide.leaving {
    will-change: opacity, transform;
}

/* Outgoing slide keeps its finished zoom during fade-out (desktop). */
.hero-slide.leaving.zoom-c { animation: heroZoomC 7s ease-out forwards; }
.hero-slide.leaving.zoom-l { animation: heroZoomL 7s ease-out forwards; }
.hero-slide.leaving.zoom-r { animation: heroZoomR 7s ease-out forwards; }

/* Outgoing caption stays put and fades with its slide. */
.hero-slide.leaving .hero-caption span {
    animation: captionIn .95s cubic-bezier(.16, 1, .3, 1) .4s forwards,
               captionDrift 6s ease-in-out 1.4s forwards;
}

/* Same idea for the mobile pan animations. */
@media (max-width: 767.98px) {
    .hero-slide.leaving.zoom-l,
    .hero-slide.leaving.zoom-c { animation: heroPanR 14s linear forwards; }
    .hero-slide.leaving.zoom-r { animation: heroPanL 14s linear forwards; }
}