/* =====================================================================
   SITO NUOVO - stile comune
   Tema (lo stesso del pannello): notte da concerto · vetro smerigliato
   · luce ambrata come la vernice del violino
   Caratteri: Cormorant Garamond (titoli, menu) · Inter (testo)
   entrambi su questo sito (licenza SIL OFL, file in assets/font)
   ===================================================================== */

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('font/cormorant-garamond-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('font/cormorant-garamond-latin-500-italic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('font/cormorant-garamond-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('font/inter-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --fondo: #0b0a12;
    --vetro: rgba(255, 255, 255, 0.06);
    --bordo: rgba(255, 255, 255, 0.12);
    --testo: #f3efe8;
    --tenue: #b3acc2;
    --ambra: #f0a24b;
    --rubino: #c2416b;
    --viola: #7c5cff;
    --raggio: 18px;
    --ombra: 0 10px 40px rgba(0, 0, 0, 0.45);
    --molla: cubic-bezier(0.34, 1.56, 0.64, 1);                /* rimbalzo morbido */
    --serif: 'Cormorant Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --testata-fondo: rgba(11, 10, 18, 0.62);                   /* sfondi "di vetro" scuri: ogni tema li ridefinisce */
    --menu-fondo: rgba(11, 10, 18, 0.95);
    --velo-fondo: rgba(11, 10, 18, 0.82);
    --campo-fondo: rgba(0, 0, 0, 0.25);
    --spento: rgba(243, 239, 232, 0.42);                       /* voci di menu non ancora pronte */
    --aurora-forza: 0.62;
    --colonna: 168px;                                          /* larghezza colonna attestati */
    --testata: 76px;                                           /* altezza testata */
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

/* --- 30/10: <picture> (gemella .avif) non conta nel layout: si dispone come il solo <img> --- */
picture {
    display: contents;
}

body {
    margin: 0;
    min-height: 100vh;
    font: 400 16px/1.65 var(--sans);
    color: var(--testo);
    background: var(--fondo);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--ambra);
}

:focus-visible {
    outline: 2px solid var(--ambra);
    outline-offset: 3px;
}

/* --- "vai al contenuto": invisibile finché non lo raggiungi con la tastiera --- */
.salta {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 30;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--ambra);
    color: #000;
    transition: top 0.2s;
}

.salta:focus {
    top: 12px;
}

/* ---------------------------------------------------------------------
   SFONDO: aurora che respira
   --------------------------------------------------------------------- */
.aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: var(--aurora-forza);
    pointer-events: none;
    overflow: hidden;
}

/* --- le macchie sono GIÀ sfumate (gradiente radiale): niente filter: blur() dal vivo,
       che sui telefoni costava moltissimo; il movimento è solo transform (lo fa la scheda video) --- */
.aurora i {
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    border-radius: 50%;
    will-change: transform;
    animation: respira 18s ease-in-out infinite alternate;
}

/* --- 29/10: ferma finché la pagina non si è vista (classe "avviata" da sito.js, 0.6 s dopo il caricamento) --- */
.js:not(.avviata) .aurora i {
    animation-play-state: paused;
}

.aurora i:nth-child(1) {
    top: -28vmax;
    left: -22vmax;
    background: radial-gradient(circle closest-side, var(--ambra) 0%, var(--ambra) 22%, transparent 100%);   /* nucleo pieno, bordo sfumato */
}

.aurora i:nth-child(2) {
    bottom: -32vmax;
    right: -28vmax;
    background: radial-gradient(circle closest-side, var(--viola) 0%, var(--viola) 22%, transparent 100%);   /* nucleo pieno, bordo sfumato */
    animation-delay: -6s;
}

.aurora i:nth-child(3) {
    top: 22vh;
    left: 32vw;
    width: 50vmax;
    height: 50vmax;
    background: radial-gradient(circle closest-side, var(--rubino) 0%, var(--rubino) 22%, transparent 100%);   /* nucleo pieno, bordo sfumato */
    animation-delay: -12s;
}

@keyframes respira {
    to {
        transform: translate(6vmax, 4vmax) scale(1.15);
    }
}

/* ---------------------------------------------------------------------
   TESTATA E MENU
   --------------------------------------------------------------------- */
.testata {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--testata);
    padding: 10px clamp(16px, 4vw, 48px);
    background: var(--testata-fondo);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--bordo);
}

.firma {
    display: flex;
    flex-direction: column;
    line-height: 1;
    text-decoration: none;
    color: var(--testo);
}

.firma .nome {
    font: 600 1.6rem var(--serif);
    letter-spacing: 0.01em;
}

.firma .ruolo {
    margin-top: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ambra);
}

#menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px 6px;
}

/* --- voci: carattere da titolo, grandi e luminose; filo ambrato che si allunga --- */
.voce {
    position: relative;
    padding: 6px 12px 8px;
    font: 600 1.18rem var(--serif);
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--testo);
    transition: color 0.25s;
}

.voce::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ambra), var(--rubino));
    box-shadow: 0 0 10px var(--ambra);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--molla);
}

a.voce:hover,
a.voce:focus-visible,
.voce.attiva {
    color: var(--ambra);
}

a.voce:hover::after,
a.voce:focus-visible::after,
.voce.attiva::after {
    transform: scaleX(1);
}

/* --- pagine non ancora pronte: visibili ma spente --- */
.voce.presto {
    color: var(--spento);
    cursor: default;
}

/* --- pulsante contrasto: cerchio mezzo pieno (come le icone del vecchio sito) --- */
.contrasto,
.tema,
.cerca-icona {
    order: 3;
    width: 46px;
    height: 46px;
    flex: none;
    padding: 11px;
    border: 1px solid var(--bordo);
    border-radius: 14px;
    background: var(--vetro);
    color: var(--testo);
    cursor: pointer;
    transition: transform 0.4s var(--molla);
}

.cerca-icona:hover {
    transform: scale(1.1) rotate(-12deg);
}

.contrasto:hover,
.tema:hover {
    transform: rotate(180deg);
}

.contrasto svg,
.tema svg,
.cerca-icona svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.contrasto path {
    fill: currentColor;
}

.tema circle.colore {
    fill: currentColor;
    stroke: none;
}

#menu {
    order: 2;
    margin-left: auto;                                         /* firma a sinistra, il resto a destra */
}

@media (max-width: 980px) {
    .tema {
        margin-left: auto;                                     /* sul telefono il menu è a tendina */
    }

    /* 30/10: sul telefono la lente non sta in testata (il menu uscirebbe dallo schermo): c'è quella fluttuante */
    .cerca-icona {
        display: none !important;
    }
}

.hamburger {
    order: 4;
    display: none;
    width: 46px;
    height: 46px;
    padding: 11px;
    border: 1px solid var(--bordo);
    border-radius: 14px;
    background: var(--vetro);
    cursor: pointer;
}

.hamburger span {
    display: block;
    height: 2px;
    margin: 5px 0;
    border-radius: 2px;
    background: var(--testo);
    transition: transform 0.35s var(--molla), opacity 0.2s;
}

/* --- telefono e tablet stretto: menu a tendina sotto la testata --- */
@media (max-width: 980px) {
    .hamburger {
        display: block;
    }

    #menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        padding: 8px 20px 20px;
        background: var(--menu-fondo);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--bordo);
        transform-origin: top;
        transform: scaleY(0);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.35s var(--molla), opacity 0.25s, visibility 0s 0.35s;
    }

    .voce {
        padding: 12px 4px;
        font-size: 1.45rem;
        border-bottom: 1px solid var(--bordo);
    }

    .voce::after {
        left: 4px;
        right: auto;
        width: 48px;
    }

    .testata.aperto #menu {
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: transform 0.35s var(--molla), opacity 0.25s;
    }

    .testata.aperto .hamburger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .testata.aperto .hamburger span:nth-child(2) {
        opacity: 0;
    }

    .testata.aperto .hamburger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* ---------------------------------------------------------------------
   COLONNA ATTESTATI (come la colonna fissa del vecchio sito)
   schermo largo: fissa a sinistra · stretto: striscia orizzontale
   --------------------------------------------------------------------- */
