/* ============================================================
   BLOB RAGE — design system
   Palette estratta dall'artwork ufficiale (quantizzazione del logo).
   Conforme a: §3.2 palette, §3.3 tipografia, §3.4 layout,
   §3.5 componenti, §3.6 movimento, §3.7 mobile.
   ============================================================ */

:root{
  /* --- §3.2.7 : 1 base, 1 superficie, 2 accenti, 2 stati, 3 livelli testo --- */
  --base:        #0B0416;   /* mai #000000 */
  --surface:     #170A24;   /* sezioni alternate */
  --band:        #05010C;   /* banda scura a piena larghezza */
  --line:        #2E1B40;

  --accent:      #FF2DA8;   /* azione principale + cifre chiave */
  --accent-2:    #35E8FF;   /* bordi, etichette */

  --ok:          #A8D64B;   /* stato positivo (verde del soggetto) */
  --bad:         #FF5340;   /* stato negativo (avvisi truffa) */

  --text-1:      #F5EEDC;   /* mai #FFFFFF */
  --text-2:      #B4A5C4;
  --text-3:      #8F80A2;   /* 5.2:1 sulla superficie — §3.2.9 */

  /* --- §3.5.22 raggio unico --- */
  --r: 0px;

  /* --- §3.5.23 massimo due livelli di ombra --- */
  --sh-1: 4px 4px 0 rgba(0,0,0,.55);
  --sh-2: 0 0 40px rgba(255,45,168,.30);

  /* --- §3.6.27 curva unica --- */
  --ease: cubic-bezier(.2,0,0,1);
  --t-micro: 160ms;
  --t-sect:  380ms;

  /* --- §3.4.17 spaziatura multipli di 8 --- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px;

  --maxw: 1280px;
  --pad: 24px;
}

@media (min-width:900px){ :root{ --pad:64px; } }

/* ============================================================ RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--base); color:var(--text-1);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.58; font-weight:400;
  overflow-x:hidden; /* §3.7.31 — nessuna causa nota, solo rete di sicurezza */
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ============================================================ §3.3 TIPOGRAFIA
   2 famiglie: Archivo (display+corpo) + JetBrains Mono (hash, cifre, etichette).
   Nessun font novelty: l'effetto arcade viene da colore, bordi e scanline. */

.display{
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(44px,7.5vw,76px);
  line-height:1.0; letter-spacing:-.035em;
  text-transform:uppercase; margin:0;
}
h2,.h2{
  font-family:'Archivo',sans-serif; font-weight:800;
  font-size:clamp(28px,4vw,38px);
  line-height:1.08; letter-spacing:-.025em;
  text-transform:uppercase; margin:0 0 var(--s3);
}
h3,.h3{
  font-size:clamp(19px,2.2vw,23px); font-weight:700;
  line-height:1.2; letter-spacing:-.015em; margin:0 0 var(--s2);
}
p{ margin:0 0 var(--s2); max-width:68ch; } /* §3.3.14 */
.lead{ font-size:clamp(18px,2.1vw,21px); color:var(--text-2); line-height:1.55; }
.caption{ font-size:13.5px; color:var(--text-3); line-height:1.5; }

/* §3.3.15 etichette di sezione */
.label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-2);
  display:block; margin-bottom:var(--s2);
}
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }

/* ============================================================ §3.4 LAYOUT */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
section{ padding:var(--s7) 0; }                 /* 96px mobile */
@media (min-width:900px){ section{ padding:var(--s8) 0; } }
.surface{ background:var(--surface); }
.band{ background:var(--band); }

