/* Pagina di accesso, colonna di destra: «Corsia», una corsia di magazzino in prospettiva centrale che si compone da
   sola, tratto dopo tratto (il suolo, i correnti, i montanti campata per campata, i pallet sui livelli), e alla
   fine le plafoniere si accendono una dopo l'altra, dalla vicina alla lontana, e la luce calda cade sul pavimento
   e sulle facce dei pallet. Disegno al tratto bianco su blu notte: un solo SVG a tutta colonna (viewBox 600x900,
   slice), con ritardo e durata di ogni tratto e di ogni luce nelle variabili --t e --d dell'elemento. La sequenza
   è tutta qui; js/accesso-pausa.js mette solo la pausa a scheda nascosta (classe wlp-scena--ferma sulla radice), e
   senza di lui la corsia si compone lo stesso. Con «meno movimento» è completa e accesa da subito.
   Scritta il 29/10/2026 sul modello della «Facciata» di RpvcPortal (wwwroot/css/accesso-facciata.css), con i nomi
   di questo portale (radice wlp-corsia, classi wlc-, variabili --wlc-, keyframes wlp-corsia-*). Il file è caricato
   su tutte le pagine: selettori tutti sotto .wlp-corsia. */
.wlp-corsia {
    --wlc-notte: #1a2a52;
    --wlc-alto: #0b1230;
    --wlc-medio: #1d3060;
    --wlc-suolo: #0e1736;
    --wlc-testo: rgba(255, 255, 255, .8);
    --wlc-versione: rgba(255, 255, 255, .52);              /* sul pavimento ~5:1 in chiaro e in scuro */
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    margin: 0;
    background: var(--wlc-notte);
    color: #fff;
    font-family: "Inter", system-ui, sans-serif;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}

[data-theme-mode="dark"] .wlp-corsia {
    --wlc-notte: #152242;
    --wlc-alto: #070c20;
    --wlc-medio: #172850;
    --wlc-suolo: #0a1230;
}

/* La scena: un solo SVG a tutta colonna; la corsia sta al centro, soffitto e pavimento arrivano ai bordi. */
.wlp-corsia .wlc-scena {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.wlp-corsia .wlc-c-alto { stop-color: var(--wlc-alto); }
.wlp-corsia .wlc-c-medio { stop-color: var(--wlc-medio); }
.wlp-corsia .wlc-c-suolo { stop-color: var(--wlc-suolo); }

/* Pesi del tratto: i bordi della corsia e la mezzeria, i correnti, i montanti davanti (larghezza per elemento,
   più sottile in lontananza) e dietro, le facce dei pallet con la riga del pallet. */
.wlp-corsia .wlc-g { stroke-width: 1; stroke-opacity: .42; }
.wlp-corsia .wlc-g2 { stroke-width: .9; stroke-opacity: .2; }
.wlp-corsia .wlc-p { stroke-width: 1.1; stroke-opacity: .9; }
.wlp-corsia .wlc-m { stroke-opacity: .95; }
.wlp-corsia .wlc-r { stroke-opacity: .3; }
.wlp-corsia .wlc-f { fill: #fff; fill-opacity: .07; stroke: #fff; stroke-opacity: .5; stroke-width: .7; stroke-linejoin: round; }
.wlp-corsia .wlc-d { fill: none; stroke: #fff; stroke-opacity: .35; stroke-width: .6; stroke-linecap: round; }

/* La luce: le facce dei pallet che si schiariscono, il bagliore e il corpo delle plafoniere. */
.wlp-corsia .wlc-lf { fill: #fff4d6; fill-opacity: .17; }
.wlp-corsia .wlc-lb { stroke: #fff4d6; stroke-width: 9; stroke-opacity: .3; stroke-linecap: round; }
.wlp-corsia .wlc-lc { stroke: #fff4d6; stroke-width: 2.6; stroke-opacity: .95; stroke-linecap: round; }

/* I testi: il marchio in alto, la didascalia sul pavimento, la versione in fondo. */
.wlp-corsia .wlc-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(--wlc-testo);
}

/* La didascalia passa dal dizionario: è larga quanto la colonna meno i margini e va a capo da sé. */
.wlp-corsia .wlc-didascalia {
    position: absolute;
    top: calc(50% + 26vh);
    left: 24px;
    right: 24px;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--wlc-testo);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

/* La versione del portale, in fondo al pavimento, appena leggibile: serve all'assistenza («che versione vedi?»).
   Ferma: c'è da subito, anche durante la sequenza. */
.wlp-corsia .wlc-versione {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    margin: 0;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .08em;
    color: var(--wlc-versione);
}

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

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

    /* le plafoniere si accendono con l'innesco di un neon: due cali di luce, poi luce ferma */
    .wlp-corsia .wlc-l {
        animation: wlp-corsia-accende var(--d, .6s) ease-out var(--t, 0s) both;
    }

    .wlp-corsia .wlc-didascalia {
        animation: wlp-corsia-appare 1.2s ease-out 9.2s both;
    }

    .wlp-corsia.wlp-scena--ferma .wlc-t,
    .wlp-corsia.wlp-scena--ferma .wlc-a,
    .wlp-corsia.wlp-scena--ferma .wlc-l,
    .wlp-corsia.wlp-scena--ferma .wlc-didascalia {
        animation-play-state: paused;
    }
}

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

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

@keyframes wlp-corsia-accende {
    0% { opacity: 0; }
    18% { opacity: .75; }
    30% { opacity: .12; }
    48% { opacity: .9; }
    62% { opacity: .45; }
    100% { opacity: 1; }
}