/*
 * Le testate che arrivano (dalla 0.34.0, richiesta di Andreas del 17/10/2026).
 *
 * DUE COSE IN QUESTO FOGLIO.
 *
 * 1. IL MOVIMENTO, OVUNQUE. Su tutte le testate del sito i testi non compaiono
 *    di colpo: salgono dal basso, partendo sfocati, A CASCATA DALL'ULTIMO AL
 *    PRIMO. Sulla pagina di un autore entra prima la bio breve, poi il ruolo,
 *    poi il nome, per ultimo l'occhiello «Autore». L'occhio segue il
 *    movimento verso l'alto e si ferma sul titolo. Briciole, canali social e
 *    date arrivano per ultimi con lo stesso passo ma senza sfocatura: sono
 *    comandi, non titoli.
 *
 *    L'ordine non lo conta uno script: ogni elemento dichiara il suo passo in
 *    --in-passo (0 = parte per primo). Cosi' basta il CSS, e se qualcosa non
 *    carica nessun testo resta nascosto. Dove un elemento manca (un articolo
 *    senza sommario) la cascata parte un passo dopo: 110 millesimi, non si nota.
 *
 *    Chi ha chiesto al sistema di ridurre il movimento vede la pagina ferma.
 *
 * 2. LA TESTATA DEGLI AUTORI. Il ruolo sotto il nome era incollato al nome
 *    (margine negativo del Framework): ora ha la sua aria. I bottoni dei canali
 *    erano pillole tonde e chiare, l'unico elemento arrotondato della pagina e
 *    quasi invisibile: ora sono a spigolo vivo come tutto il resto, con un filo
 *    accent di 2 px sotto, e al passaggio si riempiono di accent.
 *
 * Il foglio arriva dopo quelli del Framework (functions.php, priorita' 20).
 */

/* ------------------------------------------------------------ il movimento */

