/* =========================================================================
   Movimento del sito.

   Tutto quel che si muove sta qui, in un foglio solo: si legge in una
   volta, e si spegne in una volta.

   Le regole che valgono per tutto:
     - durate fra 120 e 450 millesimi, mai oltre: sopra si percepisce attesa;
     - solo opacita' e trasformazioni, che girano sulla scheda grafica e non
       fanno ricalcolare la pagina;
     - niente che parta da solo, tranne il carosello, che ha il suo pulsante
       di pausa;
     - chi ha chiesto meno movimento al sistema operativo non ne vede
       nessuno: e' in fondo al file, ed e' l'ultima parola.
   ========================================================================= */

:root {
    --moto-svelto: 150ms;
    --moto-medio: 260ms;
    --moto-lento: 420ms;
    /* parte decisa, arriva morbida: e' la curva del design system */
    --moto-curva: cubic-bezier(.2, 0, .2, 1);
}


/* ==========================================================
   Carosello: le slide si sostituiscono in dissolvenza

   Bootstrap Italia dichiarava una transizione sullo scorrimento
   orizzontale, ma le slide si scambiavano con display:none e la
   transizione non partiva mai: il cambio era un taglio secco.
   Qui stanno tutte nella stessa cella di griglia, una sopra
   l'altra, e cambia solo l'opacita'.
   ========================================================== */
.widget-banner .carousel-inner {
    display: grid;
}

.widget-banner .carousel-item,
.widget-banner.carousel .carousel-item {
    grid-area: 1 / 1;
    display: block;
    float: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* nascosta anche alla tastiera e ai lettori di schermo: senza, i
       collegamenti delle slide sotto restano raggiungibili con il tab */
    visibility: hidden;
    transition: opacity var(--moto-lento) var(--moto-curva), visibility 0s linear var(--moto-lento);
}

    .widget-banner .carousel-item.active,
    .widget-banner.carousel .carousel-item.active {
        display: block;
        opacity: 1;
        visibility: visible;
        z-index: 1;
        transition: opacity var(--moto-lento) var(--moto-curva), visibility 0s;
    }


/* ==========================================================
   Accesso rapido: le tessere rispondono al passaggio

   Erano sei riquadri inerti: nessun bordo che si accende,
   nessun segno di essere cliccabili.
   ========================================================== */