.grid{ display:grid; gap:var(--s4); }
.g-2{ grid-template-columns:1fr; }
.g-asym{ grid-template-columns:1fr; }
.g-cards{ grid-template-columns:1fr; }
@media (min-width:760px){
  .g-2{ grid-template-columns:1fr 1fr; }
  .g-cards{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1000px){
  .g-asym{ grid-template-columns:5fr 7fr; gap:var(--s6); align-items:center; }
  .g-asym.flip{ grid-template-columns:7fr 5fr; }
}

/* ============================================================ SCANLINE + GRANA
   §3.1: texture procedurale, seamless, zero peso in rete. */
.crt{
  position:fixed; inset:0; pointer-events:none; z-index:200;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.crt::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,0,.55) 100%);
}
@media (max-width:767px){ .crt{ opacity:.5; } }   /* §3.7.35 */

/* ============================================================ §3.5 COMPONENTI */

/* --- barra marquee superiore --- */
.topbar{
  position:sticky; top:0; z-index:150;
  background:var(--accent-2); color:#05010C;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  padding:6px var(--pad);
  display:flex; justify-content:space-between; align-items:center; gap:var(--s2);
  padding-top:calc(6px + env(safe-area-inset-top));
}
.topbar b{ animation:blink 1.4s steps(1,end) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* --- navigazione --- */
.nav{
  position:sticky; top:0; z-index:140;
  background:rgba(11,4,22,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s2); padding:var(--s2) var(--pad); max-width:var(--maxw); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:34px; height:34px; }
.brand span{ font-weight:900; letter-spacing:-.02em; font-size:17px; text-transform:uppercase; }
.nav-links{ display:flex; gap:2px; list-style:none; margin:0; padding:0; }
.nav-links a{
  display:flex; align-items:center; min-height:44px; padding:0 12px; /* §3.7.32 */
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-2);
  text-decoration:none; border-bottom:2px solid transparent;
  transition:color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.nav-links a:hover{ color:var(--text-1); border-bottom-color:var(--accent-2); }
.nav-links a[aria-current="page"]{ color:var(--accent-2); border-bottom-color:var(--accent-2); }
@media (max-width:719px){
  .nav-in{ flex-direction:column; align-items:stretch; gap:var(--s1); }
  .nav-links{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ white-space:nowrap; }
}

/* --- pulsanti --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 var(--s4);
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:#0B0416; background:var(--accent);
  border:2px solid var(--accent); border-radius:var(--r);
  box-shadow:var(--sh-1); cursor:pointer;
  transition:transform var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease),
             background var(--t-micro) var(--ease);
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(0,0,0,.55); }
.btn:active{ transform:translate(4px,4px); box-shadow:none; }
.btn:focus-visible{ outline:3px solid var(--accent-2); outline-offset:3px; }
.btn.ghost{ background:transparent; color:var(--accent-2); border-color:var(--accent-2); }
.btn.ghost:hover{ background:rgba(53,232,255,.10); }
.btn[aria-disabled="true"],.btn:disabled{
  background:transparent; color:var(--text-3); border-color:var(--line);
  box-shadow:none; cursor:not-allowed; transform:none;
}
@media (max-width:559px){ .btn{ width:100%; } }

/* --- schede --- */
.card{
  background:var(--base); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s4); position:relative;
  transition:border-color var(--t-micro) var(--ease),transform var(--t-micro) var(--ease);
}
a.card{ text-decoration:none; display:block; }
a.card:hover{ border-color:var(--accent-2); transform:translateY(-3px); }
a.card:focus-visible{ outline:3px solid var(--accent-2); outline-offset:3px; }

/* --- cornice cabinet per le immagini del soggetto --- */
.cab{ position:relative; display:block; }
.cab img{ position:relative; z-index:1; border:2px solid var(--accent-2); }
.cab::before{
  content:''; position:absolute; inset:0; z-index:0;
  border:2px solid var(--accent); transform:translate(8px,8px);
}
.cab.bloom::after{
  content:''; position:absolute; inset:-8%; z-index:-1;
  background:radial-gradient(circle at 50% 50%,rgba(255,45,168,.34),transparent 62%);
  filter:blur(28px); pointer-events:none;
}
@media (max-width:767px){
  .cab::before{ transform:translate(5px,5px); }
  .cab.bloom::after{ filter:blur(14px); opacity:.6; }  /* §3.7.35 prestazioni */
}

