/* Pagina di accesso, colonna di destra: «Mercati», la rete di notte vista dall'alto. Una mappa a punti di Europa
   e Mediterraneo (accesso-mercati-mappa.svg, qui accanto, usata come maschera) in blu profondo; una luce lenta la
   attraversa da ovest a est e al suo passaggio i mercati si accendono, uno dopo l'altro, e restano accesi. Nessun
   copione: la corsa della luce e l'accensione dei siti sono animazioni CSS con lo stesso periodo; con «meno
   movimento» la mappa è ferma e completa, con tutti i mercati accesi.
   Dalle proposte di _Documenti/Proposte/accesso del 25/10/2026 (destre/mercati), portata nel portale il 27/10/2026
   quando le scene sono diventate componenti da sorteggiare: qui con i nomi del portale (rpvc-mercati), la mappa
   citata con un indirizzo relativo al foglio (regge anche un portale pubblicato sotto un percorso) e la riga della
   versione in fondo. Il foglio è caricato su tutte le pagine: selettori tutti sotto .rpvc-mercati. */

.rpvc-mercati {
    --rpm-fondo-a: #0e1a37;
    --rpm-fondo-b: #162a52;
    --rpm-luce: 196, 214, 255;          /* la luce che attraversa la mappa */
    --rpm-alone: 168, 196, 255;         /* l'alone dei siti accesi */
    --rpm-testo: #e6ebf7;
    --rpm-testo-2: #b4c1dd;
    --rpm-testo-3: #8796b8;             /* la versione: discreta, ma almeno 4,5:1 sul fondo, in chiaro e in scuro */
    --rpm-corsa: 20s;                   /* periodo: 9 s di corsa della luce, poi quiete */
    --rpm-inizio: .6s;
    --rpm-lato: min(calc(41.66vw - 1.5rem), calc(100vh - 12.5rem)); /* lato della mappa quadrata */
    --rpm-p: clamp(5px, calc(var(--rpm-lato) * .012), 8px);         /* diametro del punto di un sito */
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    margin: 0;
    background: linear-gradient(180deg, var(--rpm-fondo-a) 0%, var(--rpm-fondo-b) 100%);
    color: var(--rpm-testo);
    font-family: Inter, "Segoe UI", sans-serif;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

/* una luce ferma dietro la mappa: profondità, non una macchia */
.rpvc-mercati::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 62% 48% at 50% 46%, rgba(58, 88, 146, .55) 0%, rgba(58, 88, 146, .18) 55%, rgba(58, 88, 146, 0) 100%);
    pointer-events: none;
}

/* la scena è alta quanto la finestra: a finestra bassa resta tutta sopra la piega anche se la colonna
   di sinistra allunga la pagina */
.rpvc-mercati .rpvc-mercati__scena {
    position: relative;
    z-index: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: clamp(1.4rem, 4.5vh, 3rem) .75rem;
}

.rpvc-mercati .rpvc-mercati__testa,
.rpvc-mercati .rpvc-mercati__piede {
    flex: 0 0 auto;
}

.rpvc-mercati .rpvc-mercati__marca {
    display: inline-block;
    font-size: clamp(.78rem, 1vw, .92rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .42em;
    padding-left: .42em;
    color: var(--rpm-testo);
}

/* La frase in fondo, nella lingua scelta. Sta su una riga in tutte le lingue: la più lunga, lo spagnolo,
   misurata con Inter in Chrome è larga 388 px a 1200 px di finestra, dove la colonna è più stretta e ne
   lascia 476. Se una traduzione futura andasse a capo, il piede è largo al più quanto la colonna e la frase
   si spezza in due righe pari invece di lasciare una parola sola sotto (su una riga sola «balance» non
   cambia nulla). */
.rpvc-mercati .rpvc-mercati__riga {
    margin: 0;
    font-size: clamp(.84rem, 1.02vw, .98rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--rpm-testo-2);
    text-wrap: balance;
}

/* La versione del portale, sotto la frase, piccola e discreta: serve all'assistenza («che versione vedi?»).
   Sta nel piede e non in posizione assoluta: a 1366×650 sotto la frase restano 29 px, troppo pochi per una
   riga appoggiata al fondo; nel piede la scena distribuisce lo spazio fra testa, mappa e piede, e la frase,
   anche andando a capo, non può finirle sopra. */
.rpvc-mercati .rpvc-mercati__versione {
    margin: .75rem 0 0;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .08em;
    color: var(--rpm-testo-3);
}

/* la mappa: un quadrato, i punti sono la maschera */
.rpvc-mercati .rpvc-mercati__mappa {
    position: relative;
    flex: 0 0 auto;
    width: var(--rpm-lato);
    max-width: 100%;
    aspect-ratio: 1 / 1;
}

.rpvc-mercati .rpvc-mercati__terre {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* L'indirizzo della maschera è relativo a questo foglio (css/accesso-mercati-mappa.svg): nella proposta era
   /proposte/destre/mercati/mappa.svg, che sotto un percorso di pubblicazione non si troverebbe. */
@supports ((mask-image: url("x.svg")) or (-webkit-mask-image: url("x.svg"))) {
    .rpvc-mercati .rpvc-mercati__terre {
        background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .15) 60%, rgba(255, 255, 255, .11) 100%);
        -webkit-mask-image: url("accesso-mercati-mappa.svg");
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-image: url("accesso-mercati-mappa.svg");
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
        mask-position: center;
    }
}

