/**
 * Component: scroll-slider
 * Hero "pinned": la pagina resta ferma mentre lo scroll (wheel/touch) fa avanzare
 * le slide dal basso verso l'alto, una alla volta. Raggiunta l'ultima slide lo
 * scroll torna a scorrere normalmente la pagina (e viceversa risalendo).
 *
 * Degrada con grazia: senza JS o con prefers-reduced-motion le slide restano
 * impilate in flusso normale (scroll classico).
 *
 * HTML atteso:
 * <div class="scroll-slider">
 *   <div class="scroll-slider-sticky">
 *     <div class="scroll-slider-track">
 *       <div class="scroll-slider-slide">…</div> …
 *     </div>
 *     <div class="scroll-slider-cue">…Scorri per scoprire…</div>
 *   </div>
 * </div>
 */

.scroll-slider { position: relative; }
.scroll-slider-track { display: block; }
.scroll-slider-slide {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
}

/* --- Modalità "pinned" (JS attivo + motion consentito) --- */
.scroll-slider.is-pinned {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.scroll-slider.is-pinned .scroll-slider-sticky {
    position: relative;
    height: 100%;
}
.scroll-slider.is-pinned .scroll-slider-track {
    transition: transform .7s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.scroll-slider.is-pinned .scroll-slider-slide {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

/* --- Indicatore "Scorri per scoprire" --- */
.scroll-slider-cue {
    position: absolute;
    right: 28px;
    bottom: 40px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--website-third, #FFF5E2);
    font-size: 1rem;
    pointer-events: none;
    transition: opacity .3s ease;
}
.scroll-slider:not(.is-pinned) .scroll-slider-cue { display: none; }
.scroll-slider-cue-icon {
    display: inline-flex;
    animation: scroll-slider-bounce 1.8s ease-in-out infinite;
}

@keyframes scroll-slider-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-slider-cue-icon { animation: none; }
}

@media (max-width: 575.98px) {
    .scroll-slider-cue { right: 18px; bottom: 28px; font-size: .9rem; }
}