/* Pagina di accesso, colonna di destra: «Percorso», le fasi di un progetto come una linea con le sue stazioni.
   Blu notte, una rotaia, sei stazioni, un impulso di luce che va di stazione in stazione e accende la rotaia
   dietro di sé (mosso da js/accesso-percorso.js, che mette sulla radice rpvc-percorso-animata e sulle stazioni
   rpvc-percorso-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.
   Dalla proposta scelta di _Documenti/Proposte/accesso (destre/percorso), portata nel portale il 27/10/2026: qui
   con i nomi del portale (rpvc-percorso anche per le variabili, gli id dei gradienti e della maschera e i
   keyframes) e la riga della versione in fondo. Il foglio è caricato su tutte le pagine: ogni selettore parte
   dalla radice .rpvc-percorso, così non tocca nient'altro. */
.rpvc-percorso {
    --rpvc-percorso-fondo-a: #203465;
    --rpvc-percorso-fondo-b: #121d3d;
    --rpvc-percorso-sorgente: 82, 116, 188;
    --rpvc-percorso-alone: 150, 180, 255;
    --rpvc-percorso-rotaia: rgba(255, 255, 255, .16);
    --rpvc-percorso-anello-spento: rgba(255, 255, 255, .42);
    --rpvc-percorso-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(--rpvc-percorso-sorgente), .34), rgba(var(--rpvc-percorso-sorgente), 0) 72%),
        linear-gradient(180deg, var(--rpvc-percorso-fondo-a) 0%, var(--rpvc-percorso-fondo-b) 100%);
    color: #fff;
    font-family: Inter, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

[data-theme-mode="dark"] .rpvc-percorso {
    --rpvc-percorso-fondo-a: #182753;
    --rpvc-percorso-fondo-b: #0b132b;
    --rpvc-percorso-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. */
.rpvc-percorso .rpvc-percorso-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) */
.rpvc-percorso .rpvc-percorso-binario {
    fill: none;
    stroke: var(--rpvc-percorso-rotaia);
    stroke-width: 2.5;
}

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

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

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

.rpvc-percorso .rpvc-percorso-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: «En cours de validation» (FR) parte da x 238 e finisce a 486 su 540,
   «W trakcie walidacji» (PL) a 448, «Zarejestrowany» (PL) parte da 174 e finisce a 348. 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. */
.rpvc-percorso .rpvc-percorso-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;
}

.rpvc-percorso .rpvc-percorso-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 */
.rpvc-percorso .rpvc-percorso-impulso {
    opacity: 0;
    transition: opacity .4s ease;
}

.rpvc-percorso .rpvc-percorso-impulso-alone {
    fill: url(#rpvc-percorso-alone-impulso);
}

.rpvc-percorso .rpvc-percorso-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 «Insegna»: 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. */
.rpvc-percorso .rpvc-percorso-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 */
.rpvc-percorso.rpvc-percorso-animata .rpvc-percorso-impulso {
    opacity: 1;
}

.rpvc-percorso.rpvc-percorso-animata .rpvc-percorso-impulso.rpvc-percorso-spento {
    opacity: 0;
}

.rpvc-percorso.rpvc-percorso-animata .rpvc-percorso-stazione:not(.rpvc-percorso-accesa) .rpvc-percorso-alone {
    opacity: 0;
}

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

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

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

@keyframes rpvc-percorso-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) {
    .rpvc-percorso .rpvc-percorso-alone,
    .rpvc-percorso .rpvc-percorso-anello,
    .rpvc-percorso .rpvc-percorso-nome,
    .rpvc-percorso .rpvc-percorso-impulso {
        transition: none;
        animation: none;
    }
}