/* Pagina di accesso, colonna di destra: «Blocchi», un file grande che arriva a blocchi. Una piastra di vetro
   scuro incisa a 18×12 celle; un fronte di luce bianca le riempie una dopo l'altra e decade nell'azzurro del
   marchio, due teste sui righelli seguono la cella corrente; quando la linea cade il fronte si ferma e la cella
   che aspetta respira piano, poi riprende dalla stessa cella; a fine corsa le fughe spariscono sotto una lastra
   unica e un segno sottile dice che il file è arrivato. Lo stato di questo foglio (senza copione, o con «meno
   movimento») è la lastra completa: tutte le celle piene e il segno tracciato. Il copione (js/accesso-blocchi.js)
   mette sulla radice tx-accesso-blocchi-animata e poi le fasi (tx-accesso-blocchi-corsa, -chiusa, -arrivato,
   -sfuma) e sulle celle tx-accesso-blocchi-vuoto / -pieno / -attesa. Il quadro è largo in proporzione alla
   colonna ma limitato dall'altezza: a 1366×650 sta tutto, con la didascalia sotto.
   Dalla proposta di _Documenti/Proposte/accesso (destre/blocchi, destra.css), portata nel portale il 06/11/2026
   con i nomi del portale (tx-accesso-blocchi anche per le variabili, gli id dei gradienti e i keyframes). Il
   foglio è caricato su tutte le pagine: ogni selettore parte dalla radice .tx-accesso-blocchi. */

.tx-accesso-blocchi {
    --tx-accesso-blocchi-fondo-a: #1c1d66;
    --tx-accesso-blocchi-fondo-b: #15163f;
    --tx-accesso-blocchi-fondo-c: #0f1030;
    --tx-accesso-blocchi-luce-rgb: 125, 140, 255;
    --tx-accesso-blocchi-tassello: #4f6df5;
    --tx-accesso-blocchi-fronte: #ffffff;
    --tx-accesso-blocchi-fronte-coda: #b9c4ff;
    --tx-accesso-blocchi-attesa-rgb: 159, 176, 255;
    --tx-accesso-blocchi-vuoto: rgba(255, 255, 255, .035);
    --tx-accesso-blocchi-fuga: rgba(255, 255, 255, .085);
    --tx-accesso-blocchi-righello: rgba(255, 255, 255, .30);
    --tx-accesso-blocchi-righello-minore: rgba(255, 255, 255, .17);
    --tx-accesso-blocchi-marca: #a9b8ff;
    --tx-accesso-blocchi-segno: #c7d0ff;
    --tx-accesso-blocchi-testo: #ffffff;
    --tx-accesso-blocchi-testo-nota: rgba(255, 255, 255, .72);
    --tx-accesso-blocchi-ombra: rgba(3, 4, 24, .62);
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--tx-accesso-blocchi-fondo-b);
    background-image:
        radial-gradient(ellipse 62% 46% at 18% 0%, rgba(var(--tx-accesso-blocchi-luce-rgb), .22), rgba(var(--tx-accesso-blocchi-luce-rgb), 0) 70%),
        linear-gradient(160deg, var(--tx-accesso-blocchi-fondo-a) 0%, var(--tx-accesso-blocchi-fondo-b) 52%, var(--tx-accesso-blocchi-fondo-c) 100%);
    color: var(--tx-accesso-blocchi-testo);
    font-family: Inter, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

[data-theme-mode="dark"] .tx-accesso-blocchi {
    --tx-accesso-blocchi-fondo-a: #16174f;
    --tx-accesso-blocchi-fondo-b: #101134;
    --tx-accesso-blocchi-fondo-c: #0a0b24;
    --tx-accesso-blocchi-ombra: rgba(0, 0, 10, .7);
    background-color: #101134;
}

/* Il quadro: largo in proporzione alla colonna, ma limitato dall'altezza, così a 1366×650 sta tutto con la
   didascalia sotto. L'SVG è 624×450 (righelli compresi) e tiene da solo la sua proporzione. */
.tx-accesso-blocchi-quadro {
    position: relative;
    width: min(70%, calc((100vh - 200px) * 1.3867), 800px);
    flex: none;
}

.tx-accesso-blocchi-tavola {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    pointer-events: none;
}

/* La materia della piastra: l'ombra che la stacca dal fondo sta su un riquadro HTML che coincide con la
   piastra nell'SVG (24/624, 24/450, 576/624, 384/450). */
.tx-accesso-blocchi-ombra {
    position: absolute;
    left: 3.846%;
    top: 5.333%;
    width: 92.308%;
    height: 85.333%;
    border-radius: 4px;
    box-shadow:
        0 44px 70px -28px var(--tx-accesso-blocchi-ombra),
        0 14px 24px -12px rgba(0, 0, 0, .45);
    pointer-events: none;
}

