/* Stile per il contenitore di anteprima */
.slider-preview-container {
    display: flex;
    align-items: center;
    height: 450px;
    max-height: 450px;
    margin-bottom: 50px;
}

.slider-preview-container .preview-title, .slider-preview-container .preview-image-wrapper, .slider-preview-container .preview-text {
    flex: 1;
    height: 272px;
    display: flex;
    align-items: center;
    padding:24px;
}

/* Stile per la timeline */
.timeline-slider {
    position: relative;
    padding: 20px 0;
}

.timeline-item {
    text-align: left;
    cursor: pointer;
    display: block;
}
.timeline-item::before{
    content:"";
    width:100%; height: 100px;
    display: block;
    position: absolute;
    top:0;
    left: 0;
    z-index: 20000;
}



/* Esempio icone per categoria */

.timeline-item p{display:block; width:100%; text-align: left; transition: color 0.7s;}

.timeline-icon{text-align: left; border-left:1px solid #180910; transition: border-left 0.7s;  padding: 8px 0px 8px 11px; }
.swiper-slide:hover .timeline-icon{border-left: 1px solid #913662;}
.swiper-slide:hover p{color: #913662 !important;}

.timeline-icon.category-icon-castelli::before {
    content:"";
    background-color: #180910;
    -webkit-mask-image: url('http://lestradedelvino.net/wp-content/uploads/2025/09/Icon-Castello.svg');
    mask-image: url('http://lestradedelvino.net/wp-content/uploads/2025/09/Icon-Castello.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: block;
    width:30px;
    height:31px;
    transition: background-color 0.7s;
}
.swiper-slide:hover .timeline-icon.category-icon-castelli::before {
    background-color: #913662 !important;
}

.timeline-icon.category-icon-cantine::before {
    content: "";
    background-color: #180910;
    -webkit-mask-image: url('http://lestradedelvino.net/wp-content/uploads/2025/09/Icon-Cantina.svg');
     mask-image: url('http://lestradedelvino.net/wp-content/uploads/2025/09/Icon-Cantina.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: block;
    width: 20px;
    height: 28px;
    transition: background-color 0.7s;
}
.swiper-slide:hover .timeline-icon.category-icon-cantine::before {
    background-color: #913662 !important;
}

.timeline-title{
    	color: #180910;
        font-family: "Playfair Display", Sans-serif;
        font-size: 1.4rem;
        text-align: left;
        font-style: normal;
        font-weight: 400;
        margin: 0 0 10px 0;
        transition: color 2s;
}

.swiper-slide:hover .timeline-title{color:#913662;}

.box-arrows{border-bottom:1px solid #180910; margin-bottom: -56px;}

.swiper-button-next, .swiper-button-prev{bottom:0px; margin-top:24px;}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after{display:none;}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after{display: none;}




/* ====================================
   Animazione generale per TESTO
   ==================================== */
@keyframes text-slide-up { /* RINOMINATA per chiarezza */
    from {
        opacity: 0;
        /* Scorre per l'intera altezza dell'elemento */
        transform: translateY(40px); 
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====================================
   Nuova Animazione per IMMAGINE
   ==================================== */
@keyframes image-slide-up {
    from {
        opacity: 0;
        /* Scorre solo di 20 pixel (meno distanza) */
        transform: translateY(20px); 
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Regole per gli elementi di preview */
#preview-title,
#preview-excerpt, 
#preview-image {
    /* Necessario per nascondere il contenuto che sta 'fuori' durante l'animazione */
    /*overflow: hidden;*/
    /* Impostazioni iniziali generiche (saranno sovrascritte) */
     transition: opacity 0.s ease-in-out;  
}

/* ====================================
   Classe che attiva l'animazione di entrata (.slide-in)
   ==================================== */
.slide-in {
    /* Curva di fluidità comune a tutti */
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Applica l'animazione del TESTO */
#preview-title.slide-in,
#preview-excerpt.slide-in {
    animation-name: text-slide-up;
}

/* Applica l'animazione dell'IMMAGINE */
#preview-image.slide-in {
    animation-name: image-slide-up; /* USA LA NUOVA ANIMAZIONE */
}

#photoswipe-fullscreen-dialog{display: none !important;}