/* Pagina di accesso, colonna di destra: «E commerciale». Portata nel portale il 06/11/2026 dalla proposta
   _Documenti/Proposte/accesso/destre/ecommerciale (destra.css), coi nomi del portale (tx-accesso-ecommerciale,
   variabili --txe-); la scena è Shared/Accesso/ScenaEcommerciale.razor, il copione wwwroot/js/accesso-ecommerciale.js.
   Selettori tutti sotto .tx-accesso-ecommerciale; i caratteri vengono da /css/accesso-caratteri.css.

/* E commerciale: la «&» del nome, grande, in EB Garamond corsivo, incisa nella carta blu notte (il solco in
   ombra, l'orlo in basso a destra che prende la luce radente). Due fili di luce ne percorrono la linea mediana:
   uno azzurro che va (Transfer: dall'uncino, per la traversa, nel nodo, su fino al riccio) e uno dorato che
   torna (Share: dal pallino in alto a sinistra, tutta l'ansa, nel nodo, la traversa, l'uncino); ogni ciclo
   (13 s) si incrociano nel nodo della «&», che si accende appena. Sotto, piccolo, «Transfer & Share».
   I fili sono tratti (stroke-dasharray) su un percorso lungo L: pattern L+d, un filo solo per volta, sempre
   visibile; quattro strati per filo (alone, luce nel solco ritagliata dal glifo, corpo, nucleo) con tratti più
   corti allineati in testa, mossi dallo stesso ciclo lineare, senza scatti (l'offset avanza di un pattern
   intero). Da ferma (senza copione o con «meno movimento»): i due fili fermi, incrociati nel nodo acceso.
   Tutto in un quadrato alto al più 80vh: a 1366×650 la composizione sta nella prima schermata. */
.tx-accesso-ecommerciale {
    --txe-carta: #1b1c62;
    --txe-carta-bordo: #111240;
    --txe-radente: rgba(255, 255, 255, .07);
    --txe-solco-alto: #121345;
    --txe-solco-basso: #0a0b2e;
    --txe-orlo: rgba(255, 255, 255, .30);
    --txe-azzurro: 125, 140, 255;          /* Transfer, va: l'azzurro del marchio */
    --txe-azzurro-chiaro: #c9d1ff;
    --txe-oro: 246, 204, 128;              /* Share, torna: l'oro dell'area esterna, schiarito per fare luce */
    --txe-oro-chiaro: #fff1cf;
    --txe-avorio: 244, 241, 232;
    --txe-ciclo: 13s;
    --txe-lato: min(94%, 80vh);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    margin: 0;
    padding: 3vh 0 5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--txe-carta);
    background-image:
        radial-gradient(ellipse 70% 55% at 28% 16%, var(--txe-radente), rgba(255, 255, 255, 0) 70%),
        radial-gradient(ellipse 80% 75% at 50% 50%, var(--txe-carta) 25%, var(--txe-carta-bordo) 100%);
    font-family: 'EB Garamond', Georgia, serif;
    color: rgb(var(--txe-avorio));
    user-select: none;
    -webkit-user-select: none;
}

[data-theme-mode="dark"] .tx-accesso-ecommerciale {
    --txe-carta: #13143f;
    --txe-carta-bordo: #090a26;
    --txe-radente: rgba(255, 255, 255, .05);
    --txe-solco-alto: #0c0d30;
    --txe-solco-basso: #05061c;
    --txe-orlo: rgba(255, 255, 255, .22);
}

/* Grana della carta su tutta la colonna, sopra tutto e per ultima nel markup, su un livello suo del
   compositore: il rumore (feTurbulence) si calcola una volta sola e non a ogni fotogramma dei fili. (Il livello
   non va dato alla tavola animata: con la rasterizzazione software ne usciva un doppione del filo.) */
.tx-accesso-ecommerciale__grana {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .07;
    pointer-events: none;
    will-change: transform;
}

/* Il quadrato della «&»: due tavole sovrapposte con la stessa viewBox (0 0 1000 1000, il glifo a corpo 1000
   sulla linea di base 851,5): sotto l'incisione, ferma, coi suoi filtri; sopra la luce, che si muove, senza
   filtri. */
.tx-accesso-ecommerciale__quadro {
    position: relative;
    flex: none;
    width: var(--txe-lato);
    aspect-ratio: 1 / 1;
    pointer-events: none;
}