:root {
    --in-cascata-durata: 760ms;
    --in-cascata-passo: 110ms;
    --in-cascata-attesa: 60ms;
    --in-cascata-salita: 22px;
    --in-cascata-sfocatura: 10px;
    --in-cascata-curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes in-cascata {
    from {
        opacity: 0;
        transform: translateY(var(--in-cascata-salita));
        filter: blur(var(--in-cascata-sfocatura));
    }
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* Comandi e date: la stessa salita, senza sfocatura. */
@keyframes in-cascata-netta {
    from {
        opacity: 0;
        transform: translateY(calc(var(--in-cascata-salita) / 2));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {

    /* --- chi si muove: tutti i testi delle testate ---------------------- */

    /* Articoli e archivi del Framework (autore, categorie, rubriche, serie). */
    .ief-single-hero-copy > .ief-kicker,
    .ief-single-hero-copy > h1,
    .ief-single-hero-copy > .ief-archive-subtitle,
    .ief-single-hero-copy > .ief-archive-stato,
    .ief-single-hero-copy > .ief-author-role,
    .ief-single-hero-copy > .ief-serie-segno,
    .ief-single-hero-copy > .ief-single-hero-excerpt,
    /* Pagine istituzionali del Framework. */
    .ief-pagina-testatina-dentro > .ief-pagina-distintivo,
    .ief-pagina-testatina-dentro > .ief-pagina-etichetta,
    .ief-pagina-testatina-dentro > .ief-pagina-titolo,
    .ief-pagina-testatina-dentro > .ief-pagina-lead,
    /* «Il filo» di un argomento e la mappa degli argomenti. */
    .in-filo-principale > .in-filo-occhiello,
    .in-filo-principale > .in-filo-nome,
    .in-filo-principale > .in-filo-frase,
    .in-filo-dentro > .in-filo-occhiello,
    .in-filo-dentro > .in-filo-nome,
    .in-filo-dentro > .in-filo-frase,
    .in-mappa-testa > div > .in-filo-occhiello,
    .in-mappa-testa > div > .in-mappa-titolo,
    .in-mappa-testa > div > .in-mappa-intro,
    .in-mappa-testa > div > .in-filo-frase,
    /* La pagina delle rubriche, Sostieni, la ricerca, il 404. */
    .in-pagina-testata > .in-pagina-titolo,
    .in-pagina-testata > .in-pagina-introduzione,
    .in-sostieni-pagina > .in-sostieni-occhiello,
    .in-elenco > .in-dentro > .in-elenco-titolo,
    .in-elenco > .in-vuoto > h1,
    .in-elenco > .in-vuoto > p {
        animation: in-cascata var(--in-cascata-durata) var(--in-cascata-curva) both;
        animation-delay: calc(var(--in-cascata-attesa) + var(--in-passo, 0) * var(--in-cascata-passo));
    }

    .ief-single-hero-copy > .ief-single-hero-breadcrumbs,
    .ief-single-hero-copy > .ief-author-social-links,
    .ief-pagina-testatina-dentro > .ief-pagina-briciole,
    .ief-pagina-testatina-dentro > .ief-pagina-data {
        animation: in-cascata-netta var(--in-cascata-durata) var(--in-cascata-curva) both;
        animation-delay: calc(var(--in-cascata-attesa) + var(--in-passo, 0) * var(--in-cascata-passo));
    }

    /* --- in che ordine: dall'ultimo testo (passo 0) al primo ------------- */

    /* Il testo che chiude la testata parte per primo. */
    .ief-single-hero-copy > .ief-single-hero-excerpt,
    .ief-pagina-testatina-dentro > .ief-pagina-lead,
    .in-filo-principale > .in-filo-frase,
    .in-filo-dentro > .in-filo-frase,
    .in-mappa-testa > div > .in-mappa-intro,
    .in-mappa-testa > div > .in-filo-frase,
    .in-pagina-testata > .in-pagina-introduzione,
    .in-elenco > .in-vuoto > p { --in-passo: 0; }

    /* Cio' che sta fra titolo e testo: ruolo, sottotitolo, stato, serie. */
    .ief-single-hero-copy > .ief-author-role,
    .ief-single-hero-copy > .ief-archive-subtitle,
    .ief-single-hero-copy > .ief-archive-stato,
    .ief-single-hero-copy > .ief-serie-segno { --in-passo: 1; }

    /* Il titolo. */
    .ief-single-hero-copy > h1 { --in-passo: 2; }
    .ief-pagina-testatina-dentro > .ief-pagina-titolo,
    .in-filo-principale > .in-filo-nome,
    .in-filo-dentro > .in-filo-nome,
    .in-mappa-testa > div > .in-mappa-titolo,
    .in-pagina-testata > .in-pagina-titolo,
    .in-elenco > .in-vuoto > h1 { --in-passo: 1; }
    .in-sostieni-pagina > .in-sostieni-occhiello,
    .in-elenco > .in-dentro > .in-elenco-titolo { --in-passo: 0; }

    /* L'occhiello, per ultimo. */
    .ief-single-hero-copy > .ief-kicker { --in-passo: 3; }
    .ief-pagina-testatina-dentro > .ief-pagina-etichetta,
    .in-filo-principale > .in-filo-occhiello,
    .in-filo-dentro > .in-filo-occhiello,
    .in-mappa-testa > div > .in-filo-occhiello { --in-passo: 2; }
    .ief-pagina-testatina-dentro > .ief-pagina-distintivo { --in-passo: 3; }

    /* Briciole, canali e data: chiudono la cascata. */
    .ief-single-hero-copy > .ief-single-hero-breadcrumbs,
    .ief-single-hero-copy > .ief-author-social-links,
    .ief-pagina-testatina-dentro > .ief-pagina-briciole,
    .ief-pagina-testatina-dentro > .ief-pagina-data { --in-passo: 4; }
}

/* ------------------------------------------------ la testata degli autori */

/* Il ruolo: staccato dal nome (era -6px, incollato). */
.ief-author-hero .ief-author-role {
    margin-top: 10px;
    margin-bottom: 24px;
}

/* I canali: spigolo vivo, filo accent sotto, pieno al passaggio. */
.ief-author-hero .ief-author-social-links {
    gap: 8px;
}

.ief-author-hero .ief-author-social-links a {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ief-border, rgba(0, 0, 0, 0.12));
    border-bottom: 2px solid var(--ief-accent, var(--in-marchio, #700000));
    border-radius: 0;
    background: var(--ief-paper, #fff);
}

.ief-author-hero .ief-author-social-links a:hover,
.ief-author-hero .ief-author-social-links a:focus-visible {
    border-color: var(--ief-accent, var(--in-marchio, #700000));
    background: var(--ief-accent, var(--in-marchio, #700000));
    color: var(--ief-paper, #fff);
}

.ief-author-hero .ief-author-social-links a:focus-visible {
    outline: 2px solid var(--ief-accent, var(--in-marchio, #700000));
    outline-offset: 3px;
}