/* Pagina di accesso, colonna di destra: «Flusso», le tappe della merce in magazzino come una linea con le sue
   stazioni. Blu notte, una rotaia, sei stazioni (Ricevimento, Etichettatura, Stoccaggio, Prelievo, Imballo,
   Spedizione), un impulso di luce che va di stazione in stazione e accende la rotaia dietro di sé (mosso da
   js/accesso-flusso.js, che mette sulla radice wlp-flusso-animata e sulle stazioni wlp-flusso-accesa). Da ferma
   (senza copione o con «meno movimento»): la linea completa, tutte le stazioni accese. La tavola SVG (540×900) è
   alta quanto la finestra, al massimo 1000 px: a 1366×650 sta tutta.
   Portato il 29/10/2026 da «Percorso» di RpvcPortal (wwwroot/css/accesso-percorso.css), con i nomi di questo
   portale (wlp-flusso anche per le variabili, gli id dei gradienti e della maschera e i keyframes). Il foglio è
   caricato su tutte le pagine: ogni selettore parte dalla radice .wlp-flusso, così non tocca nient'altro. */
.wlp-flusso {
    --wlp-flusso-fondo-a: #203465;
    --wlp-flusso-fondo-b: #121d3d;
    --wlp-flusso-sorgente: 82, 116, 188;
    --wlp-flusso-alone: 150, 180, 255;
    --wlp-flusso-rotaia: rgba(255, 255, 255, .16);
    --wlp-flusso-anello-spento: rgba(255, 255, 255, .42);
    --wlp-flusso-testo-spento: .6;
    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 30% -6%, rgba(var(--wlp-flusso-sorgente), .34), rgba(var(--wlp-flusso-sorgente), 0) 72%),
        linear-gradient(180deg, var(--wlp-flusso-fondo-a) 0%, var(--wlp-flusso-fondo-b) 100%);
    color: #fff;
    font-family: Inter, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

[data-theme-mode="dark"] .wlp-flusso {
    --wlp-flusso-fondo-a: #182753;
    --wlp-flusso-fondo-b: #0b132b;
    --wlp-flusso-sorgente: 58, 88, 146;
    background-color: #121d3d;
}

/* La tavola è alta quanto la finestra (al massimo 1000 px, centrata: le lettere non diventano da
   manifesto); il tratto continua oltre i suoi bordi fino ai bordi della colonna. */
.wlp-flusso .wlp-flusso-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;
}

/* la rotaia: spenta, il bagliore e la luce (le due accese condividono lo stesso tratto) */
.wlp-flusso .wlp-flusso-binario {
    fill: none;
    stroke: var(--wlp-flusso-rotaia);
    stroke-width: 2.5;
}

.wlp-flusso .wlp-flusso-bagliore {
    fill: none;
    stroke: rgba(var(--wlp-flusso-alone), .22);
    stroke-width: 9;
    stroke-linecap: round;
}

.wlp-flusso .wlp-flusso-luce {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: .95;
}

/* le stazioni: da ferme sono tutte accese */
.wlp-flusso .wlp-flusso-alone {
    fill: url(#wlp-flusso-alone-stazione);
    opacity: .8;
    transition: opacity .6s ease;
}

.wlp-flusso .wlp-flusso-anello {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    transition: stroke .45s ease;
}

/* I nomi delle stazioni passano dal dizionario. Misurati in Inter a questo corpo, i più lunghi stanno tutti
   nella tavola senza ridurli: «Almacenamiento» (ES) parte da x 174 e finisce intorno a 365 su 540,
   «Etichettatura» a 350. Con «meet» la tavola intera è sempre dentro la colonna, quindi nessun nome ne
   esce, e a destra della rotaia non c'è altro: niente da accavallare. */
.wlp-flusso .wlp-flusso-nome {
    font-family: Inter, sans-serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.01em;
    fill: #fff;
    opacity: 1;
    dominant-baseline: central;
    text-rendering: geometricPrecision;
    transition: opacity .5s ease;
}

.wlp-flusso .wlp-flusso-marchio {
    font-family: Montserrat, Inter, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .42em;
    fill: rgba(255, 255, 255, .88);
    dominant-baseline: central;
    text-rendering: geometricPrecision;
}

/* l'impulso di luce: c'è solo mentre la linea si anima */
.wlp-flusso .wlp-flusso-impulso {
    opacity: 0;
    transition: opacity .4s ease;
}

.wlp-flusso .wlp-flusso-impulso-alone {
    fill: url(#wlp-flusso-alone-impulso);
}

.wlp-flusso .wlp-flusso-impulso-nucleo {
    fill: #fff;
}

/* La versione del portale, in fondo, appena leggibile: era nella colonna di prima e serve all'assistenza
   («che versione vedi?»). In basso a destra e non al centro come in «Corsia»: verso il centro della colonna
   scende la rotaia, e da lì esce l'impulso. Bianco al 50 % sul fondo blu notte: contrasto 5:1 col tema chiaro
   e con lo scuro. Sta in fondo alla finestra, come la tavola che è alta quanto lei: quando la colonna di
   sinistra è più alta della finestra (a 1366×650 la pagina arriva a 832 px) la colonna si allunga con lei, e
   in fondo alla colonna la versione si vedrebbe solo scorrendo; nella parte in più c'è solo la rotaia. */
.wlp-flusso .wlp-flusso-versione {
    position: absolute;
    right: 28px;
    bottom: max(22px, calc(100% - 100vh + 22px));
    margin: 0;
    text-align: right;
    white-space: nowrap;
    font-family: Inter, sans-serif;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .5);
}

/* in movimento: le stazioni non ancora raggiunte sono spente */
.wlp-flusso.wlp-flusso-animata .wlp-flusso-impulso {
    opacity: 1;
}

.wlp-flusso.wlp-flusso-animata .wlp-flusso-impulso.wlp-flusso-spento {
    opacity: 0;
}

.wlp-flusso.wlp-flusso-animata .wlp-flusso-stazione:not(.wlp-flusso-accesa) .wlp-flusso-alone {
    opacity: 0;
}

.wlp-flusso.wlp-flusso-animata .wlp-flusso-stazione:not(.wlp-flusso-accesa) .wlp-flusso-anello {
    stroke: var(--wlp-flusso-anello-spento);
}

.wlp-flusso.wlp-flusso-animata .wlp-flusso-stazione:not(.wlp-flusso-accesa) .wlp-flusso-nome {
    opacity: var(--wlp-flusso-testo-spento);
}

/* quando l'impulso arriva, l'alone della stazione si gonfia un attimo e si posa */
.wlp-flusso.wlp-flusso-animata .wlp-flusso-stazione.wlp-flusso-accesa .wlp-flusso-alone {
    animation: wlp-flusso-arrivo 1s ease-out both;
}

@keyframes wlp-flusso-arrivo {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: .8; }
}

/* In fondo al foglio: a pari peso dei selettori di sopra, vince questo. */
@media (prefers-reduced-motion: reduce) {
    .wlp-flusso .wlp-flusso-alone,
    .wlp-flusso .wlp-flusso-anello,
    .wlp-flusso .wlp-flusso-nome,
    .wlp-flusso .wlp-flusso-impulso {
        transition: none;
        animation: none;
    }
}