/* MOTORE CAROSELLO IMMAGINI */
@media all {
    [xtype="imagecarosello"] > [data-carousel-item] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        opacity: 0;
    }

    [xtype="imagecarosello"] > [data-carousel-item].active,
    [xtype="imagecarosello"] > [data-carousel-item].carousel-entering,
    [xtype="imagecarosello"] > [data-carousel-item].carousel-leaving {
        visibility: visible;
        opacity: 1;
    }

    [xtype="imagecarosello"] > [data-carousel-item].carousel-entering {
        z-index: 2;
    }

    [xtype="imagecarosello"] > [data-carousel-item].carousel-leaving {
        z-index: 1;
    }

    [data-carousel-effect="fade"] > .carousel-entering { animation: carousel-fade-in 900ms ease both; }
    [data-carousel-effect="fade"] > .carousel-leaving { animation: carousel-fade-out 900ms ease both; }
    [data-carousel-effect="fade-zoom"] > .carousel-entering { animation: carousel-fade-zoom-in 1000ms ease both; }
    [data-carousel-effect="fade-zoom"] > .carousel-leaving { animation: carousel-fade-zoom-out 1000ms ease both; }
    [data-carousel-effect="slide-x"][data-carousel-direction="next"] > .carousel-entering { animation: carousel-slide-x-next-in 650ms ease both; }
    [data-carousel-effect="slide-x"][data-carousel-direction="next"] > .carousel-leaving { animation: carousel-slide-x-next-out 650ms ease both; }
    [data-carousel-effect="slide-x"][data-carousel-direction="previous"] > .carousel-entering { animation: carousel-slide-x-previous-in 650ms ease both; }
    [data-carousel-effect="slide-x"][data-carousel-direction="previous"] > .carousel-leaving { animation: carousel-slide-x-previous-out 650ms ease both; }
    [data-carousel-effect="slide-y"][data-carousel-direction="next"] > .carousel-entering { animation: carousel-slide-y-next-in 650ms ease both; }
    [data-carousel-effect="slide-y"][data-carousel-direction="next"] > .carousel-leaving { animation: carousel-slide-y-next-out 650ms ease both; }
    [data-carousel-effect="slide-y"][data-carousel-direction="previous"] > .carousel-entering { animation: carousel-slide-y-previous-in 650ms ease both; }
    [data-carousel-effect="slide-y"][data-carousel-direction="previous"] > .carousel-leaving { animation: carousel-slide-y-previous-out 650ms ease both; }
}

@keyframes carousel-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes carousel-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes carousel-fade-zoom-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes carousel-fade-zoom-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.025); } }
@keyframes carousel-slide-x-next-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes carousel-slide-x-next-out { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes carousel-slide-x-previous-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes carousel-slide-x-previous-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes carousel-slide-y-next-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes carousel-slide-y-next-out { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes carousel-slide-y-previous-in { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes carousel-slide-y-previous-out { from { transform: translateY(0); } to { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
    [xtype="imagecarosello"] > [data-carousel-item] { animation: none !important; }
}