/* --- metriche --- */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
        border:1px solid var(--line); }
@media (min-width:860px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:var(--base); padding:var(--s3) var(--s2); }
.stat-n{
  font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(28px,4.6vw,40px); font-weight:700; line-height:1;
  color:var(--accent); letter-spacing:-.02em;
}
.stat-l{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
  margin-top:10px; display:block; line-height:1.45;
}

/* --- blocco contratto --- */
.ca{ border:2px solid var(--line); padding:var(--s4); background:var(--band); }
.ca-v{
  font-family:'JetBrains Mono',monospace; font-size:clamp(22px,4.2vw,34px);
  font-weight:700; color:var(--ok); letter-spacing:-.01em; margin:var(--s1) 0 var(--s2);
  word-break:break-all;
}
.ca.pending .ca-v{ color:var(--accent-2); }
.ca-warn{
  border-left:3px solid var(--bad); padding-left:var(--s2);
  color:var(--text-2); font-size:15px; max-width:64ch;
}

/* --- tabella §3.5.25 --- */
.tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); }
table{ width:100%; border-collapse:collapse; min-width:520px; }
th{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
  text-align:left; padding:var(--s2); border-bottom:1px solid var(--line);
}
td{ padding:var(--s2); border-bottom:1px solid var(--line); font-size:15px; color:var(--text-2); vertical-align:top; }
td.num{ font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; text-align:right; color:var(--text-1); }
tr:last-child td{ border-bottom:none; }

/* --- oggetti / reperti --- */
.relics{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); }
@media (min-width:700px){ .relics{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .relics{ grid-template-columns:repeat(6,1fr); } }
.relic{ border:1px solid var(--line); background:var(--base); padding:var(--s2); text-align:center; }
.relic img{ width:100%; aspect-ratio:1; object-fit:cover; }
.relic span{
  display:block; margin-top:10px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
}

/* ============================================================
   MEDIA SENZA CORNICE — il soggetto si fonde nel fondo.
   Maschera radiale sui bordi quadrati + bagliore dietro.
   ============================================================ */
.blend{ position:relative; display:block; isolation:isolate; }
.blend video,.blend img{
  position:relative; z-index:1;
  border:0; width:100%; height:auto;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 56%,rgba(0,0,0,.6) 68%,transparent 78%);
          mask-image:radial-gradient(circle at 50% 50%,#000 56%,rgba(0,0,0,.6) 68%,transparent 78%);
  filter:saturate(1.06) contrast(1.03);
}
.blend::before{                       /* bagliore magenta dietro il soggetto */
  content:''; position:absolute; inset:6%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 52%,rgba(255,45,168,.42),rgba(53,232,255,.12) 55%,transparent 72%);
  filter:blur(46px);
  animation:pulse 5.2s var(--ease) infinite;   /* §3.6.28: unica eccezione, il soggetto */
}
@keyframes pulse{ 50%{ opacity:.62; transform:scale(1.05); } }
@media (max-width:767px){
  .blend::before{ filter:blur(20px); opacity:.55; animation:none; }
}
/* ombra a terra: dà peso al soggetto senza cornice */
.blend::after{
  content:''; position:absolute; left:18%; right:18%; bottom:6%; height:14px; z-index:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.62),transparent 70%);
  filter:blur(9px); pointer-events:none;
}

/* ============================================================
   ANIMAZIONI — tutte una tantum all'ingresso, §3.6.26–28
   ============================================================ */

/* rivelazione scaglionata dei figli di una griglia */
.rv .stagger > *,.rv-l .stagger > *,.rv-r .stagger > *,.rv-s .stagger > *{
  opacity:0; transform:translateY(14px);
  transition:opacity var(--t-sect) var(--ease),transform var(--t-sect) var(--ease);
  transition-delay:calc(var(--i,0) * 55ms);
}
.rv.in .stagger > *,.rv-l.in .stagger > *,.rv-r.in .stagger > *,.rv-s.in .stagger > *{
  opacity:1; transform:none; }

