/* Pagina di accesso, colonna di destra: «Insegna», l'insegna «RPVC» come fascia luminosa al crepuscolo.
   Cielo dell'ora blu, fascia scura, lettere scatolate che si accendono una alla volta (--l1..--l4, da 0 a 1,
   mosse da js/accesso-insegna.js) e si specchiano sul piazzale bagnato. Da ferma (o senza copione, o con
   «meno movimento») l'insegna è accesa, completa. Tutto è posizionato in vh dall'alto: la colonna può essere
   più alta della finestra (1366×650) e la composizione deve stare nella prima schermata.
   Scelta il 25/10/2026 fra le proposte di _Documenti/Proposte/accesso (destre/insegna): qui con i nomi del
   portale (rpvc-insegna) e la riga della versione in fondo. Selettori tutti sotto .rpvc-insegna. */
.rpvc-insegna {
    --rpi-f: clamp(64px, min(7.2vw, 14vh), 140px);          /* corpo delle lettere dell'insegna */
    --rpi-centro: 40vh;                                       /* asse della fascia */
    --rpi-orizzonte: 60vh;                                    /* dove il fronte tocca il piazzale */
    --rpi-fascia-h: calc(var(--rpi-f) * 1.75);
    --rpi-fascia-alto: calc(var(--rpi-centro) - var(--rpi-fascia-h) / 2);
    --rpi-fascia-basso: calc(var(--rpi-centro) + var(--rpi-fascia-h) / 2);
    --rpi-fronte-h: calc(var(--rpi-orizzonte) - var(--rpi-fascia-basso));
    --rpi-cielo-alto: #0d1734;
    --rpi-cielo: #1a2a52;
    --rpi-foschia: #3a5892;
    --rpi-fascia: #0f172b;
    --rpi-fronte: #080d1b;
    --rpi-asfalto: #060a15;
    --rpi-luce: #f3f6ff;
    --rpi-alone: 143, 179, 255;
    --l1: 1;
    --l2: 1;
    --l3: 1;
    --l4: 1;
    --rpi-media: calc((var(--l1) + var(--l2) + var(--l3) + var(--l4)) / 4);
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    background: var(--rpi-asfalto);
    font-family: Inter, sans-serif;
    color: #fff;
}

[data-theme-mode="dark"] .rpvc-insegna {
    --rpi-cielo-alto: #090f22;
    --rpi-cielo: #121d3c;
    --rpi-foschia: #2b4677;
}

.rpvc-insegna__scena {
    position: absolute;
    inset: 0;
}

/* Cielo: dall'alto buio alla foschia chiara che si ferma al bordo superiore della fascia. */
.rpvc-insegna__cielo {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--rpi-fascia-alto);
    background: linear-gradient(180deg, var(--rpi-cielo-alto) 0%, var(--rpi-cielo) 48%, var(--rpi-foschia) 100%);
}

/* Alone: la luce dell'insegna che sale nell'aria sopra la fascia. */
.rpvc-insegna__alone {
    position: absolute;
    left: -20%;
    right: -20%;
    top: 0;
    height: var(--rpi-fascia-alto);
    background: radial-gradient(ellipse 42% 85% at 50% 100%, rgba(var(--rpi-alone), .30) 0%, rgba(var(--rpi-alone), .10) 45%, rgba(var(--rpi-alone), 0) 75%);
    opacity: var(--rpi-media);
}

/* Fronte: la vetrata spenta sotto la fascia, solo buio. */
.rpvc-insegna__fronte {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--rpi-fascia-basso);
    height: var(--rpi-fronte-h);
    background: linear-gradient(180deg, #0a1020 0%, var(--rpi-fronte) 100%);
}

/* Piazzale bagnato: dall'orizzonte fino in fondo alla colonna. */
.rpvc-insegna__terra {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--rpi-orizzonte);
    bottom: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #121c38 0%, #0b1226 10%, #070c19 40%, var(--rpi-asfalto) 100%);
    border-top: 1px solid rgba(var(--rpi-alone), .14);
}