.colonna {
    position: fixed;
    top: calc(var(--testata) + 16px);
    bottom: 16px;
    left: 16px;
    z-index: 5;
    width: var(--colonna);
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    background: var(--vetro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.colonna-titolo {
    margin: 0 0 10px;
    text-align: center;
    font: italic 500 1.2rem var(--serif);
    color: var(--ambra);
}

.colonna ul {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 4px;
    list-style: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(240, 162, 75, 0.4) transparent;
}

/* --- miniatura: al passaggio sfuma nella versione "roll" (stemma viola) --- */
.attestato {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--bordo);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    cursor: zoom-in;
    transition: transform 0.4s var(--molla), box-shadow 0.3s;
}

.attestato img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attestato .roll {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s;
}

.attestato:hover,
.attestato:focus-visible {
    transform: scale(1.05) rotate(-1.5deg);
    box-shadow: 0 10px 30px rgba(240, 162, 75, 0.3);
}

.attestato:hover .roll,
.attestato:focus-visible .roll {
    opacity: 1;
}

@media (min-width: 1181px) {
    main,
    .piede {
        margin-left: calc(var(--colonna) + 32px);
    }
}

@media (max-width: 1180px) {
    .colonna {
        position: static;
        width: auto;
        margin: 16px clamp(16px, 4vw, 48px) 0;
    }

    .colonna ul {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .colonna li {
        flex: none;
        width: 96px;
    }
}

/* ---------------------------------------------------------------------
   BANNER: pannello che entra da destra (al posto dei vecchi popup)
   --------------------------------------------------------------------- */
.banner {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(560px, 100vw);
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    margin: 0;
    padding: 64px 24px 24px;
    border: 0;
    border-left: 1px solid var(--bordo);
    background: var(--velo-fondo);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--testo);
    overflow: auto;
}

.banner[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: entra 0.5s var(--molla);
}

.banner::backdrop {
    background: rgba(5, 4, 10, 0.55);
}

.banner img {
    max-width: 100%;
    max-height: calc(100vh - 100px);
    border-radius: 12px;
    box-shadow: var(--ombra);
}

.banner .chiudi {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--bordo);
    border-radius: 50%;
    background: var(--vetro);
    color: var(--testo);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

@keyframes entra {
    from {
        transform: translateX(100%);
    }
}

/* ---------------------------------------------------------------------
   APERTURA: titolo grande sulle corde che vibrano
   --------------------------------------------------------------------- */
.eroe {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 74vh;
    padding: 40px 20px;
    text-align: center;
    overflow: hidden;
}

@media (max-width: 980px) {                                    /* telefono: meno vuoto sopra il titolo (30/10, Ale) */
    .eroe {
        min-height: 440px;
        padding: 20px;
    }
}

.corde {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.corda {
    fill: none;
    stroke: var(--ambra);
    stroke-linecap: round;
    opacity: 0.45;                                             /* niente alone (drop-shadow): ricalcolato a ogni fotogramma */
}

/* --- Sol più grossa, Mi più sottile: come le corde vere (il movimento lo fa sito.js) --- */
.c1 { stroke-width: 3; }
.c2 { stroke-width: 2.4; }
.c3 { stroke-width: 1.8; }
.c4 { stroke-width: 1.2; }

.saluto {
    margin: 0 0 14px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--ambra);
}

.eroe h1 {
    position: relative;
    margin: 0;
    font: 500 clamp(3.4rem, 12vw, 8rem)/0.92 var(--serif);
    letter-spacing: -0.01em;
    text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}

.eroe h1 em {
    font-style: italic;
    background: linear-gradient(100deg, var(--ambra), var(--rubino) 60%, var(--viola));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 0 0.08em;                                         /* il corsivo non viene tagliato */
}

/* --- filigrana: il titolo della vecchia home, lettere solo contornate
       attraversate piano da un riflesso ambrato (come un colpo d'arco) --- */
.filigrana {
    position: relative;
    margin: 18px 0 0;
    font: italic 500 clamp(1.6rem, 6vw, 3.6rem)/1 var(--serif);
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(240, 162, 75, 0.38);
    background: linear-gradient(100deg, transparent 40%, rgba(240, 162, 75, 0.55) 50%, transparent 60%)
                0 0 / 250% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: arcata 7s ease-in-out infinite;
}

.filigrana span {
    font-style: normal;
    letter-spacing: 0.18em;
}

/* --- telefono stretto: un po' più piccola, per lasciare margine ai bordi --- */
@media (max-width: 420px) {
    .filigrana {
        font-size: 1.3rem;
    }

    .filigrana span {
        letter-spacing: 0.12em;
    }
}

@keyframes arcata {
    from {
        background-position: 120% 0;
    }

    to {
        background-position: -20% 0;
    }
}

.sotto {
    margin: 22px 0 0;
    font: italic 500 1.35rem var(--serif);
    color: var(--tenue);
}

/* ---------------------------------------------------------------------
   BLOCCHI DI CONTENUTO
   --------------------------------------------------------------------- */
.blocco {
    max-width: 920px;
    margin: 0 auto;
    padding: 48px 20px;
}

.blocco h2 {
    margin: 0 0 28px;
    font: 500 clamp(2.2rem, 6vw, 3.2rem)/1.1 var(--serif);
}

.blocco h2::after {
    content: '';
    display: block;
    width: 72px;
    height: 2px;
    margin-top: 12px;
    background: linear-gradient(90deg, var(--ambra), transparent);
}

.vetro {
    background: var(--vetro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* --- linea del tempo: anno a sinistra, scheda di vetro a destra --- */
.linea {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid rgba(240, 162, 75, 0.35);
}

.linea li {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    align-items: start;
    padding: 0 0 22px 22px;
}

.linea li::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ambra);
    box-shadow: 0 0 12px var(--ambra);
}

.anno {
    font: 600 1.4rem/1.3 var(--serif);
    color: var(--ambra);
}

.linea .vetro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
}

.linea strong {
    font: 600 1.3rem/1.25 var(--serif);
}

.linea .vetro span {
    color: var(--tenue);
    font-size: 0.93rem;
}