/* varianti di ingresso: le sezioni non entrano tutte allo stesso modo */
.rv-l{ opacity:0; transform:translateX(-22px); transition:opacity var(--t-sect) var(--ease),transform var(--t-sect) var(--ease); }
.rv-r{ opacity:0; transform:translateX(22px);  transition:opacity var(--t-sect) var(--ease),transform var(--t-sect) var(--ease); }
.rv-s{ opacity:0; transform:scale(.955);       transition:opacity var(--t-sect) var(--ease),transform var(--t-sect) var(--ease); }
.rv-l.in,.rv-r.in,.rv-s.in{ opacity:1; transform:none; }

/* passata di scansione: una sola volta quando la sezione entra */
.sweep{ position:relative; overflow:hidden; }
.sweep::after{
  content:''; position:absolute; left:0; right:0; top:-40%; height:40%;
  background:linear-gradient(to bottom,transparent,rgba(53,232,255,.16),transparent);
  pointer-events:none; opacity:0;
}
.sweep.in::after{ animation:sweep 620ms var(--ease) 120ms 1 forwards; }
@keyframes sweep{ 0%{ opacity:1; top:-40%; } 100%{ opacity:0; top:120%; } }

/* glitch del titolo: una sola volta al caricamento */
.glitch{ position:relative; }
.glitch.go{ animation:glitch 460ms steps(2,end) 1; }
@keyframes glitch{
  0%,100%{ transform:none; text-shadow:-3px -3px 0 var(--accent),3px 3px 0 var(--accent-2); }
  20%{ transform:translate(-3px,1px); text-shadow:4px -2px 0 var(--accent),-4px 2px 0 var(--accent-2); }
  40%{ transform:translate(3px,-2px); text-shadow:-5px 2px 0 var(--accent-2),5px -1px 0 var(--accent); }
  60%{ transform:translate(-2px,2px); text-shadow:2px 3px 0 var(--accent),-2px -3px 0 var(--accent-2); }
  80%{ transform:translate(2px,0);    text-shadow:-4px -1px 0 var(--accent),4px 1px 0 var(--accent-2); }
}

/* parallasse leggera del soggetto, solo puntatore fine */
@media (hover:hover) and (pointer:fine){
  .par{ transition:transform 220ms var(--ease); will-change:transform; }
}

/* micro-interazione reperti */
.relic{ transition:border-color var(--t-micro) var(--ease),transform var(--t-micro) var(--ease),
                   box-shadow var(--t-micro) var(--ease); }
.relic img{ transition:transform var(--t-micro) var(--ease),filter var(--t-micro) var(--ease); }
.relic:hover{ border-color:var(--accent-2); transform:translateY(-4px); box-shadow:0 0 24px rgba(53,232,255,.20); }
.relic:hover img{ transform:scale(1.07); filter:saturate(1.2); }
.relic:hover span{ color:var(--accent-2); }

/* righe tabella */
tbody tr{ transition:background var(--t-micro) var(--ease); }
tbody tr:hover{ background:rgba(53,232,255,.045); }

/* angolo accento sulle schede */
a.card::after{
  content:''; position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 14px 14px 0;
  border-color:transparent var(--accent-2) transparent transparent;
  opacity:0; transition:opacity var(--t-micro) var(--ease);
}
a.card:hover::after{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .rv-l,.rv-r,.rv-s,.rv .stagger > *,.rv-l .stagger > *,.rv-r .stagger > *,.rv-s .stagger > *{ opacity:1 !important; transform:none !important; }
  .sweep::after{ display:none; }
  .blend::before{ animation:none; }
}

