/* ========================================
   ANIMAZIONI NATIVE - CSS + Intersection Observer
   ======================================== */

/* IMPORTANTE: Elementi SEMPRE visibili di default */
[data-animate] {
    opacity: 1 !important;
    /* Nessun transform di default - elementi visibili */
}

/* Quando l'animazione viene triggerata */
[data-animate].animate-in {
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

/* ========================================
   ANIMAZIONI DISPONIBILI
   ======================================== */

/* Fade Up - Appare dal basso */
[data-animate="fade-up"].animate-in {
    animation-name: fadeUp;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Down - Appare dall'alto */
[data-animate="fade-down"].animate-in {
    animation-name: fadeDown;
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Left - Appare da destra */
[data-animate="fade-left"].animate-in {
    animation-name: fadeLeft;
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade Right - Appare da sinistra */
[data-animate="fade-right"].animate-in {
    animation-name: fadeRight;
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade - Semplice dissolvenza */
[data-animate="fade"].animate-in {
    animation-name: fade;
}

@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Zoom In - Scala in ingrandimento */
[data-animate="zoom-in"].animate-in {
    animation-name: zoomIn;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Zoom Out - Scala in rimpicciolimento */
[data-animate="zoom-out"].animate-in {
    animation-name: zoomOut;
}

@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale(1.1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Flip Up - Rotazione sull'asse X */
[data-animate="flip-up"].animate-in {
    animation-name: flipUp;
}

@keyframes flipUp {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateX(45deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateX(0);
    }
}

/* Slide Up - Scivola verso l'alto */
[data-animate="slide-up"].animate-in {
    animation-name: slideUp;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   DURATE PERSONALIZZATE
   ======================================== */

[data-animate][data-animate-duration="fast"].animate-in {
    animation-duration: 0.4s;
}

[data-animate][data-animate-duration="slow"].animate-in {
    animation-duration: 1.2s;
}

[data-animate][data-animate-duration="very-slow"].animate-in {
    animation-duration: 1.6s;
}

/* ========================================
   EASING PERSONALIZZATI
   ======================================== */

[data-animate][data-animate-easing="bounce"].animate-in {
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[data-animate][data-animate-easing="smooth"].animate-in {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   RESPONSIVE - Disabilita su mobile se necessario
   ======================================== */

@media (max-width: 768px) {
    /* Su mobile, animazioni più veloci */
    [data-animate].animate-in {
        animation-duration: 0.5s;
    }
}

/* ========================================
   PREFERS REDUCED MOTION - Accessibilità
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    /* Se l'utente preferisce meno movimento, disabilita animazioni */
    [data-animate].animate-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}