/* Pagina di accesso, colonna di destra: «Pallet», un pallet in assonometria isometrica che si disegna al tratto, poi
   i colli che si posano uno alla volta, strato dopo strato, fino alla pila completa; una banda chiara la avvolge
   salendo (il film estensibile), resta una velatura e sulla faccia davanti compare l'etichetta del pallet. Disegno
   al tratto bianco su blu notte: un solo SVG (viewBox 600x900, meet) alto quanto la finestra, al massimo 1000 px,
   con ritardo e durata di ogni gruppo nelle variabili --t e --d. La sequenza è tutta qui; js/accesso-pausa.js mette
   solo la pausa a scheda nascosta (classe wlp-scena--ferma sulla radice). Con «meno movimento» la pila è completa,
   avvolta ed etichettata da subito (la banda del film, che passa e se ne va, da ferma non c'è).
   Scritta il 29/10/2026 per le scene di questo portale (radice wlp-pallet, classi wlpt-, variabili --wlpt-,
   keyframes wlp-pallet-*). Il file è caricato su tutte le pagine: selettori tutti sotto .wlp-pallet. */
.wlp-pallet {
    --wlpt-fondo-a: #203465;
    --wlpt-fondo-b: #121d3d;
    --wlpt-sorgente: 82, 116, 188;
    --wlpt-cima: #3d5486;
    --wlpt-destra: #2e4374;
    --wlpt-sinistra: #223561;
    --wlpt-legno-cima: #33476f;
    --wlpt-legno-destra: #283a60;
    --wlpt-legno-sinistra: #1f2f50;
    --wlpt-testo: rgba(255, 255, 255, .8);
    --wlpt-versione: rgba(255, 255, 255, .52);
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #1a2a52;
    background-image:
        radial-gradient(ellipse 56% 34% at 50% -6%, rgba(var(--wlpt-sorgente), .34), rgba(var(--wlpt-sorgente), 0) 72%),
        linear-gradient(180deg, var(--wlpt-fondo-a) 0%, var(--wlpt-fondo-b) 100%);
    color: #fff;
    font-family: Inter, sans-serif;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}

[data-theme-mode="dark"] .wlp-pallet {
    --wlpt-fondo-a: #182753;
    --wlpt-fondo-b: #0b132b;
    --wlpt-sorgente: 58, 88, 146;
    --wlpt-cima: #33487a;
    --wlpt-destra: #263a68;
    --wlpt-sinistra: #1b2c55;
    --wlpt-legno-cima: #2b3f66;
    --wlpt-legno-destra: #213356;
    --wlpt-legno-sinistra: #192845;
    background-color: #121d3d;
}

/* La tavola è alta quanto la finestra (al massimo 1000 px, centrata): la pila sta tutta nella prima schermata. */
.wlp-pallet .wlpt-tavola {
    position: absolute;
    left: 0;
    top: calc((100vh - min(100vh, 1000px)) / 2);
    display: block;
    width: 100%;
    height: min(100vh, 1000px);
    overflow: visible;
    pointer-events: none;
}

/* Le facce: tratto bianco e riempimenti pieni, tre toni del blu notte (cima, destra, sinistra: la luce viene da
   sopra e da destra). Pieni, non velati: un collo davanti copre gli spigoli di quello dietro, e la pila è una pila
   e non un reticolo trasparente. Il legno del pallet è più discreto. */
.wlp-pallet polygon {
    stroke: #fff;
    stroke-width: .9;
    stroke-opacity: .7;
    stroke-linejoin: round;
}

