/* SartUP — Home (schermata unica, formato 1366x1024 scalato alla finestra) */

/* ---------------------------------------------------------------------------
   I COLORI DELLA SCENA, UNA VOLTA SOLA
   ---------------------------------------------------------------------------
   Il pacchetto approvato portava i colori scritti a mano in ogni elemento: una
   veste chiara avrebbe significato riscriverli tutti, uno per uno, e sbagliarne
   qualcuno. Qui ogni tinta ha un nome, e la veste chiara e' una sola
   ridichiarazione sotto `[data-theme="light"]`.

   Sono variabili PAGE-LOCAL `--sp-*`, come nella pagina di accesso: nessun
   token condiviso `--app-*` viene ridefinito, quindi il gestionale e il Theme
   Studio non sono toccati in alcun modo.

   LA VESTE SCURA E' QUELLA DI PROGETTO, valore per valore: i numeri qui sotto
   sono gli stessi letterali del pacchetto approvato, non approssimazioni. La
   veste chiara e' la stessa scena di giorno — stessa geometria, stesse luci
   nelle stesse posizioni, intensita' rifatte perche' una luce che su fondo
   notturno e' un bagliore, su fondo bianco e' una macchia.

   IL TEMA PREDEFINITO E' LO SCURO, e lo decide `tema-superficie-pubblica`
   chiamando `V2Theme.resolveIn('dark')`: qui il blocco senza selettore e' la
   veste scura proprio perche' e' quella che si vede per prima.
   --------------------------------------------------------------------------- */
:root {
  /* Fondi e superfici */
  --sp-bg: #030A1C;                          /* fondo fuori dalla scena */
  --sp-panel: #06122E;                       /* pannello dell'hero e nodi del flusso */
  --sp-card: rgba(12,32,74,0.78);            /* schede flottanti */
  --sp-veil: rgba(255,255,255,0.03);         /* fascia del flusso */
  --sp-input-bg: rgba(255,255,255,0.06);     /* barra dell'assistente */
  --sp-rail: rgba(255,255,255,0.1);          /* binario della barra di avanzamento */

  /* Linee */
  --sp-panel-line: rgba(92,196,255,0.22);
  --sp-line-strong: rgba(92,196,255,0.35);
  --sp-field-line: rgba(92,196,255,0.45);
  --sp-node-line: rgba(92,196,255,0.5);
  --sp-track: rgba(92,196,255,0.25);
  --sp-soft-line: rgba(92,196,255,0.18);
  --sp-ghost-line: rgba(180,197,226,0.4);
  --sp-floor-line: rgba(63,184,255,.22);     /* griglia del pavimento prospettico */

  /* Testo */
  --sp-text-strong: #F2F7FF;
  --sp-text: #EAF2FF;
  --sp-muted: #B4C5E2;
  --sp-label: #8FA6CC;
  --sp-link-hover: #FFFFFF;

  /* Blu e accenti */
  --sp-eyebrow: #8FD3FF;
  --sp-accent: #5CC4FF;
  --sp-spark: #3FB8FF;
  --sp-spark-hi: #BFE8FF;
  --sp-beam-mid: #7FD4FF;
  --sp-blue-deep: #1E7BFF;
  --sp-primary: #1463E0;
  --sp-on-primary: #FFFFFF;
  --sp-ok: #3FE0A8;

  /* Il pulsante pieno si inverte fra le due vesti: pieno chiaro sul notturno,
     pieno scuro sul diurno. E' lo stesso gesto visivo, non lo stesso colore. */
  --sp-cta-bg: #FFFFFF;
  --sp-cta-fg: #06122E;

  /* Luci e ombre — il token porta l'INTERA dichiarazione, non il solo colore:
     su fondo chiaro un bagliore diventa un'ombra, e cambia la forma, non la
     tinta. */
  --sp-shell-glow: 0 0 80px rgba(30,123,255,.18);
  --sp-cta-glow: 0 8px 24px rgba(20,99,224,.35);
  --sp-chiedi-glow: 0 0 24px rgba(30,123,255,.6);
  --sp-focus-ring: 0 0 0 6px rgba(30,123,255,0.08), 0 0 40px rgba(30,123,255,0.25);
  --sp-card-shadow: 0 12px 30px rgba(0,0,0,.35);
  --sp-orb-core: rgba(30,123,255,.45);
  --sp-orb-edge: rgba(30,123,255,0);
  --sp-glow-soft: rgba(63,184,255,.35);
  --sp-glow-hot: rgba(63,184,255,.8);
  --sp-node-hit: rgba(63,184,255,.9);
  --sp-node-hot-text: #FFFFFF;

  /* LA CAMICIA E' DISEGNATA A CONTORNI CHIARI, per il fondo notturno, e il
     canvas la compone in modalita' additiva: su bianco sparirebbe. In chiaro si
     inverte il canvas e si riporta la tinta al blu con la rotazione di tonalita'
     — i PNG restano quelli, uno solo per entrambe le vesti. */
  --sp-shirt-filter: none;
}

