/**
 * RW Gutenberg Animations - Animations CSS
 * Version: 3.0.1
 * 
 * Stili per supportare le animazioni del plugin
 * Posiziona in: assets/css/animations.css
 */

/* Previeni flash di contenuto non animato */
.animate {
    opacity: 0;
}

/* Quando animazione è attiva o completata */
.animate.is-animate {
    opacity: 1;
}

/* Eccezioni: elementi che NON devono avere opacity:0 sul contenitore */

/* Change-bg non ha animazioni visive, deve essere sempre visibile */
.animate[data-animation="change-bg"] {
    opacity: 1 !important;
}

/* Text-reveal con scope children: anima i figli, non il contenitore */
.animate[data-scope="children"] {
    opacity: 1 !important;
}

.animate[data-scope="children"] > * {
    opacity: 0;
}

.animate[data-scope="children"].is-animate > * {
    opacity: 1;
}

/* Text-reveal children - le lettere gestiscono la loro opacity */
.animate[data-animation="text-reveal"][data-scope="children"] span.reveal {
    opacity: 0;
}

.animate[data-animation="text-reveal"][data-scope="children"].is-animate span.reveal {
    opacity: 1;
}

/* Smooth scroll per una migliore esperienza */
html {
    scroll-behavior: smooth;
}

/* Supporto per reduced motion (accessibilità) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Ottimizzazioni hardware acceleration */
.animate {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ==================== TEXT REVEAL ==================== */

/* Text Reveal - Modalità Children (lettere) */
.animate[data-animation="text-reveal"][data-scope="children"] span.reveal {
    display: inline-block;
    vertical-align: baseline;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Text Reveal - Modalità Self (mask) */
.animate[data-animation="text-reveal"][data-scope="self"] {
    /* Lo stile viene applicato via JavaScript per creare la struttura wrapper */
}

/* Assicurati che i wrapper text-reveal non causino problemi di layout */
.animate[data-animation="text-reveal"] > span {
    display: block;
    overflow: hidden;
}

.animate[data-animation="text-reveal"] > span > span {
    display: block;
}

/* ==================== FADE ANIMATION ==================== */

/* Fade con direzioni - gli stili iniziali vengono applicati via JS */
.animate[data-animation="fade"] {
    transition-property: opacity, transform;
}

/* ==================== SCALE ANIMATION ==================== */

.animate[data-animation="scale"] {
    transition-property: opacity, transform;
}

/* ==================== ROTATE ANIMATION ==================== */

.animate[data-animation="rotate"] {
    transition-property: opacity, transform;
}

/* ==================== STAGGER ANIMATIONS ==================== */

/* Quando scope="children", i figli vengono animati con delay incrementale */
.animate[data-scope="children"] > * {
    /* Il delay viene applicato via JavaScript in base all'indice */
}

/* ==================== UTILITY CLASSES ==================== */

/* Forza l'animazione al caricamento della pagina */
.animate-on-load {
    /* Gestito via JavaScript */
}

/* Previeni wrap per lettere in text-reveal */
.reveal {
    white-space: pre;
}

/* ==================== PERFORMANCE ==================== */

/* will-change viene gestito dinamicamente via JS per migliori performance */
/* Viene aggiunto solo durante l'animazione e rimosso dopo */

/* ==================== RESPONSIVE ==================== */

/* Riduci distanza animazioni su mobile per migliore visualizzazione */
@media (max-width: 768px) {
    .animate[data-animation="fade"],
    .animate[data-animation="text-reveal"] {
        /* La distanza viene gestita via data-distance, ma puoi sovrascrivere qui se necessario */
    }
}

/* ==================== PRINT ==================== */

/* Disabilita animazioni in stampa */
@media print {
    .animate {
        opacity: 1 !important;
        transform: none !important;
    }
    
    .animate[data-animation="text-reveal"] > span,
    .animate[data-animation="text-reveal"] > span > span {
        transform: none !important;
    }
}

/* ==================== DEBUGGING (opzionale) ==================== */

/* Decommentare per visualizzare i bordi degli elementi animati durante lo sviluppo */
/*
.animate {
    outline: 1px dashed rgba(255, 0, 0, 0.3);
}

.animate[data-animation="text-reveal"] > span {
    outline: 1px dashed rgba(0, 255, 0, 0.3);
}

.animate[data-animation="text-reveal"] > span > span {
    outline: 1px dashed rgba(0, 0, 255, 0.3);
}
*/