/* --- banda illustrata a piena larghezza --- */
.hero-band{ position:relative; padding:0; background:var(--band); }
.hero-band img{ width:100%; display:block; }
.hero-band .hb-txt{ padding:var(--s5) var(--pad) var(--s6); max-width:var(--maxw); margin:0 auto; }
.hero-band .hb-txt h2{ margin-bottom:var(--s2); }
@media (min-width:900px){
  .hero-band .hb-txt{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:100%; padding:var(--s7) var(--pad) 0;
  }
  .hero-band .hb-inner{ max-width:38ch; }
  .hero-band::after{
    content:''; position:absolute; inset:0 40% 40% 0; pointer-events:none;
    background:linear-gradient(105deg,rgba(5,1,12,.88),rgba(5,1,12,0) 78%);
  }
  .hero-band .hb-txt{ z-index:2; }
}

/* --- footer --- */
footer{ background:var(--band); border-top:1px solid var(--line); padding:var(--s6) 0 var(--s5); }
.foot{ display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; align-items:flex-start; }
.foot a{ color:var(--text-2); text-decoration:none; }
.foot a:hover{ color:var(--accent-2); }

/* ============================================================ §3.6 MOVIMENTO
   Le sezioni compaiono una sola volta all'ingresso nel viewport. */
.rv{ opacity:0; transform:translateY(18px); transition:opacity var(--t-sect) var(--ease),transform var(--t-sect) var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* L'unica animazione in loop è quella del soggetto. §3.6.28 */
.bob{ animation:bob 2.6s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateY(-10px); } }

/* §3.6.30 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .rv{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================ ACCESSIBILITÀ */
.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--accent-2); color:#05010C; padding:12px 20px; font-weight:700;
}
.skip:focus{ left:0; }
:focus-visible{ outline:3px solid var(--accent-2); outline-offset:2px; }

/* ============================================================
   ============  LAYER DI MOVIMENTO  ==========================
   Tutto in transform/opacity. Niente layout thrash.
   Si spegne con prefers-reduced-motion e si alleggerisce sotto 768px.
   ============================================================ */

/* ---------- 1. BARRA DI AVANZAMENTO LETTURA ---------- */
.prog{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:300;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform; pointer-events:none;
}

/* ---------- 2. NASTRO IN SCORRIMENTO ---------- */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--band); overflow:hidden; padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{
  display:flex; width:max-content; will-change:transform;
  animation:slide 44s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker span{
  font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums;
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-3); white-space:nowrap; padding:0 22px;
}
.ticker span b{ color:var(--accent-2); font-weight:600; }
.ticker span i{ color:var(--accent); font-style:normal; }
@keyframes slide{ to{ transform:translate3d(-50%,0,0); } }

/* ---------- 3. PIANI DELLA BANDA ILLUSTRATA ---------- */
.hero-band{ overflow:hidden; }
.hero-band img{ will-change:transform; transform:scale(1.12); }
.hero-band .fog{                     /* piano 2: foschia in deriva */
  position:absolute; inset:-10%; pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse 55% 40% at 22% 62%,rgba(255,45,168,.30),transparent 70%),
    radial-gradient(ellipse 45% 35% at 74% 40%,rgba(53,232,255,.16),transparent 70%);
  filter:blur(38px); animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{
  to{ transform:translate3d(5%,-3%,0) scale(1.12); }
}
.hero-band .mote{                    /* piano 3: pulviscolo */
  position:absolute; z-index:2; pointer-events:none; border-radius:50%;
  background:var(--accent-2); opacity:0; will-change:transform,opacity;
  animation:rise linear infinite;
}
@keyframes rise{
  0%{ opacity:0; transform:translate3d(0,0,0); }
  12%{ opacity:.55; }
  88%{ opacity:.35; }
  100%{ opacity:0; transform:translate3d(24px,-190px,0); }
}
.hero-band .glowbox{                 /* piano 4: il monitor lontano ancora acceso */
  position:absolute; z-index:2; pointer-events:none;
  left:60%; top:34%; width:6%; aspect-ratio:4/3;
  background:radial-gradient(ellipse at 50% 50%,rgba(210,240,255,.55),transparent 68%);
  filter:blur(7px); animation:crtflick 3.4s steps(3,end) infinite;
}
@keyframes crtflick{ 0%,72%,100%{ opacity:.85; } 76%{ opacity:.25; } 84%{ opacity:1; } }
.hero-band .hb-txt{ position:relative; z-index:3; }