/* La fascia rispecchiata: appena un velo più chiaro, dove il pannello illuminato si riflette. */
.rpvc-insegna__fascia-riflessa {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--rpi-fronte-h) - var(--rpi-f) * .3);
    height: calc(var(--rpi-fascia-h) * 1.3);
    background: linear-gradient(180deg, rgba(var(--rpi-alone), 0) 0%, rgba(var(--rpi-alone), .08) 18%, rgba(var(--rpi-alone), .03) 60%, rgba(var(--rpi-alone), 0) 100%);
    opacity: var(--rpi-media);
}

/* La pozza di luce sotto il riflesso. */
.rpvc-insegna__pozza {
    position: absolute;
    left: 50%;
    top: calc(var(--rpi-fronte-h) - var(--rpi-f) * .4);
    width: 170%;
    height: calc(var(--rpi-f) * 2.8);
    transform: translateX(-50%);
    background: radial-gradient(ellipse 34% 46% at 50% 45%, rgba(var(--rpi-alone), .30) 0%, rgba(var(--rpi-alone), .11) 40%, rgba(var(--rpi-alone), 0) 72%);
    opacity: var(--rpi-media);
}

/* Riflesso in due strati, uno più nitido (--s 1.25) e una scia stirata (--s 2.4): partono tutti e due dallo
   specchio della linea di base delle lettere (a 0,864 em dal bordo alto della riga, in Inter con
   interlinea 1) e svaniscono allontanandosi dal fronte. */
.rpvc-insegna__riflesso {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--rpi-fronte-h) + var(--rpi-f) * (0.511 - 0.136 * var(--s)));
    height: calc(var(--rpi-f) * var(--s) + 24px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 45%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 45%, rgba(0, 0, 0, 0) 100%);
}

.rpvc-insegna__riflesso--nitido {
    --s: 1.25;
    opacity: .5;
    filter: blur(4px);
}

.rpvc-insegna__riflesso--scia {
    --s: 2.4;
    opacity: .42;
    filter: blur(9px);
}

.rpvc-insegna__riflesso .rpvc-insegna__parola {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    justify-content: center;
    transform-origin: 50% 0;
    transform: translateY(calc(var(--rpi-f) * var(--s))) scaleY(calc(-1 * var(--s)));
}

/* Onde: due veli di strisce scure a passo irregolare (25 e 60 px, 36 e 90 px: 900 è multiplo di tutti),
   sfumate, che scorrono lente e a velocità diverse dentro la zona del riflesso e lo spezzano come fa
   l'asfalto bagnato; la maschera ellittica li fa nascere e morire senza bordi, il ciclo di 900 px si
   chiude senza scatti. */
.rpvc-insegna__onde {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--rpi-fronte-h) - var(--rpi-f) * .6);
    height: calc(var(--rpi-f) * 3.3);
    overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse 46% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, .8) 40%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(ellipse 46% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, .8) 40%, rgba(0, 0, 0, 0) 100%);
}

.rpvc-insegna__strisce {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1800px;
    filter: blur(1.8px);
    will-change: transform;
    animation: rpvc-insegna-onde 45s linear infinite;
}

.rpvc-insegna__strisce--a {
    background-image:
        repeating-linear-gradient(180deg, rgba(3, 6, 16, 0) 0px, rgba(3, 6, 16, 0) 13px, rgba(3, 6, 16, .22) 18px, rgba(3, 6, 16, .22) 20px, rgba(3, 6, 16, 0) 25px),
        repeating-linear-gradient(180deg, rgba(3, 6, 16, 0) 0px, rgba(3, 6, 16, 0) 38px, rgba(3, 6, 16, .15) 46px, rgba(3, 6, 16, .15) 51px, rgba(3, 6, 16, 0) 60px);
}

