/* ==================================================================
   FIX-ANIMATIONS.CSS
   File di override. DEVE essere caricato DOPO site.css nel _Layout.
   Contiene:
     1) Disattivazione animazioni/transform fastidiose sulle card
     2) Fix dello "scatto" da .fade-in-up (solo dissolvenza)
     3) Fix del testo che "salta"/diventa bold al load (FOUT di Inter)
   ================================================================== */


/* ==================================================================
   1) CARD — niente animazioni di entrata ne' transform, solo ombra
   ================================================================== */
.card,
.campaign-card,
.list-card,
.stat-card,
#resultsModal .card {
    animation: none !important;
    transform: none !important;
    transition: box-shadow 0.2s ease !important;
}

    .card:hover,
    .campaign-card:hover,
    .list-card:hover,
    .stat-card:hover,
    #resultsModal .card:hover,
    .btn-group .btn:hover {
        transform: none !important; /* niente scale/translate su hover */
    }

    .card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    }

/* Annulla anche lo stagger (ritardi) sulle griglie di card */
.col-md-6 .card,
.col-lg-4 .card,
.col-md-6:nth-child(1) .card,
.col-md-6:nth-child(2) .card,
.col-md-6:nth-child(3) .card,
.col-md-6:nth-child(4) .card,
.col-lg-4:nth-child(1) .card,
.col-lg-4:nth-child(2) .card,
.col-lg-4:nth-child(3) .card,
.col-lg-4:nth-child(4) .card {
    animation: none !important;
    animation-delay: 0s !important;
}

/* Pulsanti: niente scale al passaggio del mouse */
.btn:hover {
    transform: none !important;
}

/* Tabelle: solo cambio colore, niente movimento */
.table-hover tbody tr {
    transition: background-color 0.15s ease !important;
}

    .table-hover tbody tr:hover {
        transform: none !important;
    }


/* ==================================================================
   2) FADE-IN-UP — site.js aggiunge .fade-in-up via IntersectionObserver
      e alcune definizioni di @keyframes usano translateY(20px), che
      fa "saltellare" la pagina. Qui togliamo il movimento e teniamo
      solo una dissolvenza morbida.
   ================================================================== */
.fade-in-up,
.card.fade-in-up,
.stats-card.fade-in-up {
    transform: none !important;
    animation: crmFadeOnly 0.4s ease both !important;
}

@keyframes crmFadeOnly {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ==================================================================
   3) FOUT DI INTER — testo che si carica e poi diventa bold/si sposta.
      Confermato via document.fonts: la pagina usa 'Inter' nei pesi
      400/500/600/700. Prima che Inter arrivi, il testo e' disegnato
      con Segoe UI (proporzioni diverse); quando Inter subentra il
      testo - soprattutto i grassetti 600/700 - si riallarga e si sposta.

      Soluzione: un font di ripiego con metriche allineate a Inter
      (size-adjust + ascent/descent override applicati ad Arial, che
      su Windows e' sempre presente). Cosi' il testo di ripiego occupa
      GIA' lo stesso spazio di Inter e lo swap avviene senza scatti.

      IMPORTANTE: si imposta SOLO sul body. Titoli, grassetti e testo
      ereditano il font da qui (ed e' da li' che nasceva il reflow).
      NON si usa "body *": toccare ogni elemento rompe le icone
      (Font Awesome / Bootstrap Icons), che hanno un font proprio.
   ================================================================== */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    ascent-override: 90.49%;
    descent-override: 22.56%;
    line-gap-override: 0%;
    size-adjust: 107.06%;
}

body {
    font-family: 'Inter', 'Inter Fallback', 'Segoe UI', sans-serif !important;
}