/* ===========================================================
   Stile RETRÒ del sito (30/09/2026) — nato su home-retro.html, ora su tutto il sito:
   home, servizi, blog, strumenti, 404 e landing (queste senza menu).
   Un tocco da vecchio terminale / Matrix con i colori del marchio: ottanio al posto
   del verde fosforo, viola come accento. Il testo lungo resta in Montserrat;
   JetBrains Mono solo su titoli di sezione, etichette e pulsanti.
   ⚠ Scartati da Mario perché ricordavano troppo marcotramontano.com: schermata
   d'avvio, prefisso C:\>, font pixel VT323, scanline su tutta la pagina, titoli
   battuti a macchina. Scartati anche griglia a punti e banda di aggiornamento.
   Tutto si spegne con "Retro stile: off" nel menu (html.no-retro) e, per le parti
   in movimento, con prefers-reduced-motion. Lo script è assets/js/retro.js.
   Due famiglie di classi: quelle della home (style.css + home.css, body.home) e
   quelle di lp/assets/lp.css (tutte le altre pagine). Ha la versione nel link.
   =========================================================== */

:root{
  /* ottanio schiarito per il testo: #0086bb sul fondo fa 4,3:1, questo 7:1 */
  --r-fosforo:#3FB3E3;
  --r-fosforo-glow:rgba(63,179,227,.45);
  --r-fosforo-dim:rgba(63,179,227,.12);
  --r-viola:#9E75E2;
  --r-viola-glow:rgba(140,92,221,.55);
  --r-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ---------- pioggia di caratteri alla Matrix, dietro a tutto il sito ----------
   Canvas fisso sotto al contenuto. Più fitta ai lati, dove non c'è testo:
   al centro, sotto ai paragrafi, resta un'ombra. */
.retro-pioggia{
  position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;opacity:.65;
  --r-fascia:linear-gradient(90deg, #000 0%, rgba(0,0,0,.42) 22%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.42) 78%, #000 100%);
  -webkit-mask-image:var(--r-fascia);
          mask-image:var(--r-fascia);
}
/* 1. TORCIA: dove passa il mouse la pioggia si accende. Le due maschere si sommano
   (composizione "add", quella predefinita). --mx/--my li scrive retro.js. */
html.retro-torcia .retro-pioggia{
  -webkit-mask-image:radial-gradient(circle 230px at var(--mx,-999px) var(--my,-999px), #000 0%, rgba(0,0,0,.5) 55%, transparent 100%), var(--r-fascia);
          mask-image:radial-gradient(circle 230px at var(--mx,-999px) var(--my,-999px), #000 0%, rgba(0,0,0,.5) 55%, transparent 100%), var(--r-fascia);
}
/* ⚠ il fondo scuro passa da body a html: con il fondo sul body il canvas (z-index -1)
   finiva sotto e non si vedeva */
html{background:var(--bg, #161618);}
body{background:transparent !important;}
html.no-retro .retro-pioggia{display:none;}


/* ---------- alone della torcia ----------
   Un livello fisso sopra la pioggia e sotto il contenuto: una luce ottanio morbida
   attorno al mouse. (La griglia a punti c'era e Mario l'ha scartata il 29/09.) */
.retro-luce{position:fixed;inset:0;z-index:-1;pointer-events:none;}
html.retro-torcia .retro-luce{background:radial-gradient(circle 320px at var(--mx,-999px) var(--my,-999px), rgba(1,134,187,.10), transparent 70%);}
html.no-retro .retro-luce{display:none;}

/* ---------- scanline solo nella torcia ----------
   La pagina resta pulita: le righe da vecchio schermo compaiono solo nel cerchio
   attorno al mouse, come una lente. Stanno sopra il contenuto ma non intercettano
   i clic. Senza un mouse vero (telefono) non ci sono.
   (La banda di aggiornamento che passava ogni 9 secondi è stata scartata da Mario il 29/09.) */
html.retro-torcia:not(.no-retro) body::after{
  content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(63,179,227,.07) 0 1px, rgba(0,0,0,.30) 1px 2px, rgba(0,0,0,0) 2px 4px);
  -webkit-mask-image:radial-gradient(circle 210px at var(--mx,-999px) var(--my,-999px), #000 0%, rgba(0,0,0,.7) 50%, transparent 100%);
          mask-image:radial-gradient(circle 210px at var(--mx,-999px) var(--my,-999px), #000 0%, rgba(0,0,0,.7) 50%, transparent 100%);
}

/* cursore a blocco */
.retro-cursore{
  display:inline-block;width:.5em;height:.9em;margin-left:.1em;vertical-align:-.06em;
  background:currentColor;animation:retro-lampeggia 1s steps(1) infinite;
}
@keyframes retro-lampeggia{50%{opacity:0}}

/* ===== da qui in giù tutto vale solo con lo stile acceso ===== */
/* (l'intestazione "fissa solo la navbar" sta in menu.css: vale anche a stile spento) */

/* ================= HOME (style.css + home.css) ================= */

/* ---------- prima schermata ---------- */
/* il riquadro viola dell'avatar diventa un vetro: la pioggia si vede dietro a Mario */
html:not(.no-retro) .hero-home__avatar.bgSecondary30{background-color:rgba(45,38,82,.62);}
html:not(.no-retro) .hero-home__occhiello{
  font-family:var(--r-mono);font-weight:500;font-size:.82rem;letter-spacing:.06em;
  color:var(--r-fosforo);text-shadow:0 0 8px var(--r-fosforo-glow);
}
html:not(.no-retro) .hero-home__titolo .backTitle{font-family:var(--r-mono);font-weight:700;color:rgba(63,179,227,.09);letter-spacing:-.02em;}
html:not(.no-retro) .hero-home h1 .secondary{display:inline-block;text-shadow:0 0 22px var(--r-viola-glow);}
/* 3. GLITCH: per un attimo la scritta si sdoppia in una copia ottanio e una viola,
   come il logo (che ha la copia viola sfalsata dietro). Ogni 7 secondi e al passaggio
   del mouse. Fatto con text-shadow, così regge anche se il titolo va a capo. */
@media (prefers-reduced-motion:no-preference){
  html:not(.no-retro) .hero-home h1 .secondary{animation:retro-glitch 7s steps(1) 2s infinite;}
  html:not(.no-retro) .hero-home h1:hover .secondary{animation:retro-glitch-breve .5s steps(1) 1;}
}
@keyframes retro-glitch{
  0%,90%,100%{text-shadow:0 0 22px var(--r-viola-glow);transform:none;}
  91%{text-shadow:-4px 0 #0086bb, 4px 0 #8C5CDD;transform:translateX(2px) skewX(-6deg);}
  92%{text-shadow:3px -1px #0086bb, -3px 1px #8C5CDD;transform:translateX(-3px);}
  93%{text-shadow:-2px 1px #0086bb, 2px -1px #8C5CDD;transform:skewX(4deg);}
  94%{text-shadow:0 0 22px var(--r-viola-glow);transform:none;}
  96%{text-shadow:5px 0 #0086bb, -5px 0 #8C5CDD;transform:translateX(1px);}
  97%{text-shadow:0 0 22px var(--r-viola-glow);transform:none;}
}
@keyframes retro-glitch-breve{
  0%{text-shadow:-4px 0 #0086bb, 4px 0 #8C5CDD;transform:translateX(2px) skewX(-6deg);}
  20%{text-shadow:3px -1px #0086bb, -3px 1px #8C5CDD;transform:translateX(-3px);}
  40%{text-shadow:-2px 1px #0086bb, 2px -1px #8C5CDD;transform:skewX(4deg);}
  60%{text-shadow:5px 0 #0086bb, -5px 0 #8C5CDD;transform:none;}
  80%,100%{text-shadow:0 0 22px var(--r-viola-glow);transform:none;}
}
html:not(.no-retro) .hero-home__lead::before{content:"// ";font-family:var(--r-mono);font-weight:700;color:var(--r-fosforo);}

/* l'avatar con un velo ottanio dal basso */
.hero-home__avatar{position:relative;}
html:not(.no-retro) .hero-home__avatar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(1,94,130,.25), rgba(1,94,130,0) 45%);
  mix-blend-mode:multiply;
}

/* ---------- pulsanti: tasti da terminale ---------- */
html:not(.no-retro) .btnMl{font-family:var(--r-mono);font-weight:600 !important;font-size:.95rem;letter-spacing:.02em;border-radius:3px !important;}
html:not(.no-retro) .hero-home__cta .btnMl{padding:14px 20px;}
html:not(.no-retro) .btnMl:not(.btnMl--wa):not(.btnMl--linea){box-shadow:0 0 0 1px var(--r-fosforo),0 0 16px var(--r-fosforo-dim);}
html:not(.no-retro) .btnMl:not(.btnMl--wa):not(.btnMl--linea)::before{content:"[ ";color:var(--r-fosforo);}
html:not(.no-retro) .btnMl:not(.btnMl--wa):not(.btnMl--linea)::after{content:" ]";color:var(--r-fosforo);}
html:not(.no-retro) .btnMl:not(.btnMl--wa):not(.btnMl--linea):hover{box-shadow:0 0 0 1px var(--r-viola),0 0 20px var(--r-viola-glow);}
html:not(.no-retro) .btnMl:not(.btnMl--wa):not(.btnMl--linea):hover::before,
html:not(.no-retro) .btnMl:not(.btnMl--wa):not(.btnMl--linea):hover::after{color:#fff;}
html:not(.no-retro) .btnMl--wa{box-shadow:0 0 16px rgba(37,211,102,.25);}

/* ---------- fascia sotto la prima schermata ---------- */
html:not(.no-retro) .fascia-home__elenco li{border-left-color:var(--r-fosforo);}
html:not(.no-retro) .fascia-home__elenco b{font-family:var(--r-mono);font-weight:700;font-size:1rem;}

/* ---------- titoli di sezione: un prompt che si scrive ---------- */
html:not(.no-retro) .home main h2{font-family:var(--r-mono);font-weight:700;font-size:clamp(2rem,4.6vw,2.8rem);letter-spacing:-.02em;line-height:1.1;color:var(--r-fosforo);text-shadow:0 0 10px var(--r-fosforo-glow);}
html:not(.no-retro) .home main h2 .halfBack{color:var(--r-viola) !important;text-shadow:0 0 12px var(--r-viola-glow);}
html:not(.no-retro) .home main h2 .halfBack::after{content:none !important;} /* la banda sotto la parola non serve col font da terminale */
.retro-cursore{color:var(--r-viola);}
/* 2. i caratteri ancora da decifrare sono più spenti */
.retro-cifra{color:var(--r-fosforo);opacity:.55;text-shadow:none;}
#fixedButton .retro-cifra,.fab .retro-cifra{color:inherit;opacity:.6;}
html.no-retro .retro-cursore{display:none;}

/* ---------- schede: finestre di terminale ----------
   retro.js mette .retro-scheda a tutte le schede del sito: .offerta e .servizio-home
   della home, .card .need .case .plan .range .scope__col .post-card .author
   .stepup__box .dom-box delle pagine con lp.css. Il fondo resta quello di ogni
   scheda: qui si aggiunge solo un velo ottanio. */
html:not(.no-retro) .retro-scheda{
  border:1px solid rgba(63,179,227,.28) !important;border-radius:6px !important;
  box-shadow:inset 0 0 24px rgba(1,94,130,.10);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
html:not(.no-retro) .retro-scheda:not(.plan--featured){background-image:linear-gradient(rgba(1,94,130,.10), rgba(1,94,130,.03)) !important;}
html:not(.no-retro) .retro-scheda:hover{border-color:rgba(140,92,221,.65) !important;box-shadow:inset 0 0 24px rgba(140,92,221,.10),0 0 18px rgba(140,92,221,.22);}
html:not(.no-retro) .plan--featured.retro-scheda{border-color:var(--secondary, #8C5CDD) !important;}
html:not(.no-retro) .offerta .info,
html:not(.no-retro) .servizio-home__nota{font-family:var(--r-mono);font-weight:500;font-size:.78rem;letter-spacing:.06em;color:var(--r-fosforo);}
html:not(.no-retro) .offerta .info::before{content:"■ ";color:var(--r-viola);}
html:not(.no-retro) .servizio-home h3::before,
html:not(.no-retro) .offerta h3::before,
html:not(.no-retro) .need h3::before,
html:not(.no-retro) .card h3::before{content:"> ";font-family:var(--r-mono);color:var(--r-fosforo);}
html:not(.no-retro) .servizio-home a{font-family:var(--r-mono);font-weight:600;font-size:.88rem;}
html:not(.no-retro) .servizio-home a::after{content:" _";}
@media (prefers-reduced-motion:no-preference){
  html:not(.no-retro) .servizio-home a:hover::after{animation:retro-lampeggia 1s steps(1) infinite;}
}

/* 5. BORDI CHE SI CARICANO: quando la scheda entra a schermo il bordo ottanio si
   disegna tutto intorno, come una barra di avanzamento, e poi resta acceso.
   L'angolo animato è una proprietà registrata: dove @property non c'è, il bordo
   compare già intero. Senza JavaScript la classe non c'è e il bordo resta quello di sempre. */
@property --r-giro{syntax:'<angle>';inherits:false;initial-value:360deg;}
html:not(.no-retro) .retro-scheda{position:relative;}
html:not(.no-retro) .retro-scheda::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from 0deg, var(--r-fosforo) var(--r-giro), transparent 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity:.7;transition:opacity .2s ease;
}
/* .case ha overflow:hidden, che taglierebbe il bordo disegnato 1px fuori: lì va dentro */
html:not(.no-retro) .case.retro-scheda::before{inset:0;z-index:1;}
html:not(.no-retro) .retro-scheda:hover::before{opacity:0;} /* al passaggio vince il bordo viola */
@media (prefers-reduced-motion:no-preference){
  html:not(.no-retro) .retro-scheda:not(.is-carica)::before{--r-giro:0deg;}
  html:not(.no-retro) .retro-scheda.is-carica::before{animation:retro-carica 1.1s cubic-bezier(.5,0,.3,1) both;}
}
@keyframes retro-carica{from{--r-giro:0deg;}to{--r-giro:360deg;}}

/* ---------- come lavoro ---------- */
html:not(.no-retro) .metodo-home h3{font-family:var(--r-mono);font-weight:700;font-size:1.1rem;}
html:not(.no-retro) .metodo-home > div:nth-child(1) h3::before{content:"01 ";color:var(--r-fosforo);}
html:not(.no-retro) .metodo-home > div:nth-child(2) h3::before{content:"02 ";color:var(--r-fosforo);}
html:not(.no-retro) .metodo-home > div:nth-child(3) h3::before{content:"03 ";color:var(--r-fosforo);}

/* ---------- lavori: il video dentro un monitor ---------- */
html:not(.no-retro) #progetti .lavoro-home video{border-radius:10px;border:1px solid rgba(63,179,227,.3);box-shadow:0 0 30px rgba(1,94,130,.25);}
html:not(.no-retro) #progetti .info{font-family:var(--r-mono);font-weight:500;font-size:.78rem;letter-spacing:.05em;color:var(--r-fosforo);}

/* ================= FOOTER (piede.css, uguale ovunque) ================= */
html:not(.no-retro) .piede-home__btn{font-family:var(--r-mono);font-weight:600 !important;font-size:.95rem;border-radius:3px;}
html:not(.no-retro) .piede-home__btn--wa{box-shadow:0 0 16px rgba(37,211,102,.25);}
html:not(.no-retro) .piede-home__occhiello{font-family:var(--r-mono);font-weight:500;letter-spacing:.06em;color:var(--r-fosforo);}
html:not(.no-retro) .piede-home__titolo{font-family:var(--r-mono);font-weight:600;font-size:.8rem;letter-spacing:.06em;color:var(--r-fosforo);}
html:not(.no-retro) .piede-home__titolo::before{content:"./";color:var(--r-viola);}
html:not(.no-retro) .piede-home__invito h2::after{
  content:"";display:inline-block;width:.45em;height:.85em;margin-left:.12em;vertical-align:-.08em;
  background:var(--r-viola);box-shadow:0 0 12px var(--r-viola-glow);
}
@media (prefers-reduced-motion:no-preference){
  html:not(.no-retro) .piede-home__invito h2::after{animation:retro-lampeggia 1s steps(1) infinite;}
}

/* ================= PAGINE CON lp.css =================
   servizi, blog, strumenti, 404, landing. I titoli qui sono frasi intere e restano
   in Montserrat; il ruolo del "::parola" della home lo prende l'occhiello (.eyebrow),
   che si decifra e ha il cursore. */
html:not(.no-retro) .eyebrow{
  font-family:var(--r-mono);font-weight:600;font-size:.78rem;letter-spacing:.08em;
  color:var(--r-viola);text-shadow:0 0 10px var(--r-viola-glow);
}
html:not(.no-retro) .eyebrow::before{content:"::";color:var(--r-fosforo);margin-right:.35em;text-shadow:0 0 8px var(--r-fosforo-glow);}
html:not(.no-retro) .hero .lead::before{content:"// ";font-family:var(--r-mono);font-weight:700;color:var(--r-fosforo);}
/* il glitch del titolo principale, sulla parola evidenziata */
@media (prefers-reduced-motion:no-preference){
  html:not(.no-retro) .hero h1 .mark{animation:retro-glitch 7s steps(1) 2s infinite;}
  html:not(.no-retro) .hero h1:hover .mark{animation:retro-glitch-breve .5s steps(1) 1;}
}
/* pulsanti da terminale; il verde di WhatsApp resta pieno */
html:not(.no-retro) .btn{font-family:var(--r-mono);font-weight:600;letter-spacing:.01em;border-radius:3px;}
/* inline-block e non flex: con le parentesi come elementi flex, quando il testo andava a
   capo (pulsanti larghi sul telefono) "[" e "]" finivano ai due bordi, lontane dalle parole */
html:not(.no-retro) main .btn:not(.btn--wa){display:inline-block;box-shadow:0 0 0 1px var(--r-fosforo),0 0 16px var(--r-fosforo-dim);}
html:not(.no-retro) main .btn:not(.btn--wa) svg{display:inline-block;vertical-align:-3px;margin-right:6px;}
html:not(.no-retro) main .btn:not(.btn--wa)::before{content:"[ ";color:var(--r-fosforo);}
html:not(.no-retro) main .btn:not(.btn--wa)::after{content:" ]";color:var(--r-fosforo);}
html:not(.no-retro) main .btn:not(.btn--wa):hover{box-shadow:0 0 0 1px var(--r-viola),0 0 20px var(--r-viola-glow);}
html:not(.no-retro) .btn--wa{box-shadow:0 0 16px rgba(37,211,102,.25);}
/* etichette piccole e numeri in mono */
html:not(.no-retro) .trust li b,
html:not(.no-retro) .crumbs,
html:not(.no-retro) .post-meta,
html:not(.no-retro) .card__meta,
html:not(.no-retro) .case__tag,
html:not(.no-retro) .need__sol b,
html:not(.no-retro) .phase__when,
html:not(.no-retro) .phase__dot,
html:not(.no-retro) .card__num{font-family:var(--r-mono);}
html:not(.no-retro) .phase__dot,
html:not(.no-retro) .card__num{color:var(--r-fosforo);border-color:rgba(63,179,227,.35);}
/* le fasce a sfondo pieno diventano vetro, come sulla home: la pioggia si vede sotto */
html:not(.no-retro) .section--alt,
html:not(.no-retro) .trust,
html:not(.no-retro) .lp-footer{background-color:rgba(30,30,33,.72);}

/* ---------- interruttore nel menu ----------
   Lo aggiunge retro.js: in barra solo l'icona del terminale, in cima al
   pannello del telefono icona + "Retro stile: on/off". */
.navml__barra > li.navml__retro > button{padding:9px 11px;}
.navml__barra > li.navml__retro > button::after{content:none;} /* niente freccina: non apre una tendina */
/* la tendina di Strumenti non è più l'ultima voce: resta allineata a destra */
.navml__barra > li:nth-last-child(2) .navml__sotto{left:auto;right:0;}
.retro-interruttore svg{flex:0 0 auto;overflow:visible;}
/* l'icona del terminale lampeggia per farsi notare: il cursore "_" batte sempre,
   e finché non la si è mai toccata un alone ottanio pulsa attorno al tasto */
@media (prefers-reduced-motion:no-preference){
  .retro-icona__cursore{animation:retro-lampeggia 1s steps(1) infinite;}
  html:not(.retro-provato) .navml__barra .retro-interruttore,
  html:not(.retro-provato) .navml__tasto{animation:retro-richiamo 2s ease-in-out infinite;}
  html:not(.retro-provato) .navml__pannello .retro-interruttore svg{animation:retro-richiamo-icona 2s ease-in-out infinite;}
}
@keyframes retro-richiamo{
  0%,100%{box-shadow:0 0 0 0 rgba(63,179,227,0);}
  50%{box-shadow:0 0 0 3px rgba(63,179,227,.35),0 0 18px rgba(63,179,227,.55);}
}
@keyframes retro-richiamo-icona{
  0%,100%{filter:none;}
  50%{filter:drop-shadow(0 0 6px rgba(63,179,227,.9));}
}
.retro-interruttore[aria-pressed="true"]{color:var(--r-fosforo) !important;}
.retro-interruttore[aria-pressed="true"] svg{filter:drop-shadow(0 0 5px var(--r-fosforo-glow));}
.navml__pannello .retro-interruttore{
  display:flex;align-items:center;gap:10px;width:100%;margin-bottom:6px;
  padding:11px 13px;border:0;border-bottom:1px solid rgba(255,255,255,.08);border-radius:9px 9px 0 0;
  background:none;color:var(--navml-testo, #fff);font:inherit;font-size:.97rem;text-align:left;cursor:pointer;
}
.navml__pannello .retro-interruttore:hover{background:rgba(255,255,255,.07);}
.retro-interruttore__stato{font-family:var(--r-mono);font-weight:700;font-size:.85em;}

/* testo per chi legge con lo screen reader, nascosto a schermo (occhielli animati) */
.retro-sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}