:root[data-theme="light"] {
  --sp-bg: #E9EFF7;
  --sp-panel: #FFFFFF;
  --sp-card: rgba(233,241,252,0.92);
  --sp-veil: rgba(11,27,54,0.025);
  --sp-input-bg: rgba(11,27,54,0.04);
  --sp-rail: rgba(11,27,54,0.1);

  --sp-panel-line: rgba(12,86,140,0.20);
  --sp-line-strong: rgba(12,86,140,0.26);
  --sp-field-line: rgba(12,86,140,0.35);
  --sp-node-line: rgba(12,86,140,0.38);
  --sp-track: rgba(12,86,140,0.22);
  --sp-soft-line: rgba(12,86,140,0.16);
  --sp-ghost-line: rgba(11,27,54,0.22);
  --sp-floor-line: rgba(20,120,200,.12);

  --sp-text-strong: #06122E;
  --sp-text: #17294A;
  --sp-muted: #51637F;
  --sp-label: #5A6B86;
  --sp-link-hover: #06122E;

  --sp-eyebrow: #0F6FB0;
  --sp-accent: #0C7CC0;
  --sp-spark: #1379C9;
  --sp-spark-hi: #0A5A94;
  --sp-beam-mid: #2E9BE0;
  --sp-blue-deep: #1E7BFF;
  --sp-primary: #1463E0;
  --sp-on-primary: #FFFFFF;
  --sp-ok: #0E9A68;

  --sp-cta-bg: #0B1B36;
  --sp-cta-fg: #FFFFFF;

  --sp-shell-glow: 0 18px 50px rgba(11,27,54,.12);
  --sp-cta-glow: 0 8px 20px rgba(20,99,224,.28);
  --sp-chiedi-glow: 0 6px 16px rgba(20,99,224,.3);
  --sp-focus-ring: 0 0 0 6px rgba(30,123,255,0.07), 0 6px 18px rgba(11,27,54,0.08);
  --sp-card-shadow: 0 10px 24px rgba(11,27,54,.12);
  --sp-orb-core: rgba(30,123,255,.14);
  --sp-orb-edge: rgba(30,123,255,0);
  --sp-glow-soft: rgba(20,120,200,.18);
  --sp-glow-hot: rgba(20,120,200,.3);
  --sp-node-hit: rgba(20,120,200,.45);
  --sp-node-hot-text: #06122E;

  --sp-shirt-filter: invert(1) hue-rotate(180deg);
}

html, body { height: 100%; }
body { overflow: hidden; }
.sp-viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--sp-bg); overflow: hidden; }
.sp-stage { flex-shrink: 0; transform-origin: center center; }
body{margin:0;font-family:'Manrope','Helvetica Neue',sans-serif;background:var(--sp-bg);color:var(--sp-text)}
a{color:var(--sp-eyebrow);text-decoration:none}a:hover{color:var(--sp-link-hover)}
#sp-shirt{filter:var(--sp-shirt-filter)}

/* ---------------------------------------------------------------------------
   PULSANTE DEL TEMA — la coppia con «Accedi».
   ---------------------------------------------------------------------------
   Stessa altezza e stesso raggio della pillola che gli sta accanto, cosi' i due
   comandi si leggono come una coppia e non come due oggetti vicini. Il fondo e'
   la superficie del pannello, non il blu: l'azione primaria della testata e'
   una sola, ed e' «Accedi».
   --------------------------------------------------------------------------- */
.sp-tema{width:46px;height:46px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--sp-field-line);background:var(--sp-input-bg);color:var(--sp-accent);font-size:17px;line-height:1;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}
.sp-tema:hover{border-color:var(--sp-accent);color:var(--sp-text-strong);background:var(--sp-card)}
.sp-tema:focus-visible{outline:none;box-shadow:var(--sp-focus-ring)}

