/* =========================================================
   INIZIO CODICE SLIDER
   ========================================================= */



/* CONTENITORE */

#fullscreen-slider {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: transparent;
    isolation: isolate;
}

/* GRUPPI FOTOGRAFIE */

#fullscreen-slider .slider-group {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: 100%;
    width: 100%;
    max-width: 100%;
    height: max-content;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* GRUPPO DESKTOP */

#fullscreen-slider .slider-desktop {
    display: grid;
}

/* GRUPPO MOBILE */

#fullscreen-slider .slider-mobile {
    display: none;
}

/* FOTOGRAFIE */

#fullscreen-slider .slider-image {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;

    opacity: 0;
    visibility: visible;
    pointer-events: none;

    filter:
        brightness(1.02)
        contrast(1.03)
        saturate(1.06);

    transition:
        opacity var(--slider-duration, 1800ms) ease-in-out,
        transform var(--slider-duration, 1800ms) ease-in-out,
        filter var(--slider-duration, 1800ms) ease-in-out;

    will-change: opacity, transform;
}

/* FOTOGRAFIA ATTIVA */

#fullscreen-slider .slider-image.active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

/* FADE - DISSOLVENZA INCROCIATA */

#fullscreen-slider.transition-fade .slider-image {
    transform: scale(1);
    opacity: 0;
}

#fullscreen-slider.transition-fade .slider-image.active {
    transform: scale(1);
    opacity: 1;
    z-index: 2;
}

/* ZOOM */

#fullscreen-slider.transition-zoom .slider-image {
    transform: scale(1);
    opacity: 0;
}

#fullscreen-slider.transition-zoom .slider-image.active {
    transform: scale(1.035);
    opacity: 1;
    z-index: 2;
}

/* SLIDE ORIZZONTALE */

#fullscreen-slider.transition-slide .slider-group {
    position: relative;
    display: grid;
    overflow: hidden;
}

#fullscreen-slider.transition-slide .slider-image {
    grid-area: 1 / 1;
    transform: translate3d(100%, 0, 0);
    opacity: 1;
    z-index: 1;
    transition: none;
    pointer-events: none;
}

#fullscreen-slider.transition-slide .slider-image.active {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

/* CONTROLLO ACCESSIBILE */

#fullscreen-slider .slider-pause {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

#fullscreen-slider .slider-pause:focus-visible {
    top: 0.5208vw;
    left: 0.5208vw;
    width: auto;
    height: auto;
    padding: 0.625vw 0.9375vw;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    color: #fff;
    background: #000;
    border: 0.1042vw solid #fff;
    border-radius: 0.2083vw;
    cursor: pointer;
}


/* =========================================================
   FINE CODICE SLIDER
   ========================================================= */




/* =========================================================
   =========================================================
   MOBILE - INIZIO CODICE PER MOBILE
   =========================================================
   ========================================================= */





@media screen and (max-width: 767px) {


/* =========================================================
   INIZIO CODICE SLIDER
   ========================================================= */



    #fullscreen-slider .slider-desktop {
        display: none;
    }

    #fullscreen-slider .slider-mobile {
        display: grid;
    }

}

/* ACCESSIBILITÀ - RIDUZIONE ANIMAZIONI */

@media (prefers-reduced-motion: reduce) {

    #fullscreen-slider .slider-image {
        transition: none !important;
        transform: none !important;
        filter:
            brightness(1.02)
            contrast(1.03)
            saturate(1.06);
        will-change: auto;
    }



/* =========================================================
   FINE CODICE SLIDER
   ========================================================= */

}