.wlp-pallet .wlpt-fc { fill: var(--wlpt-cima); }
.wlp-pallet .wlpt-fd { fill: var(--wlpt-destra); }
.wlp-pallet .wlpt-fs { fill: var(--wlpt-sinistra); }
.wlp-pallet .wlpt-legno polygon { stroke-opacity: .55; }
.wlp-pallet .wlpt-legno .wlpt-fc { fill: var(--wlpt-legno-cima); }
.wlp-pallet .wlpt-legno .wlpt-fd { fill: var(--wlpt-legno-destra); }
.wlp-pallet .wlpt-legno .wlpt-fs { fill: var(--wlpt-legno-sinistra); }
.wlp-pallet .wlpt-tavole,
.wlp-pallet .wlpt-nastro { fill: none; stroke: #fff; stroke-opacity: .38; stroke-width: .7; stroke-linecap: round; }

/* Il film: la banda che sale (da ferma non c'è), la velatura che resta, l'etichetta del pallet. */
.wlp-pallet .wlpt-film { opacity: 0; }
.wlp-pallet .wlpt-film polygon { fill: #fff; fill-opacity: .22; stroke: none; }
.wlp-pallet .wlpt-velo polygon { stroke: none; }
.wlp-pallet .wlpt-eti polygon { fill: #f7f8fb; fill-opacity: .95; stroke: none; }
.wlp-pallet .wlpt-eti-righe { fill: none; stroke: #1a2a52; stroke-opacity: .6; stroke-width: 1.1; stroke-linecap: round; }

/* La luce dietro la pila respira piano, sempre. */
.wlp-pallet .wlpt-luce {
    animation: wlp-pallet-respira 9s ease-in-out infinite alternate;
}

/* I testi: il marchio in alto, la didascalia sotto la pila, la versione in fondo. */
.wlp-pallet .wlpt-marchio {
    position: absolute;
    top: 32px;
    left: 24px;
    right: 24px;
    font-family: Montserrat, Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: .42em;
    text-indent: .42em;
    color: var(--wlpt-testo);
}

.wlp-pallet .wlpt-didascalia {
    position: absolute;
    top: calc(50% + 30vh);
    left: 24px;
    right: 24px;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--wlpt-testo);
}

.wlp-pallet .wlpt-versione {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    margin: 0;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .08em;
    color: var(--wlpt-versione);
}

/* Il movimento: solo per chi non chiede di ridurlo; da ferma la pila è completa. */
@media (prefers-reduced-motion: no-preference) {
    .wlp-pallet .wlpt-t {
        stroke-dasharray: 1 1;
        animation: wlp-pallet-traccia var(--d, .5s) cubic-bezier(.33, .08, .3, 1) var(--t, 0s) both;
    }

    .wlp-pallet .wlpt-a {
        animation: wlp-pallet-appare var(--d, .5s) ease-out var(--t, 0s) both;
    }

    .wlp-pallet .wlpt-c {
        animation: wlp-pallet-posa var(--d, .45s) cubic-bezier(.2, .7, .3, 1) var(--t, 0s) both;
    }

    .wlp-pallet .wlpt-film {
        animation: wlp-pallet-avvolge var(--d, 3s) ease-in-out var(--t, 0s) both;
    }

    .wlp-pallet .wlpt-velo {
        animation: wlp-pallet-appare var(--d, 1.2s) ease-out var(--t, 0s) both;
    }

    .wlp-pallet .wlpt-eti {
        animation: wlp-pallet-posa var(--d, .5s) cubic-bezier(.2, .7, .3, 1) var(--t, 0s) both;
    }

    .wlp-pallet .wlpt-didascalia {
        animation: wlp-pallet-appare 1.2s ease-out 13s both;
    }

    .wlp-pallet.wlp-scena--ferma .wlpt-t,
    .wlp-pallet.wlp-scena--ferma .wlpt-a,
    .wlp-pallet.wlp-scena--ferma .wlpt-c,
    .wlp-pallet.wlp-scena--ferma .wlpt-film,
    .wlp-pallet.wlp-scena--ferma .wlpt-velo,
    .wlp-pallet.wlp-scena--ferma .wlpt-eti,
    .wlp-pallet.wlp-scena--ferma .wlpt-luce,
    .wlp-pallet.wlp-scena--ferma .wlpt-didascalia {
        animation-play-state: paused;
    }
}

@keyframes wlp-pallet-traccia {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes wlp-pallet-appare {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes wlp-pallet-posa {
    0% { opacity: 0; transform: translateY(-14px); }
    60% { opacity: 1; transform: translateY(1.5px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes wlp-pallet-avvolge {
    0% { opacity: 0; transform: translateY(0); }
    8% { opacity: 1; }
    92% { opacity: 1; transform: translateY(var(--salita, -180px)); }
    100% { opacity: 0; transform: translateY(var(--salita, -180px)); }
}

@keyframes wlp-pallet-respira {
    from { opacity: .55; transform: translateY(0) scale(1); }
    to { opacity: 1; transform: translateY(-8px) scale(1.06); }
}

/* In fondo al foglio: a pari peso dei selettori di sopra, vince questo. */
@media (prefers-reduced-motion: reduce) {
    .wlp-pallet .wlpt-luce {
        animation: none;
    }
}