/* Pagina di accesso, colonna di destra: «Facciata», la facciata di un punto vendita che si compone da sola,
   tratto dopo tratto (suolo, basamento, vetrata, fascia, pilone, insegna) e alla fine si accende. Disegno al
   tratto bianco su blu notte, in prospettiva leggermente angolata: 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-facciata.js mette solo la pausa a scheda nascosta (classe rpf-ferma), e senza di lui
   la facciata si compone lo stesso. Con «meno movimento» è completa e accesa da subito.
   Portata nel portale il 27/10/2026 dalla proposta di _Documenti/Proposte/accesso (destre/facciata), quando le
   scene della colonna di destra sono diventate componenti da sorteggiare: qui con i nomi del portale (radice
   rpvc-facciata, classi e id rpf-, variabili --rpf-, keyframes rpvc-facciata-*) e la riga della versione in fondo.
   Il file è caricato su tutte le pagine: selettori tutti sotto .rpvc-facciata. */
.rpvc-facciata {
    --rpf-notte: #1a2a52;
    --rpf-cielo-alto: #0f1838;
    --rpf-orizzonte: #22386a;
    --rpf-suolo: #131d42;
    --rpf-testo: rgba(255, 255, 255, .8);
    --rpf-versione: rgba(255, 255, 255, .52);              /* sul fondo del piazzale ~5:1 in chiaro e in scuro */
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    margin: 0;
    background: var(--rpf-notte);
    color: #fff;
    font-family: "Inter", system-ui, sans-serif;
    text-align: center;
}

[data-theme-mode="dark"] .rpvc-facciata {
    --rpf-notte: #152242;
    --rpf-cielo-alto: #0b1330;
    --rpf-orizzonte: #1c2f5c;
    --rpf-suolo: #0f1838;
}

/* La scena: un solo SVG a tutta colonna; la facciata sta al centro, cielo e piazzale arrivano ai bordi. */
.rpvc-facciata .rpf-scena {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.rpvc-facciata .rpf-c-alto { stop-color: var(--rpf-cielo-alto); }
.rpvc-facciata .rpf-c-orizzonte { stop-color: var(--rpf-orizzonte); }
.rpvc-facciata .rpf-c-suolo { stop-color: var(--rpf-suolo); }

/* Pesi del tratto: principale, secondario (montanti, giunti), suolo. */
.rpvc-facciata .rpf-p { stroke-width: 1.35; stroke-opacity: .95; }
.rpvc-facciata .rpf-s { stroke-width: .9; stroke-opacity: .55; }
.rpvc-facciata .rpf-g { stroke-width: .9; }

/* I testi: il marchio in alto, alla quota della scelta della lingua; la didascalia sotto il piazzale. */
.rpvc-facciata .rpf-marchio {
    position: absolute;
    top: 32px;
    left: 24px;
    right: 24px;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: .42em;
    text-indent: .42em;
    color: var(--rpf-testo);
}

/* La didascalia passa dal dizionario: è larga quanto la colonna meno i margini e va a capo da sé. La più lunga
   delle sette lingue (PL, una trentina di caratteri a 15 px) sta su una riga anche nella colonna più stretta
   (500 px a 1200 di finestra): non serve ridurla. */
.rpvc-facciata .rpf-didascalia {
    position: absolute;
    top: calc(50% + 22vh);
    left: 24px;
    right: 24px;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--rpf-testo);
}

/* La versione del portale, in fondo al piazzale sotto il cordolo, appena leggibile: era nella colonna di prima
   e serve all'assistenza («che versione vedi?»). Ferma: c'è da subito, anche durante la sequenza. */
.rpvc-facciata .rpf-versione {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    margin: 0;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .08em;
    color: var(--rpf-versione);
}

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

    .rpvc-facciata .rpf-l {
        animation: rpvc-facciata-accende var(--d, 1s) cubic-bezier(.2, .5, .3, 1) var(--t, 0s) both;
    }

    .rpvc-facciata .rpf-didascalia {
        animation: rpvc-facciata-accende 1.2s ease-out 6.5s both;
    }

    .rpvc-facciata.rpf-ferma .rpf-t,
    .rpvc-facciata.rpf-ferma .rpf-l,
    .rpvc-facciata.rpf-ferma .rpf-didascalia {
        animation-play-state: paused;
    }
}

@keyframes rpvc-facciata-traccia {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes rpvc-facciata-accende {
    from { opacity: 0; }
    to { opacity: 1; }
}