@media (max-width: 560px) {
    .linea li {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* ---------------------------------------------------------------------
   PAGINE INTERNE: intestazione + galleria a muratura + visore
   --------------------------------------------------------------------- */
.blocco.largo {
    max-width: 1200px;
}

.intestazione {
    margin: 12px 0 28px;
}

.intestazione h1 {
    margin: 0;
    font: 500 clamp(2.6rem, 8vw, 4.6rem)/1 var(--serif);
}

.intestazione h1::after {
    content: '';
    display: block;
    width: 90px;
    height: 2px;
    margin-top: 14px;
    background: linear-gradient(90deg, var(--ambra), transparent);
}

.intestazione p {
    margin: 12px 0 0;
    font: italic 500 1.25rem var(--serif);
    color: var(--tenue);
}

.vuoto {
    color: var(--tenue);
    font-style: italic;
}

/* --- filtri per categoria: pillole di vetro --- */
.filtri {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.filtro {
    padding: 8px 18px;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    background: var(--vetro);
    color: var(--testo);
    font: 600 1.05rem var(--serif);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.3s var(--molla);
}

.filtro:hover {
    transform: translateY(-2px);
    border-color: rgba(240, 162, 75, 0.5);
}

.filtro.attivo {
    background: linear-gradient(100deg, var(--ambra), var(--rubino));
    border-color: transparent;
    color: #120d08;
}

/* --- muro: colonne a muratura (i ritagli hanno forme diverse) --- */
.muro {
    columns: 4 220px;
    column-gap: 16px;
}

.tessera {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    padding: 8px;
    break-inside: avoid;
    border: 1px solid var(--bordo);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);                      /* carta: i ritagli sono su fondo chiaro */
    box-shadow: var(--ombra);
    cursor: zoom-in;
    transition: transform 0.45s var(--molla), box-shadow 0.3s;
}

.tessera img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.tessera:hover,
.tessera:focus-visible {
    transform: translateY(-6px) rotate(-0.8deg);
    box-shadow: 0 18px 50px rgba(240, 162, 75, 0.28);
}

.tessera[hidden] {
    display: none;
}

/* --- visore: immagine a tutto schermo, frecce, contatore --- */
.visore {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(5, 4, 10, 0.94);
    color: var(--testo);
}

.visore[open] {
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    align-items: center;
    animation: dissolve 0.3s ease;
}

.visore::backdrop {
    background: transparent;
}

.visore .tela {
    grid-column: 2;                                            /* sempre al centro, anche con le frecce fisse */
    grid-row: 1;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    touch-action: pan-y pinch-zoom;
}

.visore .tela img {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 8px;
    cursor: zoom-in;
    transition: opacity 0.25s;
}

/* --- lettura: tocco sull'articolo → larghezza piena, si scorre in verticale --- */
.visore.lettura .tela {
    align-items: flex-start;
}

.visore.lettura .tela img {
    max-width: none;
    max-height: none;
    width: min(1000px, 100%);
    margin: 60px 0;
    cursor: zoom-out;
}

.visore .freccia {
    justify-self: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--bordo);
    border-radius: 50%;
    background: var(--vetro);
    color: var(--testo);
    font: 400 2rem/1 var(--serif);
    cursor: pointer;
    z-index: 1;
    transition: background 0.25s, transform 0.3s var(--molla);
}

.visore .freccia:hover {
    background: rgba(240, 162, 75, 0.25);
    transform: scale(1.08);
}

.visore .chiudi {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 46px;
    height: 46px;
    border: 1px solid var(--bordo);
    border-radius: 50%;
    background: var(--vetro);
    color: var(--testo);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.visore .conta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 14px;
    margin: 0;
    text-align: center;
    font: italic 500 1.1rem var(--serif);
    color: var(--tenue);
    pointer-events: none;
}

@media (max-width: 640px) {
    .visore[open] {
        grid-template-columns: 0 1fr 0;
    }

    /* --- telefono: in lettura l'articolo è quasi il doppio dello schermo, si sposta col dito --- */
    .visore.lettura .tela {
        justify-content: flex-start;
        touch-action: pan-x pan-y pinch-zoom;
    }

    .visore.lettura .tela img {
        width: 190vw;
        margin: 60px 0 80px;
    }

    .visore .freccia {
        position: fixed;
        bottom: 8px;
        width: 46px;
        height: 46px;
    }

    .visore .prec {
        left: 14px;
    }

    .visore .succ {
        right: 14px;
    }
}

@keyframes dissolve {
    from {
        opacity: 0;
    }
}

/* ---------------------------------------------------------------------
   VIDEO: "sala" (schermo grande) + "programma" (schede dei video)
   --------------------------------------------------------------------- */
.sala {
    padding: 14px;
    margin-bottom: 28px;
}

.schermo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 62vh;                                          /* sotto si deve vedere il programma */
    border-radius: 12px;
    background: #000;
    object-fit: contain;                                       /* i video originali sono 4:3 */
}

/* --- 30/10 (idea 3): MINI-LETTORE · il video scorso via mentre suona si fa piccolo nell'angolo
       (a sinistra della lente e del violino) e continua; ⤢ torna su, ✕ lo ferma --- */
.schermo-box {
    position: relative;
}

.schermo-box.mini {
    position: fixed;
    right: calc(max(18px, env(safe-area-inset-right)) + 58px + 14px + 29px + 12px);
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 16;
    width: min(52vw, 340px);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    animation: mini-entra 0.35s var(--molla);
}

.schermo-box.mini .schermo {
    max-height: none;
}

.schermo-box .mini-torna,
.schermo-box .mini-chiudi {
    position: absolute;
    top: -12px;
    width: 32px;
    height: 32px;
    padding: 7px;
    border: 0;
    border-radius: 50%;
    background: var(--ambra);
    color: #120d08;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.schermo-box .mini-torna svg,
.schermo-box .mini-chiudi svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.schermo-box .mini-chiudi {
    right: -10px;
}

.schermo-box .mini-torna {
    right: 28px;
}

.finestra.pulsante {
    margin-top: 10px;
    padding: 8px 18px;
    font-size: 1rem;
}

@keyframes mini-entra {
    from { opacity: 0; transform: translateY(20px) scale(0.85); }
    to   { opacity: 1; transform: none; }
}

.in-onda {
    margin: 12px 4px 2px;
    font: 600 1.5rem var(--serif);
}

.in-onda::before {
    content: '♪ ';
    color: var(--ambra);
}

.programma {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pezzo {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    overflow: hidden;
    background: var(--vetro);
    color: var(--testo);
    text-align: left;
    cursor: pointer;
    transition: transform 0.45s var(--molla), box-shadow 0.3s, border-color 0.3s;
}

.pezzo:hover,
.pezzo:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 18px 50px rgba(240, 162, 75, 0.25);
}

.pezzo.scelto {
    border-color: var(--ambra);
    box-shadow: 0 0 0 1px var(--ambra), 0 12px 40px rgba(240, 162, 75, 0.25);
}

.quadro {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: #000;
}

.quadro img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.pezzo:hover .quadro img:not(.etichetta) {
    transform: scale(1.06);
}

/* --- l'etichetta originale di Ale (60×40), come un francobollo nell'angolo --- */
.quadro .etichetta {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 72px;
    height: auto;
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* --- barrette "in riproduzione": compaiono sulla scheda scelta mentre suona --- */
.suona {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    gap: 3px;
    align-items: flex-end;
    height: 18px;
    padding: 6px;
    border-radius: 8px;
    background: var(--velo-fondo);
    box-sizing: content-box;
}

.suona i {
    width: 4px;
    height: 100%;
    border-radius: 2px;
    background: var(--ambra);
    animation: barra 0.9s ease-in-out infinite alternate;
}

.suona i:nth-child(2) {
    animation-delay: -0.3s;
}

.suona i:nth-child(3) {
    animation-delay: -0.6s;
}

.pezzo.suonando .suona {
    display: flex;
}

@keyframes barra {
    from {
        transform: scaleY(0.25);
    }
}

.pezzo .titolo {
    display: block;
    padding: 12px 14px 14px;
    font: 600 1.25rem/1.2 var(--serif);
}

/* ---------------------------------------------------------------------
   PREFERITI: targa chiara col logo (bianco e nero → colori al passaggio)
   + testo su vetro + collegamenti
   --------------------------------------------------------------------- */
.preferiti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    gap: 22px;
}

.preferito {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.45s var(--molla), box-shadow 0.3s;
}

.preferito:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 50px rgba(240, 162, 75, 0.2);
}

.targa {
    position: relative;
    display: grid;
    place-items: center;
    height: 170px;
    padding: 18px;
    background: #fff;
}

.targa img {
    grid-area: 1 / 1;
    max-width: 100%;
    max-height: 134px;
}

.targa .roll {
    opacity: 0;
    transition: opacity 0.5s;
}

.preferito:hover .roll,
.preferito:focus-within .roll {
    opacity: 1;
}

.preferito .corpo {
    padding: 18px 22px 22px;
}

.preferito h2 {
    margin: 0 0 8px;
    font: 600 1.6rem/1.15 var(--serif);
}

.preferito p {
    margin: 0;
    color: var(--tenue);
    font-size: 0.95rem;
}