.card-teaser-icona {
    border: 1px solid transparent;
    transition: border-color var(--moto-svelto) var(--moto-curva),
                box-shadow var(--moto-svelto) var(--moto-curva);
}

    .card-teaser-icona:hover,
    .card-teaser-icona:focus-within {
        border-color: var(--ordine-primary, #b21717);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    }

.teaser-icona,
.teaser-simbolo img {
    transition: transform var(--moto-medio) var(--moto-curva);
}

.card-teaser-icona:hover .teaser-icona,
.card-teaser-icona:hover .teaser-simbolo img,
.card-teaser-icona:focus-within .teaser-icona,
.card-teaser-icona:focus-within .teaser-simbolo img {
    transform: scale(1.06);
}


/* ==========================================================
   Card con locandina: l'immagine respira

   Un ingrandimento appena percettibile dentro il riquadro,
   che resta della stessa misura.
   ========================================================== */
.locandina {
    overflow: hidden;
}

    .locandina img {
        transition: transform var(--moto-lento) var(--moto-curva);
    }

.card-wrapper:hover .locandina img,
.card:hover .locandina img,
.card:focus-within .locandina img {
    transform: scale(1.04);
}


/* ==========================================================
   Percorsi e schede: il filo si accende
   ========================================================== */
.profilo {
    transition: border-color var(--moto-svelto) var(--moto-curva),
                box-shadow var(--moto-svelto) var(--moto-curva);
}

    .profilo:hover,
    .profilo:focus-within {
        border-color: var(--ordine-primary, #b21717);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    }


/* ==========================================================
   Loghi degli enti: da grigi a colori

   La fascia era ferma. Niente scorrimento automatico - su un
   sito pubblico fa insegna commerciale e non si puo' fermare -
   ma il logo che si accende quando ci passi sopra dice che e'
   un collegamento.
   ========================================================== */
.striscia-loghi img {
    filter: grayscale(1);
    opacity: .75;
    transition: filter var(--moto-medio) var(--moto-curva),
                opacity var(--moto-medio) var(--moto-curva),
                transform var(--moto-medio) var(--moto-curva);
}

.striscia-loghi a:hover img,
.striscia-loghi a:focus-visible img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.04);
}


/* ==========================================================
   Micro-movimenti di sistema

   Non si notano; e' quel che distingue un sito curato da uno
   fermo.
   ========================================================== */

/* Le tendine del menu entrano invece di comparire di colpo */
.it-header-wrapper .dropdown-menu.show {
    animation: tendina-entra var(--moto-svelto) var(--moto-curva);
}

@keyframes tendina-entra {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* I bottoni cedono sotto il dito */
.btn:active {
    transform: scale(.985);
}

.btn {
    transition: transform 80ms var(--moto-curva),
                background-color var(--moto-svelto) var(--moto-curva),
                border-color var(--moto-svelto) var(--moto-curva),
                color var(--moto-svelto) var(--moto-curva);
}

/* La freccia del "leggi" accompagna il testo */
a.read-more .icon,
a.read-more svg {
    transition: transform var(--moto-svelto) var(--moto-curva);
}

a.read-more:hover .icon,
a.read-more:hover svg,
.card:hover a.read-more .icon,
.card:hover a.read-more svg {
    transform: translateX(3px);
}

/* Le voci degli elenchi documenti scorrono di un soffio */
.voce-documento .voce-documento-freccia {
    transition: transform var(--moto-svelto) var(--moto-curva);
}

.voce-documento:hover .voce-documento-freccia {
    transform: translateX(3px);
}


/* ==========================================================
   I blocchi entrano scorrendo

   Le classi le mette il javascript: se non parte, la pagina
   resta tutta visibile come sempre. Nascondere con il foglio
   di stile e scoprire con lo script lascerebbe pagine bianche
   a chi il javascript non ce l'ha.
   ========================================================== */
.anima {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--moto-lento) var(--moto-curva),
                transform var(--moto-lento) var(--moto-curva);
}

    .anima.in-vista {
        opacity: 1;
        transform: none;
    }

/* dentro il blocco, le schede arrivano una dopo l'altra */
.anima .anima-figlio {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--moto-medio) var(--moto-curva) var(--ritardo, 0ms),
                transform var(--moto-medio) var(--moto-curva) var(--ritardo, 0ms);
}

.anima.in-vista .anima-figlio {
    opacity: 1;
    transform: none;
}


/* ==========================================================
   La barra del menu si aggancia in alto

   Non si comprime la testata: schiacciare logo e barra di
   servizio mentre si scorre fa saltare la pagina e toglie
   pezzi di identita'. Si fa come nel design system: la testata
   scorre via per intero e resta agganciata la sola barra del
   menu, che nel frattempo si prende il marchio a sinistra.

   Cosi' non cambia nulla di forma, cambia solo dove sta: niente
   scatti, niente contenuti che spariscono, e il menu e' sempre
   a un dito di distanza su una pagina di tremila pixel.
   ========================================================== */
/* La testata intera e' agganciata, ma con il bordo alto in negativo: scorre
   via da sola fino a lasciare fuori la sola barra del menu, e li' si ferma.
   Di quanto salire lo dice il javascript, che misura la testata: dipende dal
   logo, dalla ricerca, dalla larghezza dello schermo.

   L'alternativa - agganciare la sola barra - non funziona: un elemento
   agganciato resta dentro il suo genitore, e il genitore qui e' alto 162px.
   Quella a posizione fissa avrebbe fatto saltare la pagina di un'altezza di
   testata nel momento in cui esce dal flusso. */
.it-header-wrapper {
    position: sticky;
    z-index: 1030;
    background: #fff;
    transition: box-shadow var(--moto-medio) var(--moto-curva);
}

    .it-header-wrapper.agganciata {
        box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    }

/* Il marchio non c'e' finche' la testata e' al suo posto: si apre
   da sinistra quando la barra si aggancia */
.marchio-agganciato {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width var(--moto-medio) var(--moto-curva),
                opacity var(--moto-svelto) var(--moto-curva),
                margin-right var(--moto-medio) var(--moto-curva);
}

    .marchio-agganciato img {
        height: 2.25rem;
        width: auto;
    }

.it-header-wrapper.agganciata .marchio-agganciato {
    max-width: 8rem;
    opacity: 1;
    margin-right: 1.25rem;
}

@media (max-width: 991.98px) {
    /* sugli schermi stretti la testata e' un solo bottone: agganciarla
       ruberebbe spazio alla lettura, che li' e' poco */
    .it-header-wrapper {
        position: relative;
        top: 0 !important;
    }

    .it-header-wrapper.agganciata .marchio-agganciato {
        max-width: 0;
        opacity: 0;
        margin-right: 0;
    }
}


/* ==========================================================
   Numeri dell'Ordine
   ========================================================== */
.fascia-numeri {
    background: var(--ordine-neutral-100, #f5f4f3);
    border-top: 1px solid var(--ordine-neutral-300, #dcdada);
    border-bottom: 1px solid var(--ordine-neutral-300, #dcdada);
}

.numero-voce {
    text-align: center;
}

.numero-cifra {
    display: block;
    color: var(--ordine-primary, #b21717);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    /* le cifre non ballano mentre salgono */
    font-variant-numeric: tabular-nums;
}

.numero-etichetta {
    display: block;
    margin-top: .35rem;
    color: var(--ordine-neutral-700, #555);
    font-size: .9375rem;
}

.numero-icona {
    display: block;
    margin-bottom: .5rem;
    color: var(--ordine-primary, #b21717);
    font-size: 1.5rem;
    opacity: .8;
}


/* ==========================================================
   Chi ha chiesto meno movimento non ne vede: ultima parola.

   Non e' un vezzo: il movimento sullo schermo puo' dare
   malessere a chi soffre di disturbi vestibolari, e le linee
   guida di accessibilita' chiedono di rispettare la scelta
   fatta nel sistema operativo.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .widget-banner .carousel-item {
        transition: none;
    }

    /* i blocchi restano dove sono, gia' visibili */
    .anima,
    .anima .anima-figlio {
        opacity: 1 !important;
        transform: none !important;
    }
}