/* ========================================
   Hero Slideshow — crossfade (2 slides, 20s)
   ======================================== */

.hero__slides {
    position: absolute;
    inset: 0;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: heroCrossfade 20s ease-in-out infinite;
}

.hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

/* 2 slides: each visible ~10s, total cycle 20s */
.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 10s; }

@keyframes heroCrossfade {
    0%      { opacity: 0; }
    10%     { opacity: 1; }
    50%     { opacity: 1; }
    60%     { opacity: 0; }
    100%    { opacity: 0; }
}

/* First slide starts visible */
.hero__slide:first-child {
    opacity: 1;
    animation-delay: 0s;
}

/* Override the old single-image hero zoom */
.hero--slideshow .hero__image {
    display: none;
}

/* Subtle zoom on each slide */
.hero__slide img {
    animation: heroSlideZoom 20s ease-in-out infinite;
}

.hero__slide:nth-child(1) img { animation-delay: 0s; }
.hero__slide:nth-child(2) img { animation-delay: 10s; }

@keyframes heroSlideZoom {
    0%      { transform: scale(1); }
    50%     { transform: scale(1.05); }
    60%     { transform: scale(1.05); }
    100%    { transform: scale(1); }
}

/* Mobile: adjust object-position for portrait photos */
@media (max-width: 768px) {
    .hero__slide img {
        object-position: center 15%;
    }
}