.preferito .collegamenti {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.collegamenti a {
    padding: 6px 14px;
    border: 1px solid rgba(240, 162, 75, 0.45);
    border-radius: 999px;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.25s, color 0.25s;
}

.esterno {
    width: 0.7em;
    height: 0.7em;
    margin-left: 6px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: 0;
}

/* --- testo solo per i lettori di schermo --- */
.nascosto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.collegamenti a:hover,
.collegamenti a:focus-visible {
    background: var(--ambra);
    color: #120d08;
}

/* ---------------------------------------------------------------------
   COMPARSA ALLO SCORRIMENTO (ritardo a cascata impostato da sito.js)
   nascosto SOLO se il JavaScript gira (classe "js"): senza, tutto visibile
   --------------------------------------------------------------------- */
.js .appare {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s var(--molla);
    transition-delay: calc(var(--i, 0) * 80ms);
}

.js .appare.vista {
    opacity: 1;
    transform: none;
}

/* --- fondo pagina: tre voci che vanno a capo INTERE, separate da un puntino --- */
.piede {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 0;
}

.piede > * {
    white-space: nowrap;
}

.piede > * + *::before {
    content: '·';
    display: inline-block;
    margin: 0 10px;
    color: var(--tenue);
    text-decoration: none;
}

/* --- 30/10: "Condividi" ha l'aspetto degli altri collegamenti del piede (compare solo dove il browser sa condividere) --- */
.piede .condividi {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.piede .condividi[hidden] {
    display: none;
}

/* --- 01/11 (Ale): piede compatto. Computer: tutto su una riga; "a-capo" e nomi corti spenti --- */
.piede .a-capo,
.piede .solo-stretto {
    display: none;
}

/* --- telefono: due righe → (sole · © · versione) / (link con nomi corti); niente puntino a inizio riga --- */
@media (max-width: 520px) {
    footer.piede {                                             /* footer.: vince sulla regola base più sotto */
        align-items: center;
        padding-top: 38px;                                     /* 01/11 (Ale): citazione centrata tra testo e piede */
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0.8rem;
    }

    .piede .a-capo {
        display: block;
        flex-basis: 100%;
        height: 0;
    }

    .piede > * + *::before {
        margin: 0 6px;
    }

    .piede .a-capo::before,
    .piede .a-capo + *::before {
        display: none;
    }

    .piede .solo-largo {
        display: none;
    }

    .piede .solo-stretto {
        display: inline;
    }
}

.piede .vecchio {
    color: var(--tenue);
    text-decoration-color: rgba(240, 162, 75, 0.5);
    text-underline-offset: 3px;
}

.piede .vecchio:hover,
.piede .vecchio:focus-visible {
    color: var(--ambra);
    outline: none;                                             /* niente riquadro dopo il tocco: basta la sottolineatura */
    text-decoration-thickness: 2px;
}

.piede {
    touch-action: manipulation;                                /* tre tocchi = accesso nascosto, non zoom */
    user-select: none;
    -webkit-user-select: none;
    padding: 32px 20px 48px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--tenue);
}

/* ---------------------------------------------------------------------
   AGENDA: barra degli anni (resta in vista) + concerti con la data in evidenza
   (.annata, non .anno: .anno è già l'anno della linea del tempo in home)
   --------------------------------------------------------------------- */
.anni {
    position: sticky;
    top: calc(var(--testata) + 8px);
    z-index: 4;
    display: flex;
    gap: 6px;
    margin-bottom: 26px;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    background: var(--velo-fondo);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--bordo);
    border-radius: 999px;
}

.anni a {
    flex: none;
    padding: 4px 12px;
    border-radius: 999px;
    font: 600 1.05rem var(--serif);
    color: var(--testo);
    text-decoration: none;
    transition: background 0.25s, color 0.25s;
}

.anni a:hover,
.anni a:focus-visible {
    background: var(--ambra);
    color: #120d08;
}

.annata {
    scroll-margin-top: calc(var(--testata) + 80px);           /* il salto all'anno non finisce sotto le barre */
}

.annata h2 {
    margin: 34px 0 18px;
    font: 500 clamp(2.2rem, 6vw, 3rem)/1 var(--serif);
    color: var(--ambra);
}

.annata h2 small {
    font: italic 500 1.1rem var(--serif);
    color: var(--tenue);
}

