/**
 * Saba Animations - CSS scroll-driven (2026)
 * Version: 2.0
 *
 * Logica:
 * - Il contenuto è SEMPRE visibile di default. L'animazione è un enhancement
 *   che si applica solo se il browser supporta le scroll-driven animations
 *   (`animation-timeline: view()`) E l'utente non ha chiesto meno movimento.
 * - Zero JavaScript: nessun IntersectionObserver, nessun listener di scroll.
 *   Gira off-main-thread → fluido anche in scroll rapido.
 * - Browser senza supporto o reduced-motion → nessun effetto, contenuto pieno.
 */

/* Enhancement: attivo solo dove supportato e gradito */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {

        .saba-fade-in,
        .saba-slide-up,
        .saba-slide-left,
        .saba-slide-right,
        .saba-zoom-in,
        .saba-bounce-in {
            animation-timeline: view();
            /* L'elemento completa l'entrata poco dopo essere apparso: gli elementi
               già visibili al caricamento risultano subito allo stato finale.
               Con una view-timeline la progressione è guidata dallo scroll, non
               dal tempo: nessuna animation-duration necessaria. */
            animation-range: entry 0% cover 30%;
            animation-fill-mode: both;
            animation-timing-function: ease-out;
        }

        .saba-fade-in     { animation-name: saba-fade; }
        .saba-slide-up    { animation-name: saba-slide-up; }
        .saba-slide-left  { animation-name: saba-slide-left; }
        .saba-slide-right { animation-name: saba-slide-right; }
        .saba-zoom-in     { animation-name: saba-zoom; }
        .saba-bounce-in   { animation-name: saba-bounce; }

        @keyframes saba-fade {
            from { opacity: 0; transform: translateY(1.5rem); }
            to   { opacity: 1; transform: none; }
        }
        @keyframes saba-slide-up {
            from { opacity: 0; transform: translateY(3rem); }
            to   { opacity: 1; transform: none; }
        }
        @keyframes saba-slide-left {
            from { opacity: 0; transform: translateX(-3rem); }
            to   { opacity: 1; transform: none; }
        }
        @keyframes saba-slide-right {
            from { opacity: 0; transform: translateX(3rem); }
            to   { opacity: 1; transform: none; }
        }
        @keyframes saba-zoom {
            from { opacity: 0; transform: scale(0.9); }
            to   { opacity: 1; transform: none; }
        }
        @keyframes saba-bounce {
            0%   { opacity: 0; transform: scale(0.6); }
            60%  { opacity: 1; transform: scale(1.03); }
            100% { opacity: 1; transform: scale(1); }
        }
    }
}

/* Editor Gutenberg: nessuna animazione, mostra sempre lo stato finale + etichetta */
.block-editor .saba-fade-in,
.block-editor .saba-slide-up,
.block-editor .saba-slide-left,
.block-editor .saba-slide-right,
.block-editor .saba-zoom-in,
.block-editor .saba-bounce-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.block-editor .saba-fade-in::before,
.block-editor .saba-slide-up::before,
.block-editor .saba-slide-left::before,
.block-editor .saba-slide-right::before,
.block-editor .saba-zoom-in::before,
.block-editor .saba-bounce-in::before {
    content: "🎬 Animazione: " attr(class);
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 123, 255, 0.9);
    color: white;
    padding: 2px 8px;
    font-size: 11px;
    z-index: 999;
    pointer-events: none;
    border-radius: 0 0 4px 0;
    font-family: monospace;
}