/* ---------------------------------------------------------------------------
   TABLET E TELEFONO — la schermata unica cede il passo al riflusso.
   ---------------------------------------------------------------------------
   Sul desktop la home e' una schermata sola, disegnata a 1366x1024 e scalata
   per riempire la finestra: e' il suo impianto, e resta. Su uno schermo stretto
   quella stessa scala la rimpicciolirebbe soltanto — a 390px di larghezza il
   fattore sarebbe 0,29 e il testo di 17px arriverebbe a 5: una cartolina
   illeggibile al centro di un rettangolo nero.

   Sotto i 1100px, quindi, la scala si spegne (lo fa `fit()` in `sartup-home.js`,
   con la STESSA soglia) e i blocchi tornano a impilarsi nel flusso normale, con
   lo scroll verticale che su un telefono e' il gesto atteso. Il vincolo «una
   schermata, nessuno scroll» vale dove ha senso, cioe' dove lo schermo e' largo.

   QUI SERVE `!important`, e non e' trascuratezza: il pacchetto approvato porta
   le misure negli attributi `style` di ogni elemento, che hanno specificita'
   massima. L'alternativa sarebbe riscrivere il markup di cinquanta nodi, cioe'
   rischiare il disegno desktop per sistemare il telefono. Le eccezioni stanno
   tutte qui dentro e valgono solo sotto la soglia.
   --------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  /* La scena non e' piu' una finestra fissa: e' una pagina che scorre. */
  html, body { height: auto; }
  body { overflow: auto; }
  .sp-viewport { position: static; display: block; min-height: 100%; overflow: visible; }
  .sp-stage {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    display: block !important;
    overflow: visible !important;
    padding-bottom: 26px;
  }

  .sp-header { flex-wrap: wrap; gap: 14px; padding: 16px 20px !important; }
  .sp-nav { gap: 20px !important; flex-wrap: wrap; font-size: 14px !important; order: 3; width: 100%; }
  .sp-azioni { margin-left: auto; }

  .sp-hero {
    height: auto !important;
    margin: 0 16px !important;
    border-radius: 24px !important;
    padding: 30px 22px 34px;
  }
  /* Il testo dell'hero smette di essere un livello sovrapposto e torna a
     essere il primo blocco della colonna. */
  .sp-hero-testo {
    position: static !important;
    width: auto !important;
    gap: 18px !important;
  }
  .sp-h1 { font-size: clamp(34px, 6.2vw, 62px) !important; }
  .sp-assistente { width: 100% !important; }
  .sp-cta-riga { flex-wrap: wrap; }

  /* LA SCENA SI RIMPICCIOLISCE INTERA, schede flottanti comprese: scalare il
     contenitore tiene insieme camicia, orbite e didascalie, che sono
     posizionate una rispetto all'altra e separandole si scomporrebbero.
     Il margine negativo restituisce al flusso l'altezza che la scala non
     occupa piu': senza, resterebbe sotto un vuoto alto quanto la differenza. */
  .sp-hero-scena {
    --sp-scena-k: .72;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    left: 50% !important;
    margin-top: 14px;
    margin-bottom: calc(700px * (var(--sp-scena-k) - 1));
    transform: translateX(-50%) scale(var(--sp-scena-k));
    transform-origin: top center;
  }
  .sp-orb-pos { right: -40px !important; top: 20px !important; width: 420px !important; height: 420px !important; }

  .sp-flusso { margin: 20px 16px 0 !important; }
  .sp-flusso-fascia { padding: 24px 18px 20px !important; border-radius: 20px !important; }
  /* Il puntino che viaggia sul binario e' calcolato su una riga sola di dieci
     nodi: su piu' righe correrebbe sopra il vuoto. Sparisce con il binario. */
  .sp-flusso-binario { display: none !important; }
  .sp-flusso-lista { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 20px 10px !important; }
}

