/* ==========================================================================
   FONT AWESOME 7.2.0 - ANIMATIONS BACKPORT (CSS CORRECTION)
   ========================================================================== */

/* Proprietà strutturali di base condivise da tutte le animazioni */
.fa-beat, .fa-beat-fade, .fa-bounce, .fa-fade, .fa-flip, .fa-shake, .fa-spin, .fa-spin-pulse {
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing-function, linear);
}

/* Modificatori di direzione e velocità ufficiali */
.fa-spin-reverse {
    --fa-animation-direction: reverse;
}

.fa-animation-fast {
    --fa-animation-duration: 0.5s;
}

.fa-animation-slow {
    --fa-animation-duration: 2s;
}


/* 1. FA-FADE (Sbiadimento pulsante continuo) */
.fa-fade {
    animation-name: fa-fade;
}

@keyframes fa-fade {
    0%, 100% {
        opacity: var(--fa-fade-opacity, 0.4);
    }

    50% {
        opacity: 1;
    }
}

/* 2. FA-SPIN (Rotazione fluida continua a 360°) */
.fa-spin {
    animation-name: fa-spin;
    animation-duration: var(--fa-animation-duration, 2s);
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 3. FA-SPIN-PULSE (Rotazione a scatti in 8 passaggi discreti) */
.fa-spin-pulse {
    animation-name: fa-spin;
    animation-duration: var(--fa-animation-duration, 2s);
    animation-timing-function: steps(8);
}

/* 4. FA-BEAT (Effetto battito cardiaco / Ridimensionamento) */
.fa-beat {
    animation-name: fa-beat;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes fa-beat {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(var(--fa-beat-scale, 1.25));
    }
}

/* 5. FA-BEAT-FADE (Combinazione nativa di battito e sbiadimento) */
.fa-beat-fade {
    animation-name: fa-beat-fade;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes fa-beat-fade {
    0%, 100% {
        opacity: var(--fa-beat-fade-opacity, 0.4);
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(var(--fa-beat-fade-scale, 1.125));
    }
}

/* 6. FA-BOUNCE (Sobbalzo elastico verticale dall'alto verso il basso) */
.fa-bounce {
    animation-name: fa-bounce;
    animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
}

@keyframes fa-bounce {
    0%, 100% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(var(--fa-bounce-height, -0.25em)) scaleX(var(--fa-bounce-start-scale-x, 1)) scaleY(var(--fa-bounce-start-scale-y, 1));
    }

    30% {
        transform: translateY(var(--fa-bounce-height, -0.25em)) scaleX(var(--fa-bounce-jump-scale-x, 1)) scaleY(var(--fa-bounce-jump-scale-y, 1));
    }

    50% {
        transform: translateY(0) scaleX(var(--fa-bounce-land-scale-x, 1)) scaleY(var(--fa-bounce-land-scale-y, 1));
    }

    57% {
        transform: translateY(var(--fa-bounce-rebound, -0.05em)) scaleX(1) scaleY(1);
    }

    64% {
        transform: translateY(0) scaleX(1) scaleY(1);
    }
}

/* 7. FA-SHAKE (Scuotimento orizzontale rapido per errori o avvisi) */
.fa-shake {
    animation-name: fa-shake;
}

@keyframes fa-shake {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(var(--fa-shake-width, -0.0625em));
    }

    20%, 40%, 60%, 80% {
        transform: translateX(var(--fa-shake-width, 0.0625em));
    }
}

/* 8. FA-FLIP (Rotazione tridimensionale sull'asse X, Y o diagonale) */
.fa-flip {
    animation-name: fa-flip;
    animation-duration: var(--fa-animation-duration, 1.5s);
    animation-timing-function: ease-in-out;
}

@keyframes fa-flip {
    0% {
        transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), 0deg);
    }

    100% {
        transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), 360deg);
    }
}

/* ==========================================================================
   FONT AWESOME 7.2.0 - HOVER ANIMATIONS COMPONENT (PSEUDO-ELEMENTS FIX)
   ========================================================================== */