.concerti {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.concerto {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 18px;
    align-items: start;
    padding: 16px 18px;
    content-visibility: auto;                                  /* 30/10: 157 schede → il telefono calcola solo quelle a vista */
    contain-intrinsic-size: auto 140px;
}

.giorno {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 10px;
    border-radius: 14px;
    background: linear-gradient(160deg, var(--ambra), var(--rubino));
    color: #120d08;
    line-height: 1;
}

.giorno b {
    font: 600 2.1rem var(--serif);
}

.giorno span {
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.concerto h3 {
    margin: 0 0 6px;
    font: 600 1.4rem/1.2 var(--serif);
}

.concerto p {
    margin: 0;
    color: var(--tenue);
    font-size: 0.95rem;
}

.concerto a,
.collegamento {
    color: var(--ambra);
}

/* --- pulsante che sembra un link (apre la locandina nel banner) --- */
.collegamento {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 560px) {
    .concerto {
        grid-template-columns: 58px 1fr;
        gap: 12px;
        padding: 14px;
    }

    .giorno b {
        font-size: 1.7rem;
    }
}

/* ---------------------------------------------------------------------
   MODULI (area File MIDI): accesso e richiesta su viste SEPARATE (Ale),
   un modulo alla volta, largo come un biglietto, campi grandi e leggibili
   --------------------------------------------------------------------- */
.modulo {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
}

.modulo h2 {
    margin: 0 0 4px;
    font: 500 1.9rem var(--serif);
}

.modulo h2::after {
    display: none;
}

.modulo label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.92rem;
    color: var(--tenue);
}

.modulo input[type="text"],
.modulo input[type="email"],
.modulo input[type="password"],
.modulo textarea {
    padding: 12px 14px;
    border: 1px solid var(--bordo);
    border-radius: 12px;
    background: var(--campo-fondo);
    color: var(--testo);
    font: inherit;
    font-size: 1rem;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.modulo input:focus,
.modulo textarea:focus {
    outline: none;
    border-color: var(--ambra);
    box-shadow: 0 0 0 3px rgba(240, 162, 75, 0.25);
}

.modulo .spunta {
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.85rem;
}

.modulo .spunta input {
    margin-top: 3px;
    accent-color: var(--ambra);
}

.modulo .pulsante {
    align-self: flex-start;
    border: 0;
    cursor: pointer;
}

.nota {
    margin: 0;
    font-size: 0.85rem;
    color: var(--tenue);
}

/* --- campo trappola: fuori dallo schermo (non "display:none", che alcuni robot riconoscono) --- */
.trappola {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- messaggio dopo un'azione --- */
.avviso {
    padding: 14px 18px;
    border: 1px solid rgba(60, 207, 145, 0.5);
    border-radius: 14px;
    background: rgba(60, 207, 145, 0.12);
}

.avviso.errore {
    border-color: rgba(194, 65, 107, 0.6);
    background: rgba(194, 65, 107, 0.15);
}

/* --- area riservata: il LEGGIMI di Ale così com'è (a capo e maiuscole sue) --- */
.leggimi {
    padding: 24px;
}

.leggimi pre {
    margin: 0;
    white-space: pre-wrap;
    font: 400 1rem/1.7 var(--sans);
}

.esci {
    margin-top: 18px;
}

.esci .pulsante {
    border: 0;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   TESTI LUNGHI (Privacy): righe di lettura comode
   --------------------------------------------------------------------- */
.testo-lungo p,
.testo-lungo li {
    max-width: 70ch;
    color: var(--tenue);
}

.testo-lungo h2 {
    margin-top: 36px;
    font-size: 1.8rem;
}

.testo-lungo strong {
    color: var(--testo);
}

/* ---------------------------------------------------------------------
   PAGINA NON TROVATA + pulsante generico
   --------------------------------------------------------------------- */
.perso {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.perso h1 {
    margin: 0 0 16px;
    font: 500 clamp(2.6rem, 9vw, 5rem)/1 var(--serif);
}

.perso h1 em {
    color: var(--ambra);
}

.perso p {
    color: var(--tenue);
}

.pulsante {
    display: inline-block;
    margin-top: 18px;
    padding: 12px 26px;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--ambra), var(--rubino));
    color: #120d08;
    font: 600 1.15rem var(--serif);
    text-decoration: none;
    transition: transform 0.35s var(--molla), box-shadow 0.3s;
}

.pulsante:hover,
.pulsante:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(240, 162, 75, 0.35);
}

/* ---------------------------------------------------------------------
   TEMI (Ale sceglie quello del sito dal pannello; il visitatore può
   cambiarlo col pulsante tavolozza) · "notte" = i valori di :root
   --------------------------------------------------------------------- */

/* --- Avorio: chiaro, carta da musica e inchiostro, accenti color legno --- */
[data-tema="avorio"] {
    --fondo: #f5efe3;
    --vetro: rgba(255, 255, 255, 0.62);
    --bordo: rgba(70, 45, 20, 0.16);
    --testo: #2b2118;
    --tenue: #66574a;
    --ambra: #a85d1c;
    --rubino: #8e2b45;
    --viola: #5a4a9c;
    --ombra: 0 10px 30px rgba(70, 45, 20, 0.14);
    --testata-fondo: rgba(245, 239, 227, 0.78);
    --menu-fondo: rgba(245, 239, 227, 0.97);
    --velo-fondo: rgba(245, 239, 227, 0.9);
    --campo-fondo: rgba(255, 255, 255, 0.85);
    --spento: rgba(43, 33, 24, 0.4);
    --aurora-forza: 0.28;
    color-scheme: light;
}

/* --- Bordeaux: velluto di teatro, oro --- */
[data-tema="bordeaux"] {
    --fondo: #13060b;
    --vetro: rgba(255, 235, 240, 0.06);
    --ambra: #e3b062;
    --rubino: #b3304f;
    --viola: #6a1f3d;
    --testata-fondo: rgba(19, 6, 11, 0.66);
    --menu-fondo: rgba(19, 6, 11, 0.96);
    --velo-fondo: rgba(19, 6, 11, 0.85);
}

/* --- Blu notte: blu profondo, oro freddo --- */
[data-tema="blu"] {
    --fondo: #060a17;
    --vetro: rgba(220, 230, 255, 0.06);
    --ambra: #e9c46a;
    --rubino: #2a9d8f;
    --viola: #3557d6;
    --testata-fondo: rgba(6, 10, 23, 0.66);
    --menu-fondo: rgba(6, 10, 23, 0.96);
    --velo-fondo: rgba(6, 10, 23, 0.85);
}

/* --- contrasto "alto" sul tema chiaro: vetri chiari pieni, non scuri --- */
[data-tema="avorio"][data-contrasto="alto"] {
    --vetro: rgba(255, 255, 255, 0.95);
    --tenue: #2b2118;
    --bordo: rgba(43, 33, 24, 0.45);
}

/* ---------------------------------------------------------------------
   PENTAGRAMMA (ogni pagina, in alto a destra, quasi trasparente):
   righe che ondeggiano piano, chiave di violino, note che scorrono
   --------------------------------------------------------------------- */
.pentagramma {
    position: fixed;
    top: calc(var(--testata) + 6px);
    right: -20px;
    z-index: 0;
    width: min(460px, 70vw);
    height: auto;
    color: var(--ambra);
    opacity: 0.16;
    pointer-events: none;
}

.pentagramma .righe {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    animation: ondeggia 9s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
}

.pentagramma .chiave {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pentagramma .nota {
    fill: currentColor;
    animation: scorre 14s linear infinite;
}

.pentagramma .nota line {
    stroke: currentColor;
    stroke-width: 1.6;
}

.pentagramma .nota:nth-of-type(2) { animation-delay: -3.5s; }
.pentagramma .nota:nth-of-type(3) { animation-delay: -7s; }
.pentagramma .nota:nth-of-type(4) { animation-delay: -10.5s; }

/* --- le note entrano da destra, attraversano il rigo e svaniscono vicino alla chiave --- */
@keyframes scorre {
    0%   { transform: translateX(300px); opacity: 0; }
    12%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateX(0); opacity: 0; }
}

@keyframes ondeggia {
    from { transform: skewY(-1.5deg); }
    to   { transform: skewY(1.5deg); }
}

/* --- il contenuto resta sopra al pentagramma --- */
main,
.piede {
    position: relative;
    z-index: 1;
}

/* --- 30/10 CAMBIO PAGINA leggero (Ale): il contenuto entra sfumando, la testata resta ferma ---
       solo CSS, non trattiene la navigazione (le View Transitions del 29/10 sì → tolte)
       "backwards": finita l'entrata non resta nessun transform (non disturba visore e banner) --- */
main {
    animation: pagina-entra 0.3s ease-out backwards;
}

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

/* --- su telefono più piccolo, per non coprire il titolo --- */
@media (max-width: 560px) {
    .pentagramma {
        width: 62vw;
        opacity: 0.12;
    }
}

[data-contrasto="massimo"] .pentagramma {
    display: none;
}

/* ---------------------------------------------------------------------
   CONTRASTO (scelto col pulsante, salvato nel browser)
   alto: testi pieni, vetri più opachi · massimo: nero/bianco/giallo, niente effetti
   --------------------------------------------------------------------- */
[data-contrasto="alto"] {
    --tenue: #e6e1ee;
    --vetro: rgba(20, 18, 32, 0.82);
    --bordo: rgba(255, 255, 255, 0.35);
}

[data-contrasto="alto"] .aurora {
    opacity: 0.22;
}

[data-contrasto="alto"] .voce.presto {
    color: rgba(255, 255, 255, 0.7);
}

[data-contrasto="massimo"] {
    --fondo: #000;
    --testo: #fff;
    --tenue: #fff;
    --ambra: #ffd400;
    --rubino: #ffd400;
    --viola: #ffd400;
    --vetro: #000;
    --bordo: #fff;
    --ombra: none;
}

[data-contrasto="massimo"] .aurora,
[data-contrasto="massimo"] .corde,
[data-contrasto="massimo"] .filigrana {
    display: none;
}

[data-contrasto="massimo"] .eroe h1 em {
    background: none;
    color: var(--ambra);
}

[data-contrasto="massimo"] .voce.presto {
    color: #bbb;
}

[data-contrasto="massimo"] a:not(.voce):not(.firma) {
    text-decoration: underline;
}

[data-contrasto="massimo"] *,
[data-contrasto="massimo"] *::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
}

/* ---------------------------------------------------------------------
   ANIMAZIONI DEI TITOLI
   lettere: compaiono una dopo l'altra salendo appena (ritardo da sito.js)
   filo d'arco: la linea sotto i titoli si traccia da sinistra quando è in vista
   --------------------------------------------------------------------- */
.lettera {
    display: inline-block;
    white-space: pre;                                          /* gli spazi restano spazi */
    opacity: 0;
    transform: translateY(0.35em);
    animation: lettera 0.6s var(--molla) forwards;
    animation-delay: calc(var(--n) * 38ms + 120ms);
}

@keyframes lettera {
    to {
        opacity: 1;
        transform: none;
    }
}

.js .blocco h2::after,
.js .intestazione h1::after,
.js .annata h2::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.js .tesa::after {
    transform: scaleX(1) !important;
}

/* ---------------------------------------------------------------------
   TELEFONI E TABLET (schermo touch): niente vetro smerigliato dal vivo
   (backdrop-filter sfoca lo sfondo a ogni scorrimento: pesante) → vetri
   un po' più pieni, stesso aspetto
   --------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .vetro,
    .colonna,
    .anni,
    .banner {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    :root {
        --vetro: rgba(255, 255, 255, 0.09);
    }

    [data-tema="avorio"] {
        --vetro: rgba(255, 255, 255, 0.8);
    }

    .testata {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* --- 29/10: niente "passaggio del mouse" su touch → la versione roll non si scarica nemmeno --- */
    .attestato .roll {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   LIBRO DEGLI OSPITI = PERGAMENA (29/10, idea di Ale): carta antica con bordi
   bruniti e rotoli, firme in corsivo color inchiostro, righe per scrivere.
   Solo CSS (nessuna immagine): uguale con ogni tema del sito.
   --------------------------------------------------------------------- */
.pergamena {
    --inchiostro: #2f2013;
    --seppia: #6b4423;
    position: relative;
    max-width: 780px;
    margin: 40px auto 30px;
    padding: clamp(40px, 7vw, 64px) clamp(22px, 6vw, 64px);
    color: var(--inchiostro);
    background:
        radial-gradient(ellipse at 18% 12%, rgba(255, 251, 238, 0.85), transparent 55%),
        radial-gradient(ellipse at 85% 90%, rgba(150, 95, 35, 0.22), transparent 55%),
        radial-gradient(ellipse at 70% 30%, rgba(190, 140, 70, 0.12), transparent 40%),
        linear-gradient(180deg, #f5e8c9 0%, #ecd8ab 55%, #e2c792 100%);
    border-radius: 4px;
    box-shadow:
        inset 0 0 70px rgba(120, 68, 18, 0.5),
        inset 0 0 8px rgba(90, 50, 10, 0.55),
        0 24px 60px rgba(0, 0, 0, 0.45);
}

/* --- i due rotoli, in alto e in basso --- */
.pergamena::before,
.pergamena::after {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    height: 30px;
    border-radius: 15px;
    background: linear-gradient(180deg, #b9894c 0%, #f0ddb4 42%, #d7b57c 60%, #9c6e36 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.pergamena::before {
    top: -15px;
}

.pergamena::after {
    bottom: -15px;
}

.pergamena .modulo label {
    color: var(--seppia);
    font: italic 500 1.1rem var(--serif);
}

.pergamena .modulo input[type="text"],
.pergamena .modulo textarea {
    padding: 6px 2px;
    border: 0;
    border-bottom: 1px solid rgba(107, 68, 35, 0.45);
    border-radius: 0;
    background: transparent;
    color: var(--inchiostro);
    font: italic 500 1.25rem var(--serif);
}

/* --- il messaggio si scrive su un foglio a righe --- */
.pergamena .modulo textarea {
    border: 0;
    line-height: 34px;
    background-image: repeating-linear-gradient(transparent 0, transparent 33px, rgba(107, 68, 35, 0.3) 33px, rgba(107, 68, 35, 0.3) 34px);
    background-attachment: local;
}

.pergamena .modulo input:focus,
.pergamena .modulo textarea:focus {
    border-color: var(--seppia);
    box-shadow: none;
}

.pergamena .nota,
.pergamena .nota a {
    color: var(--seppia);
}

/* --- pulsante come un sigillo di ceralacca --- */
.pergamena .sigillo {
    justify-self: center;
    border: 0;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 30%, #a33a32, #6e1c18 70%);
    color: #f5e8c9;
    box-shadow: 0 4px 12px rgba(110, 28, 24, 0.45), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

.pergamena .hanno-scritto {
    margin: 46px 0 8px;
    color: var(--seppia);
    font: italic 500 clamp(1.8rem, 5vw, 2.4rem) var(--serif);
    text-align: center;
}

.pergamena .firme li {
    padding: 20px 0;
}

/* --- fra una firma e l'altra, un filo d'inchiostro sfumato (disegnato: si vede su ogni telefono) --- */
.pergamena .firme li + li::before {
    content: "";
    display: block;
    width: 140px;
    height: 1px;
    margin: 0 auto 22px;
    background: linear-gradient(90deg, transparent, rgba(107, 68, 35, 0.55), transparent);
}

.pergamena .firme blockquote {
    color: var(--inchiostro);
    font: italic 500 clamp(1.25rem, 3.6vw, 1.45rem)/1.55 var(--serif);
}

.pergamena .firme .chi {
    text-align: right;
    color: var(--seppia);
}

.pergamena .firme .chi b {
    color: var(--inchiostro);
}

.pergamena .firme .chi span {
    float: none;
    display: block;
    font-size: 0.9rem;
}

.pergamena .vuoto {
    color: var(--seppia);
    text-align: center;
    font: italic 500 1.2rem var(--serif);
}

/* --- 29/10 libro degli ospiti: area di testo + firme --- */
.modulo textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.firme {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.firme li {
    padding: 18px 22px;
    border-radius: 16px;
}

.firme blockquote {
    margin: 0;
    font: italic 500 1.2rem/1.5 var(--serif);
}

.firme .chi {
    margin: 10px 0 0;
    color: var(--tenue);
}

.firme .chi b {
    color: var(--ambra);
    font-weight: 600;
}

.firme .chi span {
    float: right;
}

/* --- 29/10 "Chi sono": presentazione, numeri dall'agenda, orchestre più frequenti --- */
.presentazione {
    padding: 22px 26px;
    border-radius: 18px;
    font-size: 1.08rem;
    line-height: 1.65;
}

.presentazione p + p {
    margin-top: 12px;
}

.presentazione a {
    color: var(--ambra);
}

.numeri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.numeri li {
    display: grid;
    gap: 4px;
    padding: 18px;
    border-radius: 16px;
    text-align: center;
}

.numeri b {
    font: 500 clamp(2rem, 6vw, 2.6rem)/1 var(--serif);
    color: var(--ambra);
}

.numeri span {
    color: var(--tenue);
}

.sotto-titolo {
    margin: 28px 0 12px;
    font: italic 500 1.4rem var(--serif);
}

.orchestre {
    margin: 0;
    padding: 0;
    list-style: none;
}

.orchestre li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--bordo);
}

.orchestre b {
    flex: none;
    color: var(--tenue);
    font-weight: 500;
}

.in-rete {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.in-rete li {
    display: grid;
    gap: 4px;
    padding: 16px 20px;
    border-radius: 16px;
}

.in-rete a {
    font: 500 1.35rem var(--serif);
    color: var(--ambra);
}

.in-rete span {
    color: var(--tenue);
}

/* --- 29/10 album foto: didascalia scritta sotto la foto, come sul retro delle vecchie stampe --- */
.tessera .didascalia {
    display: block;
    margin: 8px 4px 2px;
    font: italic 500 1rem/1.25 var(--serif);
    color: #5b4a3c;
    text-align: center;
}

/* --- 29/10 compromesso PC: larghezza calcolata da sito.js (max 1,8× la foto, mai oltre lo schermo) --- */
.visore:not(.lettura) .tela img {
    width: var(--largo, auto);
}

/* ---------------------------------------------------------------------
   LINGUA (29/10): pulsante IT/EN in testata sul computer; sul telefono
   è l'ultima voce del menu a tendina (testata invariata)
   --------------------------------------------------------------------- */
.lingua {
    order: 3;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border: 1px solid var(--bordo);
    border-radius: 14px;
    background: var(--vetro);
    color: var(--testo);
    font: 600 0.85rem/1 var(--sans);
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: border-color 0.25s, color 0.25s;
}

.lingua:hover,
.lingua:focus-visible {
    border-color: var(--ambra);
    color: var(--ambra);
}

.voce.lingua-menu {
    display: none;
}

@media (max-width: 980px) {
    .lingua {
        display: none;
    }

    .voce.lingua-menu {
        display: block;
    }
}

.nota-lingua {
    margin: -6px 0 20px;
    font: italic 500 1.05rem var(--serif);
    color: var(--tenue);
}

/* --- 30/10: invito alla pagina italiana (solo telefoni in italiano sulla versione inglese) --- */
.leggi-italiano {
    margin: 0 0 18px;
    font: italic 500 1.05rem var(--serif);
    color: var(--tenue);
    text-align: center;
}

.leggi-italiano a {
    color: var(--ambra);
}

/* ---------------------------------------------------------------------
   AGENDA: RICERCA NEI CONCERTI (29/10) - stesso stile dei campi del modulo
   --------------------------------------------------------------------- */
.cerca {
    margin: -8px 0 22px;
}

.cerca input {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--bordo);
    border-radius: 12px;
    background: var(--campo-fondo);
    color: var(--testo);
    font: inherit;
    font-size: 1rem;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.cerca input:focus {
    outline: none;
    border-color: var(--ambra);
    box-shadow: 0 0 0 3px rgba(240, 162, 75, 0.25);
}

.cerca .esito {
    min-height: 1.2em;
    margin: 8px 2px 0;
    font: italic 500 1.05rem var(--serif);
    color: var(--tenue);
}

/* --- agenda intelligente (29/10): il prossimo concerto in cima + i futuri in evidenza --- */
.prossimo {
    display: grid;
    gap: 4px;
    margin: 0 0 22px;
    padding: 18px 22px;
    border: 1px solid var(--ambra);
    border-radius: 18px;
    color: var(--testo);
    text-decoration: none;
    box-shadow: 0 12px 40px rgba(240, 162, 75, 0.22);
}

.prossimo .etichetta {
    font: 600 0.8rem/1 var(--sans, inherit);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ambra);
}

.prossimo .conto {
    font: 500 clamp(2rem, 7vw, 2.8rem)/1.1 var(--serif);
}

.prossimo .cosa {
    color: var(--tenue);
}

.concerto.futuro {
    border-color: var(--ambra);
}

.concerto .quando {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ambra);
    color: #1a1208;
    font-size: 0.8rem;
    font-weight: 600;
}

.concerto[hidden],
.annata[hidden],
.anni a[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------
   SCRIVIMI (30/10): busta che fluttua accanto al titolo; dopo l'invio vola via e torna
   --------------------------------------------------------------------- */
.scrivimi-testa {
    position: relative;
}

.busta {
    position: absolute;
    top: 0;
    right: 4%;
    width: clamp(48px, 14vw, 72px);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
    animation: busta-fluttua 3.2s ease-in-out infinite;
}

.busta.vola {
    animation: busta-vola 1.8s cubic-bezier(0.5, 0, 0.3, 1) both, busta-fluttua 3.2s ease-in-out 1.8s infinite;
}

.busta svg {
    display: block;
    width: 100%;
    height: auto;
    fill: none;
    stroke: var(--ambra);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* ---------------------------------------------------------------------
   CERCA (30/10, proposta 8): campo grande con lente, risultati a gruppi
   --------------------------------------------------------------------- */
.cerca-icona {
    display: block;
}

.cerca-icona svg {
    stroke-width: 2;
    stroke-linecap: round;
}

.cerca-modulo {
    display: flex;
    gap: 10px;
    margin: 0 0 22px;
}

.cerca-campo {
    position: relative;
    flex: 1;
}

.cerca-campo svg {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 20px;
    height: 20px;
    translate: 0 -50%;
    fill: none;
    stroke: var(--ambra);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.cerca-campo input {
    width: 100%;
    padding: 14px 14px 14px 44px;
    border: 1px solid var(--bordo);
    border-radius: 14px;
    background: var(--vetro);
    color: var(--testo);
    font: inherit;
    font-size: 1.05rem;
}

.cerca-campo input:focus {
    outline: 2px solid var(--ambra);
    outline-offset: 2px;
}

#cerca-esiti {
    transition: opacity 0.2s;
}

#cerca-esiti.attesa {
    opacity: 0.55;
}

.gruppo-cerca h2 {
    margin: 22px 0 10px;
    font-size: 1.15rem;
}

.gruppo-cerca h2 small {
    margin-left: 6px;
    color: var(--spento);
    font-size: 0.85rem;
}

.risultati {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.risultati li {
    border-radius: 14px;
    animation: problemi-riga 0.35s ease-out both;
}

.risultati a {
    display: grid;
    gap: 4px;
    padding: 12px 16px;
    color: inherit;
    text-decoration: none;
}

.risultati a span {
    color: var(--spento);
    font-size: 0.92rem;
}

.risultati li.altri {
    padding: 4px 16px;
    color: var(--spento);
    font-size: 0.9rem;
    animation: none;
}

.risultati mark {
    padding: 0 2px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ambra) 45%, transparent);
    color: inherit;
}

/* --- lente fluttuante (30/10, Ale): in basso a destra, ondeggia piano e "respira" --- */
.lente-fluttuante {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 15;                                               /* sotto la testata e il visore */
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--ambra) 60%, transparent);
    background: transparent;   /* niente vetro (30/10, Ale): il pieno copriva il testo */
    color: var(--ambra);
    box-shadow: 0 0 0 0 rgba(255, 176, 32, 0.45);
    animation: lente-respira 2.8s ease-out infinite;            /* l'ondeggiare è in sito.js: casuale */
    transition: transform 0.3s var(--molla), opacity 0.3s;
}

/* mentre si scorre la pagina spariscono, fermi ricompaiono (30/10, Ale) */
.scorrendo .lente-fluttuante,
.scorrendo .violino-fluttuante,
.al-piede .lente-fluttuante,                                   /* in fondo alla pagina: mai sopra il piè di pagina (30/10, Ale) */
.al-piede .violino-fluttuante {
    opacity: 0;
    pointer-events: none;
}

.lente-fluttuante:hover,
.lente-fluttuante:focus-visible {
    transform: scale(1.12) rotate(-12deg);
}

.lente-fluttuante svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

@keyframes lente-respira {
    0%   { box-shadow: 0 0 0 0 rgba(255, 176, 32, 0.45); }
    70%  { box-shadow: 0 0 0 16px rgba(255, 176, 32, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 176, 32, 0); }
}

/* --- violino fluttuante (30/10, Ale): sopra la lente · quando suona l'archetto va e vengono le note --- */
.violino-fluttuante {
    position: fixed;
    right: calc(max(18px, env(safe-area-inset-right)) + 58px + 14px);   /* accanto alla lente, non sopra (30/10, Ale) */
    bottom: calc(18px + 14.5px + env(safe-area-inset-bottom));          /* metà della lente, centrato alla sua altezza (30/10, Ale) */
    z-index: 15;
    width: 29px;
    height: 29px;
    padding: 1px;
    border: 1.5px solid color-mix(in srgb, var(--ambra) 60%, transparent);
    border-radius: 50%;
    background: transparent;   /* niente vetro come la lente (30/10, Ale) */
    color: var(--ambra);
    cursor: pointer;
    transition: transform 0.3s var(--molla), background 0.4s, opacity 0.3s;
}

.violino-fluttuante:hover,
.violino-fluttuante:focus-visible {
    transform: scale(1.1) rotate(8deg);
}

.violino-fluttuante svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.violino-fluttuante .corpo {
    fill: color-mix(in srgb, var(--ambra) 70%, transparent);
    stroke-width: 1.8;
}

.violino-fluttuante .manico,
.violino-fluttuante .riccio {
    fill: color-mix(in srgb, var(--ambra) 85%, transparent);
    stroke-width: 1.4;
}

.violino-fluttuante .corde-violino {   /* NON "corde": è il nome delle corde animate della home */
    stroke-width: 0.5;
}

.violino-fluttuante .ponticello {
    stroke-width: 1.4;
}

.violino-fluttuante .arco path {
    stroke: #f4e6c8;                                           /* archetto chiaro: si vede sul violino ambra */
    stroke-width: 2.2;
}

.violino-fluttuante .arco .crini {
    stroke-width: 0.6;
    opacity: 0.7;
}

/* --- mentre suona: fondo caldo, archetto avanti e indietro, strumento che "vibra", note che salgono --- */
.violino-fluttuante.in-musica {
    background: linear-gradient(135deg, var(--ambra), var(--rubino));
    color: #120d08;
    animation: lente-respira 2.8s ease-out -1.4s infinite;
}

.violino-fluttuante.in-musica .arco {
    animation: arcata-violino 1.1s ease-in-out infinite;
}

.violino-fluttuante.in-musica .vibra {                     /* gruppo esterno: la rotazione del disegno resta intatta */
    animation: vibrato-violino 0.55s ease-in-out infinite;
    transform-origin: 32px 40px;
    transform-box: view-box;
}

.violino-fluttuante.in-musica .corpo,
.violino-fluttuante.in-musica .manico,
.violino-fluttuante.in-musica .riccio {
    fill: rgba(18, 13, 8, 0.35);                               /* su fondo ambra: violino scuro */
}

@keyframes arcata-violino {
    0%, 100% { transform: translate(-7px, 2.6px); }
    50%      { transform: translate(7px, -2.6px); }
}

@keyframes vibrato-violino {
    0%, 100% { rotate: 0deg; }
    50%      { rotate: 2.5deg; }
}

.note-volanti {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.note-volanti i {
    position: absolute;
    left: 10px;                                                /* violino a metà (30/10): note in proporzione */
    top: 2px;
    opacity: 0;
    color: var(--ambra);
    font: normal 700 13px/1 serif;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.violino-fluttuante.in-musica .note-volanti i {
    animation: nota-sale 2.4s ease-out infinite;
}

.violino-fluttuante.in-musica .note-volanti i:nth-child(2) {
    animation-delay: 0.8s;
    color: #ffe14d;
}

.violino-fluttuante.in-musica .note-volanti i:nth-child(3) {
    animation-delay: 1.6s;
    color: #ff8fb0;
}

@keyframes nota-sale {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.6) rotate(0deg); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-26px, -54px) scale(1.25) rotate(-20deg); }
}

