/* Pagina di accesso, colonna di destra: «Plico». Un piano di lavoro blu notte visto dall'alto, luce radente da
   in alto a sinistra. Una cartellina, una relazione, un elenco e una tavola (fogli A4 disegnati in SVG) arrivano
   uno alla volta e si posano storti; poi si squadrano in un plico, una fascia blu notte lo lega, un sigillo di
   ceralacca con la freccia del marchio in rilievo lo chiude; il plico scivola via e il piano resta pronto per il
   prossimo. Tutto in trasformazioni e opacità (nessun filtro animato): un ciclo di 18 s in keyframes CSS, acceso
   da js/accesso-plico.js con la classe tx-accesso-plico-animata sulla radice e messo in pausa con
   tx-accesso-plico-sospesa. La fase iniziale è al 51 % del ciclo, cioè il plico completo: è lo stesso quadro
   dello stato fermo, così fra fermo e animato non c'è nessun salto. Da ferma (senza copione o con «meno
   movimento»): il plico squadrato, legato e sigillato.
   Dalla proposta di _Documenti/Proposte/accesso (destre/plico), portata nel portale il 06/11/2026: qui con i nomi
   del portale (tx-accesso-plico 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-plico, così non tocca nient'altro. */

.tx-accesso-plico {
    --tx-accesso-plico-t: 18s;
    --tx-accesso-plico-fase: calc(var(--tx-accesso-plico-t) * -.51);
    --tx-accesso-plico-fondo-a: #23247c;
    --tx-accesso-plico-fondo-b: #1a1a5e;
    --tx-accesso-plico-fondo-c: #13144a;
    --tx-accesso-plico-luce: 125, 140, 255;
    --tx-accesso-plico-ombra: 5, 6, 40;
    --tx-accesso-plico-inchiostro: #1d2130;
    --tx-accesso-plico-h: min(600px, 64vh, 40vw);
    --tx-accesso-plico-w: calc(var(--tx-accesso-plico-h) / 1.4142);
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--tx-accesso-plico-fondo-b);
    background-image:
        radial-gradient(ellipse 72% 58% at 20% 8%, rgba(var(--tx-accesso-plico-luce), .26), rgba(var(--tx-accesso-plico-luce), 0) 70%),
        radial-gradient(ellipse 90% 60% at 60% 112%, rgba(var(--tx-accesso-plico-ombra), .5), rgba(var(--tx-accesso-plico-ombra), 0) 70%),
        linear-gradient(168deg, var(--tx-accesso-plico-fondo-a) 0%, var(--tx-accesso-plico-fondo-b) 48%, var(--tx-accesso-plico-fondo-c) 100%);
    color: #fff;
    font-family: Inter, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

[data-theme-mode="dark"] .tx-accesso-plico {
    --tx-accesso-plico-fondo-a: #1c1d68;
    --tx-accesso-plico-fondo-b: #15164e;
    --tx-accesso-plico-fondo-c: #0e0f38;
    --tx-accesso-plico-luce: 110, 124, 236;
}

/* La scena: un foglio A4 al centro, un po' sopra la metà; le carte, la fascia e il sigillo si misurano su
   di lei. Alta al massimo 600 px, 64 % della finestra o 40 % della sua larghezza: a 1366×650 è 416 px. */
.tx-accesso-plico-scena {
    position: absolute;
    left: calc(50% - var(--tx-accesso-plico-w) / 2);
    top: calc(47% - var(--tx-accesso-plico-h) / 2);
    width: var(--tx-accesso-plico-w);
    height: var(--tx-accesso-plico-h);
    pointer-events: none;
}

.tx-accesso-plico-pila {
    position: absolute;
    inset: 0;
}

/* le carte: carta avorio con l'orlo in ombra verso il basso a destra (la luce viene da in alto a sinistra) */
.tx-accesso-plico-carta {
    position: absolute;
    inset: 0;
    border-radius: 1px;
    background: linear-gradient(135deg, #fffefb 0%, #fdfcf8 45%, #f6f3ea 100%);
    box-shadow:
        1px 1px 0 rgba(var(--tx-accesso-plico-ombra), .3),
        5px 9px 16px -5px rgba(var(--tx-accesso-plico-ombra), .55);
    transform-origin: 50% 50%;
}

/* l'ombra di una carta sollevata, più lunga e più morbida: si vede solo mentre arriva */
.tx-accesso-plico-carta::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 16px 26px 36px -2px rgba(var(--tx-accesso-plico-ombra), .6);
    opacity: 0;
    z-index: -1;
}

