/* Slider Zoom Effect CSS */
/* This file contains the zoom-in animation for slider background images */

.slider-bg {
    animation: backgroundZoomIn 48s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

@keyframes backgroundZoomIn {
    0% {
        background-size: 100% 100%;
    }
    25% {
        background-size: 105% 105%;
    }
    50% {
        background-size: 110% 110%;
    }
    75% {
        background-size: 105% 105%;
    }
    100% {
        background-size: 100% 100%;
    }
}

.slider-bg:hover {
    animation: backgroundZoomInHover 24s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

@keyframes backgroundZoomInHover {
    0% {
        background-size: 100% 100%;
    }
    100% {
        background-size: 115% 115%;
    }
}

/* Force the animation to work */
.slider-bg {
    will-change: background-size;
    transform-origin: center center;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}