.tx-accesso-ecommerciale__incisione,
.tx-accesso-ecommerciale__luce {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* La «&»: testo vero, EB Garamond corsivo, un em = 1000 unità della tavola (come il carattere). */
.tx-accesso-ecommerciale__et {
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1000px;
    text-rendering: geometricPrecision;
}

/* L'incisione: l'orlo in basso a destra che prende la luce (una copia chiara spostata, sotto) e il solco, più
   scuro della carta, con l'ombra interna lungo le pareti in alto a sinistra (filtro). */
.tx-accesso-ecommerciale__orlo-luce {
    fill: var(--txe-orlo);
}

.tx-accesso-ecommerciale__solco {
    fill: url(#tx-accesso-ecommerciale-fondo-solco);
}

.tx-accesso-ecommerciale__solco-alto {
    stop-color: var(--txe-solco-alto);
}

.tx-accesso-ecommerciale__solco-basso {
    stop-color: var(--txe-solco-basso);
}

/* I fili di luce: ogni strato è un tratto (--txe-d) sul suo percorso, in testa allo stesso punto degli altri;
   fermo nel nodo (--txe-fermo); in moto da --txe-da a --txe-a, cioè avanti di un pattern intero. */
.tx-accesso-ecommerciale__filo use {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--txe-d);
    stroke-dashoffset: var(--txe-fermo);
    animation: tx-accesso-ecommerciale-scorre var(--txe-ciclo) linear infinite;
}

.tx-accesso-ecommerciale__alone { stroke-width: 30; stroke-opacity: .12; }
.tx-accesso-ecommerciale__solco-luce { stroke-width: 60; stroke-opacity: .22; }
.tx-accesso-ecommerciale__corpo { stroke-width: 8; stroke-opacity: .5; }
.tx-accesso-ecommerciale__nucleo { stroke-width: 3; stroke-opacity: .98; }

/* Share, torna: L = 2644,9, filo 300, pattern 2944,9; nodo a 2183,1. */
.tx-accesso-ecommerciale__filo--share .tx-accesso-ecommerciale__alone { --txe-d: 300 2644.9; --txe-fermo: -1883.1; --txe-da: -410.6; --txe-a: -3355.6; stroke: rgb(var(--txe-oro)); }
.tx-accesso-ecommerciale__filo--share .tx-accesso-ecommerciale__solco-luce { --txe-d: 240 2704.9; --txe-fermo: -1943.1; --txe-da: -470.6; --txe-a: -3415.6; stroke: rgb(var(--txe-oro)); }
.tx-accesso-ecommerciale__filo--share .tx-accesso-ecommerciale__corpo { --txe-d: 210 2734.9; --txe-fermo: -1973.1; --txe-da: -500.6; --txe-a: -3445.6; stroke: var(--txe-oro-chiaro); }
.tx-accesso-ecommerciale__filo--share .tx-accesso-ecommerciale__nucleo { --txe-d: 135 2809.9; --txe-fermo: -2048.1; --txe-da: -575.6; --txe-a: -3520.6; stroke: #fffaf0; }

/* Transfer, va: L = 909,4, filo 170, pattern 1079,4; nodo a 461,5. */
.tx-accesso-ecommerciale__filo--transfer .tx-accesso-ecommerciale__alone { --txe-d: 170 909.4; --txe-fermo: -291.5; --txe-da: -831.2; --txe-a: -1910.6; stroke: rgb(var(--txe-azzurro)); }
.tx-accesso-ecommerciale__filo--transfer .tx-accesso-ecommerciale__solco-luce { --txe-d: 136 943.4; --txe-fermo: -325.5; --txe-da: -865.2; --txe-a: -1944.6; stroke: rgb(var(--txe-azzurro)); }
.tx-accesso-ecommerciale__filo--transfer .tx-accesso-ecommerciale__corpo { --txe-d: 119 960.4; --txe-fermo: -342.5; --txe-da: -882.2; --txe-a: -1961.6; stroke: var(--txe-azzurro-chiaro); }
.tx-accesso-ecommerciale__filo--transfer .tx-accesso-ecommerciale__nucleo { --txe-d: 76.5 1002.9; --txe-fermo: -385; --txe-da: -924.7; --txe-a: -2004.1; stroke: #ffffff; }

@keyframes tx-accesso-ecommerciale-scorre {
    from { stroke-dashoffset: var(--txe-da); }
    to { stroke-dashoffset: var(--txe-a); }
}

/* Il nodo: si accende quando i due fili vi arrivano insieme (a metà ciclo), poi si spegne. Da fermo è acceso. */
.tx-accesso-ecommerciale__nodo {
    opacity: 1;
    animation: tx-accesso-ecommerciale-nodo var(--txe-ciclo) ease-in-out infinite;
}

@keyframes tx-accesso-ecommerciale-nodo {
    0%, 38% { opacity: 0; }
    50% { opacity: 1; }
    62%, 100% { opacity: 0; }
}

/* «Transfer & Share», sotto la «&», in EB Garamond; la «&» in corsivo, un po' più grande. */
.tx-accesso-ecommerciale__nome {
    position: relative;
    flex: none;
    margin: calc(var(--txe-lato) * -0.085) 0 0;
    padding: 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(21px, 3vh, 31px);
    line-height: 1;
    letter-spacing: .02em;
    text-align: center;
    color: rgba(var(--txe-avorio), .86);
}

.tx-accesso-ecommerciale__nome em {
    font-style: italic;
    font-weight: 400;
    font-size: 1.18em;
    margin: 0 .04em;
}

/* Scheda nascosta: i fili e il nodo si fermano (classe messa da destra.js), e ripartono insieme. */
.tx-accesso-ecommerciale.tx-accesso-ecommerciale--nascosta .tx-accesso-ecommerciale__filo use,
.tx-accesso-ecommerciale.tx-accesso-ecommerciale--nascosta .tx-accesso-ecommerciale__nodo {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .tx-accesso-ecommerciale .tx-accesso-ecommerciale__filo use,
    .tx-accesso-ecommerciale .tx-accesso-ecommerciale__nodo {
        animation: none;
    }
}