/* ===== Hero carousel + images + fade ===== */

#homeSlider .carousel-inner {
    background: transparent;
}

.home-view .slider-img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 16/6;
}

/* Fade style for carousel */
.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity .7s ease-in-out;
    position: absolute;
    inset: 0;
    width: 100%;
    pointer-events: none;
    backface-visibility: hidden;
}

    .carousel-fade .carousel-item.active {
        opacity: 1;
        position: relative;
        pointer-events: auto;
    }

@keyframes zoomInSettle {
    0% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.carousel-fade .carousel-item.active .slider-img {
    animation: zoomInSettle 8s ease-out both;
    will-change: transform;
}

/* Hide controls on small screens */
@media (max-width: 767.98px) {
    #homeSlider .carousel-control-prev,
    #homeSlider .carousel-control-next {
        display: none;
    }
}

/* Hero image sizing */
@media (max-width: 575.98px) {
    .home-view .slider-img {
        height: 400px;
        aspect-ratio: auto;
    }
}

@media (min-width: 768px) {
    .home-view .slider-img {
        height: 500px;
        aspect-ratio: auto;
    }
}

@media (min-width: 1200px) {
    .home-view .slider-img {
        height: 650px;
    }
}