/* --- 30/10 (Ale): anello che pulsa a tempo di musica (--livello 0…1 da sito.js) --- */
.violino-fluttuante {
    -webkit-touch-callout: none;                               /* pressione lunga = accordatore, non menu */
    user-select: none;
}

.violino-fluttuante::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid var(--ambra);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.violino-fluttuante.in-musica::after {
    opacity: calc(0.15 + var(--livello, 0) * 0.85);
    transform: scale(calc(1 + var(--livello, 0) * 0.3));
    transition: none;
}

/* --- 30/10 (Ale): accordatore in corso (Sol · Re · La · Mi) --- */
.violino-fluttuante.accorda {
    background: color-mix(in srgb, var(--ambra) 25%, transparent);
    animation: lente-respira 1.6s ease-out infinite;
}

/* --- 30/10 (Ale): pallino accanto al nome · ambra fermo = solo tu · verde che pulsa = altri adesso (31/10) --- */
.firma {
    position: relative;
}

.vivi {
    position: absolute;
    top: 2px;
    right: -16px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ambra);
}

.vivi.altri {
    background: #3ddc84;
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6);
    animation: vivi-pulsa 2s ease-out infinite;
}

.vivi[hidden] {
    display: none;
}

@keyframes vivi-pulsa {
    0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); }
    70%  { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

/* --- 30/10 (Ale): "Accadde oggi" in home, sotto il titolo --- */
.accadde .vetro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 640px;
    margin: 0 auto;
    padding: 14px 18px;    /* 31/10 (Ale): testo attaccato al bordo */
    color: inherit;
    text-decoration: none;
}