@media (max-width: 760px) {
  /* Le voci di menu non portano ancora da nessuna parte: su una riga stretta
     occuperebbero due righe per non fare nulla. Tornano quando avranno una
     destinazione. */
  .sp-nav { display: none !important; }

  .sp-header { padding: 14px 16px !important; }
  .sp-hero { margin: 0 12px !important; padding: 24px 16px 28px; }
  .sp-flusso { margin: 16px 12px 0 !important; }
  .sp-flusso-lista { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sp-hero-scena { --sp-scena-k: .58; }
  .sp-orb-pos { width: 320px !important; height: 320px !important; }
  .sp-cta-riga > a { flex: 1 1 auto; text-align: center; }
}
.sp-draw{stroke-dasharray:2300;stroke-dashoffset:2300;animation:spDraw 7s ease-in-out infinite}
.sp-draw2{stroke-dasharray:1500;stroke-dashoffset:1500;animation:spDraw2 7s ease-in-out infinite}
@keyframes spDraw{0%{stroke-dashoffset:2300;opacity:1}35%,86%{stroke-dashoffset:0;opacity:1}97%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:2300;opacity:0}}
@keyframes spDraw2{0%,18%{stroke-dashoffset:1500;opacity:1}52%,86%{stroke-dashoffset:0;opacity:1}97%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1500;opacity:0}}
.sp-spin{transform-box:fill-box;transform-origin:center;animation:spSpin 28s linear infinite}
.sp-spin-rev{transform-box:fill-box;transform-origin:center;animation:spSpin 40s linear infinite reverse}
@keyframes spSpin{to{transform:rotate(360deg)}}
.sp-scan{animation:spScan 4.8s ease-in-out infinite}
@keyframes spScan{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(400px);opacity:0}}
.sp-float{animation:spFloat 6s ease-in-out infinite}
.sp-float.d1{animation-delay:-2s}.sp-float.d2{animation-delay:-4s}
@keyframes spFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.sp-pulse{animation:spPulse 2.4s ease-in-out infinite}
.sp-pulse.d1{animation-delay:-.8s}.sp-pulse.d2{animation-delay:-1.6s}
@keyframes spPulse{0%,100%{opacity:.25}50%{opacity:1}}
.sp-caret{display:inline-block;width:2px;height:20px;background:var(--sp-spark);margin-left:3px;vertical-align:-4px;animation:spBlink 1s steps(1) infinite}
@keyframes spBlink{50%{opacity:0}}
.sp-grid{background-image:linear-gradient(var(--sp-floor-line) 1px,transparent 1px),linear-gradient(90deg,var(--sp-floor-line) 1px,transparent 1px);background-size:64px 64px;transform:perspective(520px) rotateX(62deg);transform-origin:center top;animation:spGrid 5s linear infinite;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);mask-image:linear-gradient(to bottom,transparent,#000 45%)}
@keyframes spGrid{to{background-position:0 64px}}
.sp-glow{animation:spGlow 4s ease-in-out infinite}
@keyframes spGlow{0%,100%{text-shadow:0 0 18px var(--sp-glow-soft)}50%{text-shadow:0 0 34px var(--sp-glow-hot)}}
.sp-orb{animation:spOrb 9s ease-in-out infinite}
@keyframes spOrb{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.85}}
@media (prefers-reduced-motion:reduce){.sp-draw,.sp-draw2,.sp-spin,.sp-spin-rev,.sp-scan,.sp-float,.sp-pulse,.sp-grid,.sp-glow,.sp-orb,.sp-caret{animation:none;stroke-dashoffset:0}}
.sp-bar{width:20%;animation:spBar 8s ease-in-out infinite}
@keyframes spBar{0%{width:8%}85%,100%{width:100%}}
.sp-travel{left:5%;animation:spTravel 10s linear infinite}
@keyframes spTravel{0%{left:5%;opacity:0}3%{opacity:1}90%{left:95%;opacity:1}96%,100%{left:95%;opacity:0}}
.sp-node{animation:spNode 10s ease-out infinite}
@keyframes spNode{0%{box-shadow:0 0 0 rgba(63,184,255,0);border-color:var(--sp-node-line)}3%{box-shadow:0 0 26px var(--sp-node-hit);border-color:var(--sp-spark-hi);color:var(--sp-node-hot-text)}20%,100%{box-shadow:0 0 0 rgba(63,184,255,0);border-color:var(--sp-node-line)}}
.sp-flow{stroke-dasharray:6 8;animation:spDash 1.2s linear infinite}
@keyframes spDash{to{stroke-dashoffset:-28}}
@media (prefers-reduced-motion:reduce){.sp-bar,.sp-travel,.sp-node,.sp-flow{animation:none}.sp-bar{width:60%}}
.sp-trace{animation:spTrace 5s linear infinite}
@keyframes spTrace{to{stroke-dashoffset:-2067}}
.sp-trace2{animation:spTrace2 4s linear infinite}
@keyframes spTrace2{to{stroke-dashoffset:-1304}}
.sp-breathe{animation:spBreathe 4s ease-in-out infinite}
@keyframes spBreathe{0%,100%{opacity:.75}50%{opacity:1}}
.sp-turn{animation:spTurn 16s linear infinite}
@keyframes spTurn{from{transform:rotateX(-6deg) rotateY(0deg)}to{transform:rotateX(-6deg) rotateY(360deg)}}
.sp-hover{animation:spHover 6s ease-in-out infinite}
@keyframes spHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.sp-disc{animation:spSpin 18s linear infinite}
.sp-disc-rev{animation:spSpin 26s linear infinite reverse}
.sp-beam3d{animation:spBeam 4s ease-in-out infinite}
@keyframes spBeam{0%,100%{opacity:.55}50%{opacity:1}}