/* 1. INIZIALIZZAZIONE GLOBALE (Valida sia per il tag <i> sia per i suoi componenti interni) */
.fa-beat-hover, .fa-beat-fade-hover, .fa-bounce-hover, .fa-fade-hover,
.fa-flip-hover, .fa-shake-hover, .fa-spin-hover, .fa-spin-pulse-hover,
.fa-beat-hover::before, .fa-beat-fade-hover::before, .fa-bounce-hover::before, .fa-fade-hover::before,
.fa-flip-hover::before, .fa-shake-hover::before, .fa-spin-hover::before, .fa-spin-pulse-hover::before,
.fa-beat-hover::after, .fa-beat-fade-hover::after, .fa-bounce-hover::after, .fa-fade-hover::after,
.fa-flip-hover::after, .fa-shake-hover::after, .fa-spin-hover::after, .fa-spin-pulse-hover::after {
    animation-name: none !important;
    /*Immobili all'avvio animation-delay: var(--fa-animation-delay, 0s);*/
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: linear;
    display: inline-block !important;
    Forza la geometria tridimensionale
}

    /*2. DURATE E CURVE DI ACCELERAZIONE SPECIFICHE NATIVE */
    .fa-spin-hover, .fa-spin-pulse-hover, .fa-spin-hover::before, .fa-spin-pulse-hover::before {
        animation-duration: var(--fa-animation-duration, 2s);
    }

        .fa-spin-pulse-hover, .fa-spin-pulse-hover::before {
            animation-timing-function: steps(8);
        }

    .fa-beat-hover, .fa-beat-fade-hover, .fa-beat-hover::before, .fa-beat-fade-hover::before {
        animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }

    .fa-bounce-hover, .fa-bounce-hover::before {
        animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
    }

    .fa-flip-hover, .fa-flip-hover::before {
        animation-duration: var(--fa-animation-duration, 1.5s);
        animation-timing-function: ease-in-out;
    }