/* la luce: un fascio largo il 40 % della mappa, visibile solo sui punti (la maschera è del genitore);
   il centro va dal -20 % al 120 % della larghezza in 9 s (i ritardi --t dei siti sono calcolati così) */
.rpvc-mercati .rpvc-mercati__fascio {
    display: none;
    position: absolute;
    top: -4%;
    bottom: -4%;
    left: 0;
    width: 40%;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        rgba(var(--rpm-luce), 0) 0%,
        rgba(var(--rpm-luce), .12) 20%,
        rgba(var(--rpm-luce), .55) 40%,
        rgba(var(--rpm-luce), 1) 50%,
        rgba(var(--rpm-luce), .55) 60%,
        rgba(var(--rpm-luce), .12) 80%,
        rgba(var(--rpm-luce), 0) 100%);
    will-change: transform;
}

/* i siti: un punto bianco con il suo alone e la sigla del mercato; tutti in posizione assoluta, così gli
   spazi fra un sito e l'altro (che Blazor toglie) non contano */
.rpvc-mercati .rpvc-mercati__siti {
    position: absolute;
    inset: 0;
}

.rpvc-mercati .rpvc-mercati__sito {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 0;
    height: 0;
}

.rpvc-mercati .rpvc-mercati__alone {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--rpm-p) * 7);
    height: calc(var(--rpm-p) * 7);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(var(--rpm-alone), .62) 0%, rgba(var(--rpm-alone), .22) 32%, rgba(var(--rpm-alone), .06) 55%, rgba(var(--rpm-alone), 0) 72%);
    opacity: .9;
}

.rpvc-mercati .rpvc-mercati__punto {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--rpm-p);
    height: var(--rpm-p);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 0 calc(var(--rpm-p) * 1.4) rgba(var(--rpm-alone), .95);
}

.rpvc-mercati .rpvc-mercati__sigla {
    position: absolute;
    left: calc(var(--rpm-p) * 1.7);
    top: 0;
    transform: translateY(-50%);
    font-size: clamp(10px, calc(var(--rpm-lato) * .024), 13px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .2em;
    color: #f3f6fd;
    text-shadow: 0 0 5px rgba(8, 16, 38, .95), 0 1px 2px rgba(8, 16, 38, .9);
    white-space: nowrap;
}

.rpvc-mercati .rpvc-mercati__sito--sx .rpvc-mercati__sigla {
    left: auto;
    right: calc(var(--rpm-p) * 1.7);
}

/* il movimento, solo per chi non chiede di ridurlo: da ferma la mappa è completa con i mercati accesi */
@media (prefers-reduced-motion: no-preference) {
    .rpvc-mercati .rpvc-mercati__fascio {
        display: block;
        animation: rpvc-mercati-corsa var(--rpm-corsa) linear var(--rpm-inizio) infinite;
    }

    .rpvc-mercati .rpvc-mercati__sito {
        animation: rpvc-mercati-accendi 1.3s cubic-bezier(.3, .6, .2, 1) calc(var(--t) + var(--rpm-inizio) - .35s) 1 both;
    }

    .rpvc-mercati .rpvc-mercati__alone {
        animation: rpvc-mercati-respiro var(--rpm-corsa) linear calc(var(--t) + var(--rpm-inizio) - .35s) infinite;
    }

    .rpvc-mercati .rpvc-mercati__sigla {
        animation: rpvc-mercati-sigla 1.1s cubic-bezier(.2, .6, .2, 1) calc(var(--t) + var(--rpm-inizio) + .15s) 1 both;
    }
}

@keyframes rpvc-mercati-corsa {
    0% { transform: translateX(-100%); }
    45%, 100% { transform: translateX(250%); }
}

@keyframes rpvc-mercati-accendi {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* l'alone si gonfia quando la luce passa, poi torna quieto (la prima volta è l'accensione) */
@keyframes rpvc-mercati-respiro {
    0% { transform: translate(-50%, -50%) scale(1); opacity: .9; }
    2.5% { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
    9%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; }
}

@keyframes rpvc-mercati-sigla {
    from { opacity: 0; transform: translateY(-20%); }
    to { opacity: 1; transform: translateY(-50%); }
}

/* tema scuro: la colonna resta blu profondo, un poco più fonda accanto al quasi nero di sinistra */
[data-theme-mode="dark"] .rpvc-mercati {
    --rpm-fondo-a: #0a1430;
    --rpm-fondo-b: #122247;
}