.rpvc-insegna__strisce--b {
    background-image:
        repeating-linear-gradient(180deg, rgba(3, 6, 16, 0) 0px, rgba(3, 6, 16, 0) 19px, rgba(3, 6, 16, .16) 25px, rgba(3, 6, 16, .16) 28px, rgba(3, 6, 16, 0) 36px),
        repeating-linear-gradient(180deg, rgba(3, 6, 16, 0) 0px, rgba(3, 6, 16, 0) 44px, rgba(3, 6, 16, .12) 62px, rgba(3, 6, 16, .12) 74px, rgba(3, 6, 16, 0) 90px);
    animation-duration: 68s;
}

@keyframes rpvc-insegna-onde {
    from { transform: translateY(-900px); }
    to { transform: translateY(0); }
}

/* Fascia: il pannello scuro, opaco, con un filo di luce sul bordo alto. */
.rpvc-insegna__fascia {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--rpi-fascia-alto);
    height: var(--rpi-fascia-h);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #141d36 0%, var(--rpi-fascia) 55%, #0b1223 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .55), 0 3px 14px rgba(0, 0, 0, .45);
}

.rpvc-insegna__fascia::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .02) 0 1px, rgba(255, 255, 255, 0) 1px 4px);
}

/* La parola: lettere scatolate, stessa spaziatura del marchio a sinistra. */
.rpvc-insegna__parola {
    position: relative;
    display: flex;
    margin: 0;
    padding-inline-start: .26em;
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: var(--rpi-f);
    line-height: 1;
    letter-spacing: .26em;
    white-space: nowrap;
}

.rpvc-insegna__lettera {
    position: relative;
    display: inline-block;
}

/* La faccia spenta: vetro scuro sulla fascia, sempre presente sotto la luce. */
.rpvc-insegna__spenta {
    position: absolute;
    left: 0;
    top: 0;
    color: #1c2749;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 -1px 0 rgba(0, 0, 0, .45);
}

/* La faccia accesa: bianco caldo con il bagliore a strati di un'insegna vera. */
.rpvc-insegna__accesa {
    position: relative;
    display: inline-block;
    color: var(--rpi-luce);
    will-change: opacity;
    text-shadow:
        0 0 1px #fff,
        0 0 6px rgba(225, 235, 255, .95),
        0 0 18px rgba(175, 200, 255, .85),
        0 0 44px rgba(125, 165, 255, .6),
        0 0 96px rgba(90, 130, 230, .45),
        0 0 170px rgba(58, 88, 146, .45);
}

.rpvc-insegna__lettera:nth-child(1) .rpvc-insegna__accesa { opacity: var(--l1); }
.rpvc-insegna__lettera:nth-child(2) .rpvc-insegna__accesa { opacity: var(--l2); }
.rpvc-insegna__lettera:nth-child(3) .rpvc-insegna__accesa { opacity: var(--l3); }
.rpvc-insegna__lettera:nth-child(4) .rpvc-insegna__accesa { opacity: var(--l4); }

/* Grana: aria e asfalto (sul piazzale un po' di più), e niente bande nei gradienti. */
.rpvc-insegna__grana {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .08;
    pointer-events: none;
}

.rpvc-insegna__grana--terra {
    opacity: .11;
}

/* La firma del gruppo, in alto, alla quota della scelta della lingua a sinistra. */
.rpvc-insegna__firma {
    position: absolute;
    left: 0;
    right: 0;
    top: 36px;
    margin: 0;
    text-align: center;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .42em;
    padding-inline-start: .42em;
    color: rgba(255, 255, 255, .66);
}

/* La versione del portale, in fondo al piazzale, appena leggibile: era nella colonna di prima e serve
   all'assistenza («che versione vedi?»). */
.rpvc-insegna__versione {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    margin: 0;
    text-align: center;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .42);
}

/* Scheda nascosta: le onde si fermano (classe messa dal copione). */
.rpvc-insegna.rpvc-insegna--nascosta .rpvc-insegna__strisce {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .rpvc-insegna .rpvc-insegna__strisce {
        animation: none;
    }
}