.accadde-titolo {
    color: var(--ambra);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* --- 30/10 (Ale): citazione del giorno, sopra il piè di pagina --- */
.citazione {
    max-width: 640px;
    margin: 40px auto 0;
    padding: 0 20px;
    color: var(--tenue);
    font: italic 1.05rem/1.4 var(--serif);
    text-align: center;
}

.citazione span {
    white-space: nowrap;
}

/* --- 01/11 (Ale): telefono → citazione CENTRATA tra fine testo e piede (~38 px sopra e sotto);
       l'ultimo blocco della pagina ha già 48 px di fondo, per questo il margine è negativo --- */
@media (max-width: 520px) {
    .citazione {
        margin-top: -26px;
    }
}

/* --- 01/11 (Ale): sole di ieri, prima voce del piè di pagina --- */
.solare-ieri b {
    color: var(--testo);
    font-weight: 600;
}

.solare-ieri .pannello {
    width: 22px;
    height: 16px;
    margin-right: 7px;
    vertical-align: -3px;
}

.pannello .telaio {
    fill: #1b2a4a;
    stroke: var(--ambra);
    stroke-width: 1;
}

.pannello .celle,
.pannello .piedino {
    fill: none;
    stroke: rgba(240, 162, 75, 0.55);
    stroke-width: 0.8;
}

.pannello .piedino {
    stroke: var(--tenue);
}

/* --- il riflesso del sole che scorre sulle celle, lento, poi una pausa --- */
.pannello .riflesso {
    fill: rgba(255, 244, 214, 0.55);
    transform: skewX(-20deg);
    animation: riflesso-pannello 7s ease-in-out infinite;
}

@keyframes riflesso-pannello {
    0%       { transform: translateX(0) skewX(-20deg); }
    35%, 100% { transform: translateX(48px) skewX(-20deg); }
}

/* --- 30/10 (Ale): easter egg, 5 tocchi sul nome → l'aurora fa festa --- */
.festa .aurora {
    animation: festa-colori 2s linear 3;
}

@keyframes festa-colori {
    from { filter: hue-rotate(0deg) saturate(1.6); }
    to   { filter: hue-rotate(360deg) saturate(1.6); }
}

@media print {
    .lente-fluttuante,
    .violino-fluttuante {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   AVVISO PRIMA DELL'INVIO (30/10, Ale: "lampeggiante multicolore, osa di più")
   bordo arcobaleno che scorre + alone che pulsa + scossa all'arrivo +
   motivi che entrano uno alla volta. Ritmo lento (niente lampi rapidi:
   sicuro anche per chi è sensibile alla luce); fermo con "meno movimento".
   --------------------------------------------------------------------- */
@property --giro {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.avviso.problemi {                                       /* 2 classi: vince su .avviso.errore */
    position: relative;
    color: #fbeef2;                                      /* fondo sempre scuro: testo chiaro con ogni tema */
    margin: 0 0 18px;
    padding: 14px 16px 14px 18px;
    border: 2px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(var(--sfondo-problemi, rgba(30, 10, 20, 0.92)), var(--sfondo-problemi, rgba(30, 10, 20, 0.92))) padding-box,
        conic-gradient(from var(--giro), #ff3b6b, #ffb020, #ffe14d, #3dffa8, #3db8ff, #b36bff, #ff3b6b) border-box;
    animation: problemi-giro 3s linear infinite, problemi-alone 1.6s ease-in-out infinite;
}

.problemi[hidden] {
    display: none;
}

.avviso.problemi.scuoti {
    animation: problemi-giro 3s linear infinite, problemi-alone 1.6s ease-in-out infinite, problemi-scossa 0.5s ease-in-out;
}

.problemi p {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 8px;
    font-weight: 600;
}

.problemi .segnale {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-weight: 800;
    color: #1a0a10;
    animation: problemi-colori 2.4s linear infinite, problemi-battito 1.2s ease-in-out infinite;
}

.problemi ul {
    margin: 0;
    padding-left: 1.3em;
}

.problemi li {
    margin: 4px 0;
    animation: problemi-riga 0.45s ease-out both;
    animation-delay: calc(var(--n, 0) * 120ms);
}

.problemi li::marker {
    color: #ffb020;
}

@keyframes problemi-giro {
    to { --giro: 360deg; }
}

@keyframes problemi-alone {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 59, 107, 0.35); }
    33%      { box-shadow: 0 0 18px rgba(255, 176, 32, 0.55); }
    66%      { box-shadow: 0 0 18px rgba(61, 184, 255, 0.55); }
}

@keyframes problemi-colori {
    0%, 100% { background: #ff3b6b; }
    20%      { background: #ffb020; }
    40%      { background: #ffe14d; }
    60%      { background: #3dffa8; }
    80%      { background: #3db8ff; }
}

@keyframes problemi-battito {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

@keyframes problemi-scossa {
    0%, 100% { translate: 0; }
    20%      { translate: -8px; }
    40%      { translate: 7px; }
    60%      { translate: -5px; }
    80%      { translate: 3px; }
}

@keyframes problemi-riga {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes busta-fluttua {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-10px) rotate(6deg); }
}

@keyframes busta-vola {
    0%   { transform: translate(0, 0) rotate(-6deg) scale(1); opacity: 1; }
    45%  { transform: translate(60vw, -40vh) rotate(25deg) scale(0.4); opacity: 0; }
    55%  { transform: translate(0, 30px) scale(0.6); opacity: 0; }
    100% { transform: translate(0, 0) rotate(-6deg) scale(1); opacity: 1; }
}

/* ---------------------------------------------------------------------
   CHI PREFERISCE MENO MOVIMENTO: tutto fermo, tutto visibile
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .js .appare {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------------
   31/10 (Ale): PASSAGGI TRA PAGINE come in un'app (View Transitions tra
   documenti): la pagina vecchia sfuma nella nuova e la testata col nome
   resta ferma. Browser che non lo conoscono: cambio pagina come prima.
   --------------------------------------------------------------------- */
@view-transition {
    navigation: auto;
}

.testata {
    view-transition-name: testata;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.28s;
}

/* --- 31/10 (Ale): sul telefono il menu aperto copre tutta la pagina → ha una transizione sua:
       sale e sparisce subito, poi si vede la pagina nuova che sfuma (prima l'effetto restava nascosto) --- */
@media (max-width: 980px) {
    #menu {
        view-transition-name: menu;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.4s;
    }
}

::view-transition-group(menu) {
    animation: none;
}

::view-transition-old(menu) {
    animation: menu-via 0.22s ease-in both;
}

::view-transition-new(menu) {
    animation: none;
    opacity: 0;
}

@keyframes menu-via {
    to {
        opacity: 0;
        transform: translateY(-28px) scaleY(0.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}