/* Pagina di accesso, colonna di destra: «Rotte», la notte vista dall'alto verso un orizzonte curvo. Torino, in
   basso a sinistra, è l'unico nome; da lì cinque archi di luce sottili salgono verso cinque mete senza nome, più
   piccole man mano che si avvicinano all'orizzonte. Sugli archi viaggiano i pacchetti (un quadratino di luce con
   la sua scia, mossi da js/accesso-rotte.js, che mette sulla radice tx-accesso-rotte-animata, sulle rotte in
   volo tx-accesso-rotte-in-volo e tx-accesso-rotte-ritorno, sulle mete raggiunte tx-accesso-rotte-arrivo); ogni
   tanto da una meta ne torna uno d'oro, lo «Share» del destinatario che carica. Da ferma (senza copione o con
   «meno movimento»): tutto acceso, due pacchetti in andata e uno d'oro che torna, fermi sulle loro rotte con la
   scia dietro. La tavola SVG (800×760) è alta quanto la finestra e larga quanto la colonna, in proporzione: terra,
   cielo e orizzonte continuano oltre il suo bordo, e a 1366×650 sta tutta.
   Dalla proposta di _Documenti/Proposte/accesso (destre/rotte), portata nel portale il 06/11/2026: qui con i nomi
   del portale (tx-accesso-rotte anche per le variabili, gli id dei gradienti e i keyframes). Il foglio è caricato
   su tutte le pagine: ogni selettore parte dalla radice .tx-accesso-rotte, così non tocca nient'altro. */