/* ---------- 4. COREOGRAFIA D'INGRESSO ---------- */
/* titolo parola per parola */
.display .w{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.display .w > i{
  display:inline-block; font-style:normal;
  transform:translateY(104%); opacity:0;
  transition:transform 460ms var(--ease),opacity 300ms var(--ease);
  transition-delay:calc(var(--w,0) * 52ms);
}
.display.wordsin .w > i{ transform:none; opacity:1; }
.display.go .w{ overflow:visible; }

/* tendina sulle immagini */
.blend.wipe video,.blend.wipe img{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 520ms var(--ease);
}
.blend.wipe.in video,.blend.wipe.in img{ clip-path:inset(0 0 0 0); }

/* ---------- 5. MICROINTERAZIONI ---------- */
/* pulsanti magnetici */
.btn{ will-change:transform; }

/* bagliore che segue il cursore sulle schede e sulle metriche */
.stat,.card{ position:relative; overflow:hidden; }
.stat::before,.card::before{
  content:''; position:absolute; width:220px; height:220px; border-radius:50%;
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(53,232,255,.13),transparent 68%);
  opacity:0; transition:opacity var(--t-micro) var(--ease); pointer-events:none;
}
.stat:hover::before,.card:hover::before{ opacity:1; }
.stat > *,.card > *{ position:relative; z-index:1; }

/* inclinazione 3D dei reperti */
.relics{ perspective:800px; }
.relic{ transform-style:preserve-3d; }

/* sottolineatura che si disegna sui link di testo */
main p a:not(.btn),.foot a{
  background-image:linear-gradient(var(--accent-2),var(--accent-2));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size 220ms var(--ease),color var(--t-micro) var(--ease);
  text-decoration:none;
}
main p a:not(.btn):hover,.foot a:hover{ background-size:100% 1px; }

/* etichette che si decodificano */
.label{ font-variant-ligatures:none; }

/* ---------- 6. RIFINITURA ---------- */
::selection{ background:var(--accent); color:#0B0416; }
html{ scrollbar-color:var(--line) var(--base); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--base); }
::-webkit-scrollbar-thumb{ background:var(--line); border:2px solid var(--base); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* griglia di fondo in deriva lentissima */
body::before{
  content:''; position:fixed; inset:-40px; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(53,232,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(53,232,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  animation:gridpan 34s linear infinite;
}
@keyframes gridpan{ to{ transform:translate3d(44px,44px,0); } }

/* freccia "scorri" nella prima schermata */
.scrollcue{
  display:inline-flex; align-items:center; gap:10px; margin-top:28px;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--text-3);
}
.scrollcue::after{
  content:''; width:1px; height:26px; background:linear-gradient(var(--accent-2),transparent);
  animation:cue 2s var(--ease) infinite;
}
@keyframes cue{ 50%{ transform:translateY(7px) scaleY(1.25); } }

/* ---------- PRESTAZIONI E ACCESSIBILITÀ ---------- */
@media (max-width:767px){
  .hero-band .mote,.hero-band .glowbox{ display:none; }
  .hero-band .fog{ animation:none; filter:blur(22px); }
  body::before{ animation:none; }
  .ticker-track{ animation-duration:30s; }
}
@media (prefers-reduced-motion:reduce){
  .ticker-track,.hero-band .fog,.hero-band .mote,.hero-band .glowbox,
  body::before,.scrollcue::after{ animation:none !important; }
  .hero-band .mote{ display:none; }
  .display .w > i{ transform:none !important; opacity:1 !important; }
  .blend.wipe video,.blend.wipe img{ clip-path:none !important; }
  .prog{ display:none; }
  .hero-band img{ transform:none !important; }
}