/*3. ATTIVAZIONE INDIRETTA (QUANDO PASSI IL MOUSE SULLA GRIGLIA O SUL LINKBUTTON) 
 Questa regola dice al browser di muovere i componenti interni ::before e ::after di TUTTE le icone composte */
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-fade-hover::before {
    animation-name: fa-fade !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-spin-hover::before {
    animation-name: fa-spin !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-spin-pulse-hover::before {
    animation-name: fa-spin !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-beat-hover::before {
    animation-name: fa-beat !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-beat-fade-hover::before {
    animation-name: fa-beat-fade !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-bounce-hover::before {
    animation-name: fa-bounce !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-shake-hover::before {
    animation-name: fa-shake !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-flip-hover::before {
    animation-name: fa-flip !important;
}

/*Estensione per icone multi-layer complesse con elementi duplicati */
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-bounce-hover::after {
    animation-name: fa-bounce !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-beat-hover::after {
    animation-name: fa-beat !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-beat-fade-hover::after {
    animation-name: fa-beat-fade !important;
}

/*4. ATTIVAZIONE DIRETTA (Se tocchi direttamente ed esclusivamente l'icona con il mouse) */
.fa-fade-hover:hover::before {
    animation-name: fa-fade !important;
}

.fa-spin-hover:hover::before {
    animation-name: fa-spin !important;
}

.fa-spin-pulse-hover:hover::before {
    animation-name: fa-spin !important;
}

.fa-beat-hover:hover::before {
    animation-name: fa-beat !important;
}

.fa-beat-fade-hover:hover::before {
    animation-name: fa-beat-fade !important;
}

.fa-bounce-hover:hover::before {
    animation-name: fa-bounce !important;
}

.fa-shake-hover:hover::before {
    animation-name: fa-shake !important;
}

.fa-flip-hover:hover::before {
    animation-name: fa-flip !important;
}

/* ==========================================================================
   FONT AWESOME 7.2.0 - SINGLE EVENT HOVER TRANSITIONS (IN/OUT SMOOTH FIX)
   ========================================================================== */
/* 1. INIZIALIZZAZIONE GLOBALE TRANSINIONI (Valida per <i>, ::before e ::after) */
.fa-grow-hover, .fa-shrink-hover, .fa-rotate-hover, .fa-bounce-once-hover,
.fa-flip-once-hover, .fa-fade-once-hover, .fa-shake-once-hover,
.fa-grow-hover::before, .fa-shrink-hover::before, .fa-rotate-hover::before, .fa-bounce-once-hover::before,
.fa-flip-once-hover::before, .fa-fade-once-hover::before, .fa-shake-once-hover::before,
.fa-grow-hover::after, .fa-shrink-hover::after, .fa-rotate-hover::after, .fa-bounce-once-hover::after,
.fa-flip-once-hover::after, .fa-fade-once-hover::after, .fa-shake-once-hover::after {
    display: inline-block !important;
    transition: transform var(--fa-transition-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1), opacity var(--fa-transition-duration, 0.3s) linear;
    transform: scale(1) rotate(0deg) translateY(0);
    opacity: 1;
}

    /* Curve di accelerazione specifiche per simulare i rimbalzi nativi */
    .fa-bounce-once-hover, .fa-bounce-once-hover::before {
        transition-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
    }

    .fa-flip-once-hover, .fa-flip-once-hover::before {
        transition-duration: var(--fa-transition-duration, 0.5s);
        transition-timing-function: ease-in-out;
    }

    /* ==========================================================================
   2. ATTIVAZIONE DIRETTA (Mouse sopra l'icona)
   ========================================================================== */

    /* BEAT / GROW (Si allarga) */
    .fa-grow-hover:hover, .fa-grow-hover:hover::before, .fa-grow-hover:hover::after {
        transform: scale(var(--fa-hover-scale, 1.15)) !important;
    }

    /* SHRINK (Si rimpicciolisce) */
    .fa-shrink-hover:hover, .fa-shrink-hover:hover::before, .fa-shrink-hover:hover::after {
        transform: scale(var(--fa-hover-scale, 0.8)) !important;
    }

    /* SPIN / ROTATE (Ruota - di base 15 gradi per un accenno elegante) */
    .fa-rotate-hover:hover, .fa-rotate-hover:hover::before, .fa-rotate-hover:hover::after {
        transform: rotate(var(--fa-hover-rotate, 15deg)) !important;
    }

    /* BOUNCE (Fa un piccolo balzo verso l'alto) */
    .fa-bounce-once-hover:hover, .fa-bounce-once-hover:hover::before, .fa-bounce-once-hover:hover::after {
        transform: translateY(var(--fa-hover-bounce, -0.25em)) !important;
    }

    /* FLIP (Si ribalta specchiandosi sull'asse Y) */
    .fa-flip-once-hover:hover, .fa-flip-once-hover:hover::before, .fa-flip-once-hover:hover::after {
        transform: scaleX(-1) !important;
    }

    /* FADE (Diventa parzialmente trasparente) */
    .fa-fade-once-hover:hover, .fa-fade-once-hover:hover::before, .fa-fade-once-hover:hover::after {
        opacity: var(--fa-hover-opacity, 0.4) !important;
    }

    /* SHAKE (Spostamento laterale per simulare lo scuotimento al passaggio) */
    .fa-shake-once-hover:hover, .fa-shake-once-hover:hover::before, .fa-shake-once-hover:hover::after {
        transform: translateX(var(--fa-hover-shake, 0.15em)) !important;
    }


/* ==========================================================================
   3. ATTIVAZIONE INDIRETTA (Mouse sopra il contenitore padre)
   ========================================================================== */
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-grow-hover,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-grow-hover::before,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-grow-hover::after {
    transform: scale(var(--fa-hover-scale, 1.15)) !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-shrink-hover,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-shrink-hover::before,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-shrink-hover::after {
    transform: scale(var(--fa-hover-scale, 0.8)) !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-rotate-hover,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-rotate-hover::before,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-rotate-hover::after {
    transform: rotate(var(--fa-hover-rotate, 15deg)) !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-bounce-once-hover,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-bounce-once-hover::before,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-bounce-once-hover::after {
    transform: translateY(var(--fa-hover-bounce, -0.25em)) !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-flip-once-hover,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-flip-once-hover::before,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-flip-once-hover::after {
    transform: scaleX(-1) !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-fade-once-hover,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-fade-once-hover::before,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-fade-once-hover::after {
    opacity: var(--fa-hover-opacity, 0.4) !important;
}

:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-shake-once-hover,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-shake-once-hover::before,
:is(a, button, .btn, .btn-link, .btn-hover-grow):hover .fa-shake-once-hover::after {
    transform: translateX(var(--fa-hover-shake, 0.15em)) !important;
}