/* ============================================================
   Home (page-home.php, poi front-page.php)
   Caricato da mc_enqueue_servizi_assets() dopo servizi.css.
   ============================================================ */


/* --- Hero ----------------------------------------------------
   Azzurro della home, testo scuro. overflow nascosto perché l'alone blu
   esce dal riquadro della foto di proposito.
   ------------------------------------------------------------ */
.mc-home-hero {
    background: #e2f2ff;
    overflow: hidden;
}

.mc-home-hero__media {
    position: relative;
}

.mc-home-hero__foto {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
    max-width: 100%;
    height: auto;
}

/* L'alone blu dietro la foto: era un div con gli stili inline. */
.mc-home-hero__blob {
    position: absolute;
    z-index: 1;
    left: -100px;
    top: 100px;
    width: 600px;
    height: 400px;
    border-radius: 50%;
    background: rgb(0 125 249 / 50%);
    filter: blur(84px);
    pointer-events: none;
}

/* Titolo grande come sulla home di oggi.
   In header.php la regola è « .home .uk-heading-medium { font-size: 3.9rem } »
   sopra i 1200px, e .home è la classe che WordPress mette sul body solo
   della pagina iniziale: sulla pagina di prova non c'è, e il titolo scendeva
   a 3.2rem. Qui la stessa misura, agganciata alla hero e non al body. */
@media (min-width: 1200px) {
    .mc-home-hero h1 {
        font-size: 3.9rem;
    }
}

/* Titolo: la parte in corsivo prende il gradiente blu.
   Stessa regola di css/pagine/dati-creativita.css, che qui non è caricato. */
.text-gradient-blu em,
.text-gradient-blu i {
    background-image: linear-gradient(45deg, #004285, #007df9 50%, #8fcdff);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    padding: 0 .1em;
}

.mc-home-hero__badge {
    color: #222;
}

/* I tre badge come sono oggi sul sito: bianchi, testo scuro, piccoli.
   Sul sito la regola sta nel CSS globale del tema; qui è ripetuta con il
   selettore della hero, così il template non dipende da dove sta quella. */
.mc-home-hero__badge .uk-badge {
    display: inline;
    background: #fff;
    color: #222;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    padding: 4px 8px;
    border-radius: 6px;
    min-width: 0;
    height: auto;
}

/* Ingresso del testo in hero: da CSS e non da scrollspy, così niente
   resta nascosto in attesa del JavaScript sopra la piega. */
.mc-home-hero__testo > * {
    animation: mc-entra .7s ease-out both;
}
.mc-home-hero__testo > :nth-child(1) { animation-delay: .05s; }
.mc-home-hero__testo > :nth-child(2) { animation-delay: .18s; }
.mc-home-hero__testo > :nth-child(3) { animation-delay: .30s; }
.mc-home-hero__testo > :nth-child(4) { animation-delay: .42s; }

@keyframes mc-entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}


/* --- Subliqua -----------------------------------------------
   Card larga azzurra dentro la sezione bianca. Rotondità e bordo del
   sistema: 14px, 1px solid #e8eef5.
   ------------------------------------------------------------ */
.mc-subliqua {
    background: #e2f2ff;
    border: 1px solid #e8eef5;
    border-radius: 14px;
    padding: 40px 32px;
}

@media (min-width: 960px) {
    .mc-subliqua {
        padding: 56px 64px;
    }
}

/* Sotto 960px le due colonne si impilano. uk-grid è una classe e non
   l'attributo JS, quindi il margine verticale fra le colonne non arriva da
   UIkit: lo mette questa regola, altrimenti il bottone tocca il testo. */
@media (max-width: 959px) {
    .mc-subliqua [class*="uk-width-1-3"] {
        margin-top: 28px;
    }
}

/* Il nome scritto a lettere, finché non c'è il logo. */
.mc-subliqua__nome {
    color: #007df9;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700;
}

/* La goccia sopra il bottone: 300x300 servita a 110px. */
.mc-subliqua__goccia {
    display: block;
    width: 110px;
    height: auto;
    margin: 0 auto 18px;
}

/* Wordmark 520x74: si governa in larghezza, l'altezza segue.
   400px su desktop fanno 57px di altezza; su mobile si stringe da sola. */
.mc-subliqua__logo {
    width: 100%;
    max-width: 400px;
    height: auto;
}

/* I passaggi in blu dentro il banner.
   Blu #0063c6 e non #007df9 del marchio: sul fondo #e2f2ff della card il blu
   del marchio sta a 3,47:1, sotto la soglia AA per un testo di questa misura.
   Questo sta a 5,10:1 e passa. È lo stesso blu scuro che le varianti della
   libreria usano già come colore_dark, quindi non è un colore inventato.

   Niente grassetto qui: il blu e il grassetto sono due enfasi diverse, se si
   sovrappongono la gerarchia si appiattisce e non si capisce più cosa
   distingue un passaggio dall'altro. */
.mc-subliqua__chiave {
    color: #0063c6;
}


/* --- Linea del tempo ----------------------------------------
   Pallino blu con l'opacità che cresce tappa dopo tappa, filo grigio del
   bordo di sistema fra una tappa e l'altra.
   ------------------------------------------------------------ */
.mc-timeline {
    list-style: none;
    margin: 0;
    padding: 24px 0;
    width: 100%;
    max-width: 340px;
}

.mc-timeline__tappa {
    position: relative;
    padding: 0 0 28px 38px;
}

.mc-timeline__tappa:last-child {
    padding-bottom: 0;
}

/* il pallino */
.mc-timeline__tappa::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #007df9;
}

.mc-timeline__tappa:nth-child(1)::before { opacity: .35; }
.mc-timeline__tappa:nth-child(2)::before { opacity: .55; }
.mc-timeline__tappa:nth-child(3)::before { opacity: .75; }
.mc-timeline__tappa:nth-child(4)::before { opacity: 1; }

/* il filo */
.mc-timeline__tappa::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 28px;
    bottom: 6px;
    width: 2px;
    background: #e8eef5;
}

.mc-timeline__tappa:last-child::after {
    display: none;
}

.mc-timeline__anno,
.mc-timeline__titolo,
.mc-timeline__ente {
    display: block;
}

.mc-timeline__anno {
    font-size: 13px;
    font-weight: 500;
    color: #888;
    margin-bottom: 4px;
}

.mc-timeline__titolo {
    font-size: 17px;
    font-weight: 600;
    color: #222;
    margin-bottom: 4px;
}

.mc-timeline__ente {
    font-size: 14px;
    color: #888;
}


/* --- Movimento ridotto --------------------------------------
   Chi lo chiede al sistema non vede i caroselli che scorrono, e le
   animazioni di ingresso saltano al fotogramma finale.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .mc-home-hero__testo > *,
    .logo-list.tool,
    .logo-list.progetti {
        animation: none !important;
    }

    .uk-animation-slide-bottom-small,
    .uk-animation-slide-left-small,
    .uk-animation-slide-top-small,
    .uk-animation-fade {
        animation-duration: .01ms !important;
    }
}