.tx-accesso-blocchi-piastra {
    fill: url(#tx-accesso-blocchi-piastra-luce);
    stroke: rgba(255, 255, 255, .14);
    stroke-width: 1;
}

/* i righelli e le teste */
.tx-accesso-blocchi-righello {
    fill: none;
    stroke: var(--tx-accesso-blocchi-righello);
    stroke-width: 1;
    stroke-linecap: butt;
}

.tx-accesso-blocchi-righello-minore {
    stroke: var(--tx-accesso-blocchi-righello-minore);
}

.tx-accesso-blocchi-marca {
    fill: var(--tx-accesso-blocchi-marca);
    opacity: 0;
    transition: opacity .45s ease;
}

.tx-accesso-blocchi-corsa .tx-accesso-blocchi-marca {
    opacity: 1;
}

/* le celle: da ferme sono tutte piene (il file è arrivato intero) */
.tx-accesso-blocchi-tassello {
    fill: var(--tx-accesso-blocchi-tassello);
    stroke: none;
}

.tx-accesso-blocchi-tassello.tx-accesso-blocchi-vuoto {
    fill: var(--tx-accesso-blocchi-vuoto);
    stroke: var(--tx-accesso-blocchi-fuga);
    stroke-width: 1;
}

/* il fronte di luce: la cella che si riempie è bianca e decade in azzurro; messe in fila, le ultime accese
   sono la coda luminosa del fronte */
.tx-accesso-blocchi-tassello.tx-accesso-blocchi-pieno {
    animation: tx-accesso-blocchi-accendi .8s cubic-bezier(.25, .55, .3, 1) both;
}

@keyframes tx-accesso-blocchi-accendi {
    0% { fill: var(--tx-accesso-blocchi-fronte); }
    28% { fill: var(--tx-accesso-blocchi-fronte-coda); }
    100% { fill: var(--tx-accesso-blocchi-tassello); }
}

/* la linea è caduta: la cella che aspetta respira piano */
.tx-accesso-blocchi-tassello.tx-accesso-blocchi-attesa {
    animation: tx-accesso-blocchi-respira 2.2s ease-in-out infinite;
}

@keyframes tx-accesso-blocchi-respira {
    0%, 100% { fill: rgba(var(--tx-accesso-blocchi-attesa-rgb), .10); }
    50% { fill: rgba(var(--tx-accesso-blocchi-attesa-rgb), .58); }
}

/* la chiusura: la lastra unica copre le fughe */
.tx-accesso-blocchi-chiusura {
    opacity: 0;
}

.tx-accesso-blocchi-chiusa .tx-accesso-blocchi-chiusura {
    opacity: 1;
    transition: opacity 1s ease;
}

.tx-accesso-blocchi-lastra {
    fill: url(#tx-accesso-blocchi-lastra-luce);
}

.tx-accesso-blocchi-lastra-bordo {
    fill: none;
    stroke: rgba(255, 255, 255, .32);
    stroke-width: 1;
}

/* il segno: da fermo è tracciato; in movimento si traccia quando il file è arrivato */
.tx-accesso-blocchi-segno {
    fill: none;
    stroke: var(--tx-accesso-blocchi-segno);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.tx-accesso-blocchi-animata .tx-accesso-blocchi-segno {
    stroke-dashoffset: 1;
}

.tx-accesso-blocchi-animata.tx-accesso-blocchi-arrivato .tx-accesso-blocchi-segno {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .6s ease-out .2s;
}

/* fra un ciclo e l'altro il contenuto della piastra sfuma; la piastra e i righelli restano */
.tx-accesso-blocchi-contenuto {
    transition: opacity 1.1s ease;
}

.tx-accesso-blocchi-sfuma .tx-accesso-blocchi-contenuto {
    opacity: 0;
}

/* la didascalia, allineata alla piastra */
.tx-accesso-blocchi-didascalia {
    width: min(70%, calc((100vh - 200px) * 1.3867), 800px);
    padding-left: 3.846%;
    padding-right: 3.846%;
    margin-top: clamp(14px, 2.6vh, 30px);
    flex: none;
}

.tx-accesso-blocchi-titolo {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: clamp(15px, 1.1vw, 18px);
    font-weight: 500;
    letter-spacing: -.005em;
    line-height: 1.4;
    color: var(--tx-accesso-blocchi-testo);
}

.tx-accesso-blocchi-nota {
    margin: 4px 0 0;
    font-family: Inter, sans-serif;
    font-size: clamp(13px, .95vw, 15.5px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--tx-accesso-blocchi-testo-nota);
}

@media (prefers-reduced-motion: reduce) {
    .tx-accesso-blocchi .tx-accesso-blocchi-tassello,
    .tx-accesso-blocchi .tx-accesso-blocchi-marca,
    .tx-accesso-blocchi .tx-accesso-blocchi-chiusura,
    .tx-accesso-blocchi .tx-accesso-blocchi-segno,
    .tx-accesso-blocchi .tx-accesso-blocchi-contenuto {
        animation: none;
        transition: none;
    }
}