/*
 * Schermata di caricamento fra una pagina e l'altra.
 *
 * Il logo resta fermo dentro un cerchio bianco mentre un anello gira intorno;
 * sotto compare la scritta "Caricamento in corso". Il velo copre la pagina
 * finché il contenuto non è pronto, poi sfuma.
 */

.ip-preloader {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    /* Le due tinte della schermata di caricamento. Hanno una voce propria
       nella palette, cosi' si puo' dare al caricamento un colore diverso da
       quello del resto del sito.

       Senza quella voce si torna a come stavano prima: l'anello del colore
       principale, il velo nel blu chiarissimo del marchio - lo stesso fondo
       della pagina di manutenzione. */
    --ip-caricamento-tinta: var(--ip-preloader-cerchio, var(--ip-green, #2d8a47));
    --ip-caricamento-fondo: var(--ip-preloader-sfondo, var(--ip-navy-light, #eceaf9));

    /* Un velo, non una tinta piena: sotto si deve intravedere la pagina che
       sta arrivando. La trasparenza si ottiene mescolando la tinta chiara
       della palette con il trasparente. */
    background: color-mix(in srgb, var(--ip-caricamento-fondo) 82%, transparent);
    opacity: 1;
    transition: opacity .45s ease, visibility .45s ease;
}

/* A caricamento finito il velo sparisce e non intercetta più i clic. */
.ip-preloader.is-nascosto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ip-preloader__cerchio {
    position: relative;
    width: 148px;
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cornice del cerchio: una traccia chiara sempre presente e, sopra, un arco
   verde che le gira intorno per tutto il caricamento. */
.ip-preloader__anello {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid rgba(0, 0, 0, .08);
    border-top-color: var(--ip-caricamento-tinta);
    border-right-color: var(--ip-caricamento-tinta);
    animation: ip-preloader-giro 1.05s linear infinite;
}

/* Dove il ritaglio circolare è disponibile la cornice diventa una scia che
   sfuma, più morbida del semplice bordo colorato. */
@supports ((mask: radial-gradient(#000, #000)) or (-webkit-mask: radial-gradient(#000, #000))) {
    .ip-preloader__anello {
        border-color: rgba(0, 0, 0, .08);
        animation: none;
    }

    .ip-preloader__anello::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        /* La scia passa dal trasparente alla tinta piena: cosi' segue la
           palette senza dover mescolare colori, che non tutti i browser
           sanno fare. */
        background: conic-gradient(from 0turn,
            transparent 0turn,
            transparent .30turn,
            var(--ip-caricamento-tinta) .70turn,
            var(--ip-caricamento-tinta) 1turn);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
        animation: ip-preloader-giro .9s linear infinite;
    }
}

.ip-preloader__disco {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: var(--ip-superficie, #ffffff);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.ip-preloader__logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ip-preloader__testo {
    margin: 0;
    /* Il fondo adesso e' chiaro: il testo bianco non si sarebbe letto. */
    color: var(--ip-navy-title, #1e2b5c);
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .04em;
}

/* I tre puntini che seguono la scritta. */
.ip-preloader__puntini {
    display: inline-block;
    width: 18px;
    text-align: left;
}

.ip-preloader__puntini::after {
    content: "";
    animation: ip-preloader-puntini 1.2s steps(4, end) infinite;
}

@keyframes ip-preloader-giro {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ip-preloader-puntini {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}

@media (max-width: 575.98px) {
    .ip-preloader__cerchio {
        width: 120px;
        height: 120px;
    }

    .ip-preloader__disco {
        width: 94px;
        height: 94px;
        padding: 11px;
    }
}

/* Chi preferisce meno animazioni vede comunque l'anello girare, perché è il
   segnale che il caricamento è in corso: gira solo più lentamente. */
@media (prefers-reduced-motion: reduce) {
    .ip-preloader__anello,
    .ip-preloader__anello::after {
        animation-duration: 2.2s;
    }

    .ip-preloader__puntini::after {
        content: "...";
        animation: none;
    }
}