.tx-accesso-rotte {
    --tx-accesso-rotte-cielo-a: #07091f;
    --tx-accesso-rotte-cielo-b: #0d1040;
    --tx-accesso-rotte-terra-lontana: #1a1e5c;
    --tx-accesso-rotte-terra-vicina: #0b0e33;
    --tx-accesso-rotte-luce: 125, 140, 255;        /* #7d8cff: la luce delle rotte e dell'orizzonte */
    --tx-accesso-rotte-chiaro: 200, 210, 255;      /* la luce più vicina al bianco */
    --tx-accesso-rotte-oro: 232, 212, 166;         /* il ritorno: l'oro dell'area esterna, schiarito */
    --tx-accesso-rotte-oro-cupo: 184, 149, 90;     /* #b8955a */
    --tx-accesso-rotte-testo: #eef0ff;
    --tx-accesso-rotte-testo-2: #b9c1e8;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--tx-accesso-rotte-cielo-b);
    background-image: linear-gradient(180deg, var(--tx-accesso-rotte-cielo-a) 0%, var(--tx-accesso-rotte-cielo-b) 32%, var(--tx-accesso-rotte-cielo-b) 100%);
    color: var(--tx-accesso-rotte-testo);
    font-family: Inter, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

[data-theme-mode="dark"] .tx-accesso-rotte {
    --tx-accesso-rotte-cielo-a: #04061a;
    --tx-accesso-rotte-cielo-b: #0a0c33;
    --tx-accesso-rotte-terra-lontana: #15184d;
    --tx-accesso-rotte-terra-vicina: #080a29;
    background-color: #0a0c33;
}

/* La tavola (800×760) è alta quanto la finestra e larga quanto la colonna, in proporzione: quello che
   avanza ai lati o sopra e sotto lo riempiono la terra, il cielo e l'orizzonte, che continuano oltre
   il suo bordo (overflow visible). */
.tx-accesso-rotte-tavola {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    overflow: visible;
    pointer-events: none;
}

/* la terra: più chiara e velata verso l'orizzonte (lontano), più scura in basso (vicino) */
.tx-accesso-rotte-terra {
    fill: url(#tx-accesso-rotte-terra);
}

.tx-accesso-rotte .tx-accesso-rotte-stop-terra-a {
    stop-color: var(--tx-accesso-rotte-terra-lontana);
}

.tx-accesso-rotte .tx-accesso-rotte-stop-terra-b {
    stop-color: var(--tx-accesso-rotte-terra-vicina);
}

/* il chiarore del cielo appena sopra l'orizzonte: segue la curva */
.tx-accesso-rotte-cielo {
    fill: url(#tx-accesso-rotte-cielo);
}

.tx-accesso-rotte-orizzonte {
    fill: none;
    stroke: rgba(var(--tx-accesso-rotte-chiaro), .34);
    stroke-width: 1.3;
}

/* il chiarore della città intorno a Torino */
.tx-accesso-rotte-citta {
    fill: url(#tx-accesso-rotte-citta);
}

/* le luci del territorio: tre taglie, appena accennate */
.tx-accesso-rotte-luci-1,
.tx-accesso-rotte-luci-2,
.tx-accesso-rotte-luci-3 {
    fill: none;
    stroke: rgb(var(--tx-accesso-rotte-chiaro));
    stroke-linecap: round;
}

.tx-accesso-rotte-luci-1 {
    stroke-width: 1.2;
    opacity: .2;
}

.tx-accesso-rotte-luci-2 {
    stroke-width: 1.8;
    opacity: .3;
}

.tx-accesso-rotte-luci-3 {
    stroke-width: 2.6;
    opacity: .38;
}

/* le rotte: il filo è sempre visibile, sottile */
.tx-accesso-rotte-filo {
    fill: none;
    stroke: rgba(var(--tx-accesso-rotte-chiaro), .17);
    stroke-width: 1;
}

/* le scie: quattro tratti dello stesso arco, dal più lungo e tenue al più corto e vivo, dietro il pacchetto */
.tx-accesso-rotte-scia {
    fill: none;
    stroke: rgb(var(--tx-accesso-rotte-luce));
    stroke-linecap: round;
}

.tx-accesso-rotte-bagliore {
    stroke-width: 7;
    opacity: .16;
}

.tx-accesso-rotte-scia-3 {
    stroke-width: 1.2;
    opacity: .18;
}

.tx-accesso-rotte-scia-2 {
    stroke-width: 1.7;
    opacity: .45;
}

.tx-accesso-rotte-scia-1 {
    stroke: rgb(var(--tx-accesso-rotte-chiaro));
    stroke-width: 2.2;
    opacity: .95;
}

/* il ritorno: la stessa luce, d'oro */
.tx-accesso-rotte-ritorno .tx-accesso-rotte-scia {
    stroke: rgb(var(--tx-accesso-rotte-oro-cupo));
}

.tx-accesso-rotte-ritorno .tx-accesso-rotte-scia-1 {
    stroke: rgb(var(--tx-accesso-rotte-oro));
}

/* le mete: un punto e il suo alone; all'arrivo di un pacchetto l'alone si gonfia e si posa */
.tx-accesso-rotte-alone {
    fill: url(#tx-accesso-rotte-alone-meta);
    opacity: .7;
    transform-box: fill-box;
    transform-origin: center;
}

.tx-accesso-rotte-punto {
    fill: #fff;
    opacity: .92;
}

.tx-accesso-rotte-meta.tx-accesso-rotte-arrivo .tx-accesso-rotte-alone {
    animation: tx-accesso-rotte-impulso 1.3s cubic-bezier(.2, .6, .2, 1) both;
}

@keyframes tx-accesso-rotte-impulso {
    0% { transform: scale(.7); opacity: 1; }
    40% { transform: scale(2); opacity: .95; }
    100% { transform: scale(1); opacity: .7; }
}

/* il pacchetto: un quadratino di luce con l'alone; appare e si posa in dissolvenza */
.tx-accesso-rotte-pacchetto {
    opacity: 1;
    transition: opacity .4s ease;
}

.tx-accesso-rotte-pacchetto.tx-accesso-rotte-posato {
    opacity: 0;
}

.tx-accesso-rotte-pacchetto-alone {
    fill: url(#tx-accesso-rotte-alone-invio);
}

.tx-accesso-rotte-pacchetto-corpo {
    fill: #fff;
}

.tx-accesso-rotte-ritorno .tx-accesso-rotte-pacchetto-alone {
    fill: url(#tx-accesso-rotte-alone-ritorno);
}

.tx-accesso-rotte-ritorno .tx-accesso-rotte-pacchetto-corpo {
    fill: rgb(var(--tx-accesso-rotte-oro));
}

/* da ferma: le rotte senza pacchetto fermo non mostrano né pacchetto né scia */
.tx-accesso-rotte-rotta.tx-accesso-rotte-vuota .tx-accesso-rotte-pacchetto,
.tx-accesso-rotte-rotta.tx-accesso-rotte-vuota .tx-accesso-rotte-scia {
    visibility: hidden;
}

/* in movimento (il copione mette tx-accesso-rotte-animata sulla radice): pacchetto e scia solo sulle rotte in volo */
.tx-accesso-rotte.tx-accesso-rotte-animata .tx-accesso-rotte-rotta .tx-accesso-rotte-pacchetto,
.tx-accesso-rotte.tx-accesso-rotte-animata .tx-accesso-rotte-rotta .tx-accesso-rotte-scia {
    visibility: hidden;
}

.tx-accesso-rotte.tx-accesso-rotte-animata .tx-accesso-rotte-rotta.tx-accesso-rotte-in-volo .tx-accesso-rotte-pacchetto,
.tx-accesso-rotte.tx-accesso-rotte-animata .tx-accesso-rotte-rotta.tx-accesso-rotte-in-volo .tx-accesso-rotte-scia {
    visibility: visible;
}

/* Torino: il punto, due anelli, l'alone; quando torna un pacchetto, un alone caldo si apre e svanisce */
.tx-accesso-rotte-torino-alone {
    fill: url(#tx-accesso-rotte-alone-torino);
    opacity: .9;
}

.tx-accesso-rotte-torino-caldo {
    fill: url(#tx-accesso-rotte-alone-caldo);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.tx-accesso-rotte-torino.tx-accesso-rotte-arrivo .tx-accesso-rotte-torino-caldo {
    animation: tx-accesso-rotte-caldo 1.7s ease-out both;
}

@keyframes tx-accesso-rotte-caldo {
    0% { transform: scale(.4); opacity: 0; }
    25% { opacity: .9; }
    100% { transform: scale(1.35); opacity: 0; }
}

.tx-accesso-rotte-torino-anello-2 {
    fill: none;
    stroke: rgba(var(--tx-accesso-rotte-chiaro), .18);
    stroke-width: 1;
}

.tx-accesso-rotte-torino-anello {
    fill: none;
    stroke: rgb(var(--tx-accesso-rotte-chiaro));
    stroke-width: 1.4;
    opacity: .85;
}

.tx-accesso-rotte-torino-punto {
    fill: #fff;
}

.tx-accesso-rotte-nome {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .06em;
    fill: var(--tx-accesso-rotte-testo);
    text-anchor: middle;
    dominant-baseline: central;
    text-rendering: geometricPrecision;
}

/* la riga in basso: HTML, fuori dalla tavola, così non cambia misura con lei */
.tx-accesso-rotte-riga {
    position: absolute;
    left: 7.5%;
    bottom: clamp(1.5rem, 4.2vh, 2.75rem);
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: clamp(.84rem, .95vw, .98rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--tx-accesso-rotte-testo-2);
}

@media (prefers-reduced-motion: reduce) {
    .tx-accesso-rotte .tx-accesso-rotte-alone,
    .tx-accesso-rotte .tx-accesso-rotte-torino-caldo,
    .tx-accesso-rotte .tx-accesso-rotte-pacchetto {
        animation: none;
        transition: none;
    }
}