.tx-accesso-plico-disegno {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.tx-accesso-plico-cartella {
    z-index: 1;
    left: -2.5%;
    right: -2.5%;
    top: -2%;
    bottom: -2%;
    border-radius: 2px;
    background: linear-gradient(135deg, #f0eadc 0%, #ebe4d4 45%, #e3dbc8 100%);
}

/* la linguetta della cartella, a filo del bordo superiore (è la copertina di dietro che sporge) */
.tx-accesso-plico-linguetta {
    position: absolute;
    right: 9%;
    top: -7%;
    width: 34%;
    height: 7%;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, #e6dfcd 0%, #ddd5c1 100%);
    box-shadow: 1px 0 0 rgba(var(--tx-accesso-plico-ombra), .22);
}

.tx-accesso-plico-relazione { z-index: 2; }
.tx-accesso-plico-elenco { z-index: 3; }

.tx-accesso-plico-tavola {
    z-index: 4;
    background: linear-gradient(135deg, #fbf9f2 0%, #f8f5ec 45%, #f1ede1 100%);
}

/* la fascia: una striscia di carta blu notte che gira attorno al plico, un filo di luce sul bordo alto */
.tx-accesso-plico-fascia {
    position: absolute;
    z-index: 6;
    left: -4%;
    right: -4%;
    top: 46.5%;
    height: 10.5%;
    border-radius: 1px;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .24) 100%),
        linear-gradient(90deg, #0f1040 0%, #1a1a5e 2.2%, #1e1f6c 50%, #1a1a5e 97.8%, #0f1040 100%);
    box-shadow:
        0 1px 0 rgba(var(--tx-accesso-plico-ombra), .35),
        0 4px 7px -1px rgba(var(--tx-accesso-plico-ombra), .5);
    transform-origin: 0% 50%;
}

/* il sigillo: un disco di ceralacca blu notte con la freccia del marchio in rilievo, al centro della fascia */
.tx-accesso-plico-sigillo {
    position: absolute;
    z-index: 7;
    left: 36.5%;
    top: 42.2%;
    width: 27%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    box-shadow:
        0 1px 1px rgba(var(--tx-accesso-plico-ombra), .45),
        3px 5px 12px rgba(var(--tx-accesso-plico-ombra), .55);
    transform-origin: 50% 50%;
}

.tx-accesso-plico-cera {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* due righe quiete in basso a sinistra */
.tx-accesso-plico-testo {
    position: absolute;
    left: 7.5%;
    bottom: 6.5%;
    max-width: 72%;
    margin: 0;
}

.tx-accesso-plico-nome {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: clamp(15px, 1.05vw, 19px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #fff;
}

.tx-accesso-plico-riga {
    margin: .3em 0 0;
    font-family: Inter, sans-serif;
    font-size: clamp(13px, .9vw, 16px);
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, .76);
}

/* ---------- in movimento: il ciclo di 18 s (1 % = 0,18 s) ----------
   0–25 %  le quattro carte arrivano, una ogni 6 %, e si posano storte
   28–34 % si squadrano tutte insieme
   37–42 % la fascia gira attorno al plico, da sinistra a destra
   44–50 % il sigillo scende, preme e si posa
   50–76 % il plico completo, fermo (è anche il quadro di partenza: fase 51 %)
   76–84 % il plico scivola via a destra, fuori dalla colonna, e svanisce
   84–100 % il piano vuoto, pronto per il prossimo */

.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-pila,
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-carta,
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-carta::before,
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-fascia,
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-sigillo {
    animation-duration: var(--tx-accesso-plico-t);
    animation-timing-function: linear;
    animation-delay: var(--tx-accesso-plico-fase);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    will-change: transform, opacity;
}

.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-pila { animation-name: tx-accesso-plico-pila; }
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-cartella { animation-name: tx-accesso-plico-cartella; }
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-cartella::before { animation-name: tx-accesso-plico-cartella-ombra; }
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-relazione { animation-name: tx-accesso-plico-relazione; }
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-relazione::before { animation-name: tx-accesso-plico-relazione-ombra; }
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-elenco { animation-name: tx-accesso-plico-elenco; }
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-elenco::before { animation-name: tx-accesso-plico-elenco-ombra; }
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-tavola { animation-name: tx-accesso-plico-tavola; }
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-tavola::before { animation-name: tx-accesso-plico-tavola-ombra; }
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-fascia { animation-name: tx-accesso-plico-fascia; }
.tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-sigillo { animation-name: tx-accesso-plico-sigillo; }

/* scheda nascosta: tutto fermo dov'è */
.tx-accesso-plico.tx-accesso-plico-sospesa .tx-accesso-plico-pila,
.tx-accesso-plico.tx-accesso-plico-sospesa .tx-accesso-plico-carta,
.tx-accesso-plico.tx-accesso-plico-sospesa .tx-accesso-plico-carta::before,
.tx-accesso-plico.tx-accesso-plico-sospesa .tx-accesso-plico-fascia,
.tx-accesso-plico.tx-accesso-plico-sospesa .tx-accesso-plico-sigillo {
    animation-play-state: paused;
}

@keyframes tx-accesso-plico-cartella {
    0% { opacity: 0; transform: translate(-58%, 34%) rotate(-13deg) scale(1.06); animation-timing-function: cubic-bezier(.22, .75, .2, 1); }
    2% { opacity: 1; }
    7% { transform: translate(-3.5%, 3%) rotate(-3.5deg) scale(1); animation-timing-function: linear; }
    28% { transform: translate(-3.5%, 3%) rotate(-3.5deg) scale(1); animation-timing-function: cubic-bezier(.65, 0, .3, 1); }
    34%, 100% { opacity: 1; transform: none; }
}

@keyframes tx-accesso-plico-relazione {
    0%, 6% { opacity: 0; transform: translate(50%, -48%) rotate(11deg) scale(1.06); animation-timing-function: cubic-bezier(.22, .75, .2, 1); }
    8% { opacity: 1; }
    13% { transform: translate(3%, -2.5%) rotate(4deg) scale(1); animation-timing-function: linear; }
    28% { transform: translate(3%, -2.5%) rotate(4deg) scale(1); animation-timing-function: cubic-bezier(.65, 0, .3, 1); }
    34%, 100% { opacity: 1; transform: none; }
}

@keyframes tx-accesso-plico-elenco {
    0%, 12% { opacity: 0; transform: translate(-56%, -36%) rotate(-10deg) scale(1.06); animation-timing-function: cubic-bezier(.22, .75, .2, 1); }
    14% { opacity: 1; }
    19% { transform: translate(-2%, -1.5%) rotate(-2deg) scale(1); animation-timing-function: linear; }
    28% { transform: translate(-2%, -1.5%) rotate(-2deg) scale(1); animation-timing-function: cubic-bezier(.65, 0, .3, 1); }
    34%, 100% { opacity: 1; transform: none; }
}

@keyframes tx-accesso-plico-tavola {
    0%, 18% { opacity: 0; transform: translate(62%, 20%) rotate(9deg) scale(1.06); animation-timing-function: cubic-bezier(.22, .75, .2, 1); }
    20% { opacity: 1; }
    25% { transform: translate(2.5%, 2%) rotate(3deg) scale(1); animation-timing-function: linear; }
    28% { transform: translate(2.5%, 2%) rotate(3deg) scale(1); animation-timing-function: cubic-bezier(.65, 0, .3, 1); }
    34%, 100% { opacity: 1; transform: none; }
}

@keyframes tx-accesso-plico-cartella-ombra {
    0% { opacity: 0; }
    2%, 5.5% { opacity: 1; }
    7.5%, 100% { opacity: 0; }
}

@keyframes tx-accesso-plico-relazione-ombra {
    0%, 6% { opacity: 0; }
    8%, 11.5% { opacity: 1; }
    13.5%, 100% { opacity: 0; }
}

@keyframes tx-accesso-plico-elenco-ombra {
    0%, 12% { opacity: 0; }
    14%, 17.5% { opacity: 1; }
    19.5%, 100% { opacity: 0; }
}

@keyframes tx-accesso-plico-tavola-ombra {
    0%, 18% { opacity: 0; }
    20%, 23.5% { opacity: 1; }
    25.5%, 100% { opacity: 0; }
}

@keyframes tx-accesso-plico-fascia {
    0%, 37% { transform: scaleX(0); animation-timing-function: cubic-bezier(.3, .6, .2, 1); }
    42%, 100% { transform: scaleX(1); }
}

@keyframes tx-accesso-plico-sigillo {
    0%, 44% { opacity: 0; transform: translateY(-16%) scale(1.75); animation-timing-function: cubic-bezier(.45, 0, .7, .6); }
    45.5% { opacity: 1; }
    48.5% { transform: translateY(0) scale(.955); animation-timing-function: cubic-bezier(.2, .6, .3, 1); }
    50%, 100% { opacity: 1; transform: none; }
}

@keyframes tx-accesso-plico-pila {
    0%, 76% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
    82.5% { opacity: 1; }
    84% { opacity: 0; transform: translate(150%, -12%) rotate(6deg); animation-timing-function: linear; }
    100% { opacity: 0; transform: none; }
}

/* chi chiede meno movimento vede il plico completo e fermo */
@media (prefers-reduced-motion: reduce) {
    .tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-pila,
    .tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-carta,
    .tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-carta::before,
    .tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-fascia,
    .tx-accesso-plico.tx-accesso-plico-animata .tx-accesso-plico-sigillo {
        animation: none;
        will-change: auto;
    }
}