/* ==========================================================================================
   base.css — token, reset, font, tipografia fluida, griglia, grana, bagliori, foto, accessibilità
   (agente fondamenta). Mobile-first fino a 390 px. Catalogo: /styleguide.php
   ========================================================================================== */

/* ---------------------------------------------------------------- token (BRIEF §2.1) ---- */
:root {
  --nero: #06050c;
  --nero-2: #0d0a1a;
  --nero-3: #15112a;
  --linea: rgba(239, 233, 225, .12);
  --linea-forte: rgba(239, 233, 225, .24);
  --carta: #efe9e1;
  --carta-2: #b9b2bf;
  --carta-3: #8a8496;          /* 5,6:1 su --nero, 4,7:1 su --stanza: ok per il testo piccolo */
  --viola: #7940e0;            /* azione: bottoni, focus, avanzamento. Testo solo ≥ 32 px */
  --viola-luce: #a98bff;       /* testo viola su scuro: 7,6:1 */
  --viola-fondo: #41256c;
  --viola-ombra: #23143d;
  --alone: #6931aa;
  --neon: #ce69e3;             /* rarissimo: filo dello strappo, punta dei raggi X */
  --stanza: #23143d;           /* colore della stanza finale */

  /* tre voci (reference dragonfly2): serif leggero per le parole grandi e le frasi, grottesco per la
     struttura (menu, bottoni, testo d'interfaccia), mono per etichette e dati */
  --font-sans: "Schibsted Grotesk", "Schibsted Ripiego", Arial, sans-serif;
  --font-display: "Roboto Serif", "Roboto Serif Ripiego", Georgia, serif;
  --font-voce: "Roboto Serif", "Roboto Serif Ripiego", Georgia, serif;
  --font-mono: "Geist Mono", "Geist Mono Ripiego", "Courier New", monospace;
  --font-serif: "Roboto Serif", "Roboto Serif Ripiego", Georgia, serif;
  --peso-display: 300;

  /* griglia e ritmo (BRIEF §2.3, §11: più aria, reference hobro.digital) */
  --margine: clamp(20px, 2.5vw, 48px);
  --gutter: clamp(16px, 1.8vw, 32px);
  --ritmo: clamp(128px, 22vh, 280px);
  --aria: clamp(40px, 7vh, 96px);      /* fra il titolo di un blocco e il suo contenuto */
  --lettura: 64ch;
  --testata-h: 64px;
  --hud-h: 44px;

  /* curve (inherited / unbelievablycrap / meermohsin) */
  --curva-sipario: cubic-bezier(.6, .14, 0, 1);
  --curva-expo: cubic-bezier(.19, 1, .22, 1);
  --curva-link: cubic-bezier(.35, .42, 0, 1);
  --curva-osmo: cubic-bezier(.625, .05, 0, 1);

  /* livelli */
  --z-testata: 50;
  --z-hud: 50;
  --z-avanzamento: 55;
  --z-overlay: 60;
  --z-cursore: 65;
  --z-cantiere: 70;
  --z-strappo: 80;
  --z-preloader: 82;
  --z-grana: 90;
}

/* ---------------------------------------------------------------- font ------------------ */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Serif";
  src: url("../fonts/roboto-serif-latin-wdth112-wght300-500.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Serif";
  src: url("../fonts/roboto-serif-italic-latin-wdth112-wght300.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
/* ripieghi metrici (size-adjust misurato con fontTools sui file veri: niente salto al cambio font) */
@font-face {
  font-family: "Schibsted Ripiego";            /* corpo: larghezza media minuscole 0,494 vs Arial 0,466 */
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 106%;
  ascent-override: 92%;
  descent-override: 24.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Schibsted Ripiego Maiuscolo";  /* titoli in maiuscolo: 0,662 vs 0,677 */
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 97.8%;
  ascent-override: 99.8%;
  descent-override: 26.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Ripiego";
  src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono");
  size-adjust: 100%;
  ascent-override: 100.5%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Roboto Serif Ripiego";         /* maiuscole 0,705 vs Georgia 0,681; minuscole 0,554 vs 0,499 */
  src: local("Georgia");
  size-adjust: 106%;
  ascent-override: 87.5%;
  descent-override: 23%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- reset ----------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  background: var(--nero);
  color: var(--carta);
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: var(--viola-fondo) var(--nero);
  hanging-punctuation: first;
}
body {
  min-height: 100svh;
  overflow-x: clip;
  background: var(--nero);
  font-size: clamp(16px, 1.2vw, 18px);
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class], nav ul, nav ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; line-height: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
b, strong { font-weight: 600; }
[hidden] { display: none !important; }
::selection { background: var(--viola); color: var(--carta); }
table { border-collapse: collapse; }

/* Lenis (da vendor/lenis.css, qui per risparmiare una richiesta) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* Mentre la pagina scorre veloce il contenuto non riceve il puntatore: col mouse fermo le righe che gli passano
   sotto accendevano hover, demo e cursore a ogni fotogramma (misurato: tools/misura_scroll.py). La classe la
   mette core.js solo sopra una velocità percepibile: appena ci si ferma il clic funziona. */
html.mm-scorre main, html.mm-scorre footer { pointer-events: none; }
html.mm-aperto, html.preloader-blocca { overflow: hidden; }

/* ---------------------------------------------------------------- accessibilità --------- */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--viola-luce); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.contenuto:focus { outline: none; }
.salta {
  position: fixed; left: var(--margine); top: 10px; z-index: calc(var(--z-grana) + 1);
  padding: 12px 18px; border-radius: 999px;
  background: var(--carta); color: var(--nero);
  font: 500 13px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .04em;
  transform: translateY(-160%); transition: transform .4s var(--curva-expo);
}
.salta:focus { transform: none; }

/* ---------------------------------------------------------------- tipografia (BRIEF §2.2) */
/* Display: 150-200 px a 1440; limitato anche dall'altezza (1366×768 non sfora). */
.t-display {
  font-family: var(--font-display);
  font-size: clamp(48px, min(13.2vw, 22svh), 200px);
  font-weight: var(--peso-display);
  line-height: .85;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
/* Titolo di sezione: ~90 px a 1440 (più contenuto: lascia respirare la pagina) */
.t-titolo {
  font-family: var(--font-display);
  font-size: clamp(36px, min(6.2vw, 11svh), 100px);
  font-weight: var(--peso-display);
  line-height: .9;
  letter-spacing: -.05em;
  text-transform: uppercase;
}
/* Titolo 3: 40-48 px */
.t-titolo3 {
  font-family: var(--font-voce);
  font-size: clamp(28px, 3.25vw, 48px);
  font-weight: var(--peso-display);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.t-titolo3.maiuscolo { font-family: var(--font-display); text-transform: uppercase; }
/* Lead: 22-24 px */
.t-lead {
  font-family: var(--font-voce);
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -.012em;
}
/* Corpo: 17-18 px, mai sotto 16 */
.t-corpo {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
}
/* Etichetta HUD mono: 11-12 px, mai sotto 11 */
.t-mono, .etichetta {
  font-family: var(--font-mono);
  font-size: clamp(11px, .8vw, 12px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Dato grande: 64-120 px, cifre tabellari per il count-up */
.t-dato {
  font-family: var(--font-display);
  font-size: clamp(56px, 7.5vw, 120px);
  font-weight: var(--peso-display);
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.t-dato.mono { font-family: var(--font-mono); letter-spacing: -.06em; }
/* La parola in corsivo (massimo 2 per pagina, sempre minuscola): stesso serif, in corsivo */
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.04em;
  letter-spacing: -.035em;
  text-transform: none;
  line-height: .8;
}
.t-display .serif { letter-spacing: -.04em; font-size: min(1.04em, 200px); } /* mai oltre i 200 px (BRIEF §2.2) */
.rientro { display: inline-block; padding-left: var(--rientro, .62em); }
.secondario { color: var(--carta-2); }
.fioco { color: var(--carta-3); }
.accento { color: var(--viola-luce); }
.leggibile { max-width: var(--lettura); }
.maiuscolo { text-transform: uppercase; }

/* testo corrente dentro .prosa (articoli, case study) */
.prosa { max-width: var(--lettura); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--carta-2); }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2, .prosa h3 { color: var(--carta); line-height: 1.12; margin-top: 2em; letter-spacing: -.025em; font-family: var(--font-voce); font-weight: 400; }
.prosa h2 { font-size: clamp(26px, 2.6vw, 36px); }
.prosa h3 { font-size: clamp(21px, 1.9vw, 26px); }
.prosa strong { color: var(--carta); }
.prosa a { color: var(--viola-luce); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.prosa ul, .prosa ol { padding-left: 1.2em; }
.prosa li + li { margin-top: .4em; }

/* split di core.js */
.mm-visivo { display: inline; }
.mm-visivo--muto { user-select: none; -webkit-user-select: none; }
.mm-p { display: inline-block; white-space: nowrap; }
.mm-l { display: inline-block; }
.mm-unito { white-space: nowrap; }
.mm-riga { display: block; overflow-y: clip; overflow-x: visible; padding-bottom: .12em; margin-bottom: -.12em; }
.mm-riga__in { display: block; }
.mm-scramble { display: inline-block; text-align: inherit; vertical-align: top; overflow: visible; }
.mm-conta { display: inline-block; }
.mm-filtri, .mm-simboli { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* stato iniziale nascosto SOLO con JS e movimento attivo; salvagente dopo 3 s se il motore non parte */
html.mm-anima:not(.mm-pronto) [data-rivela] { opacity: 0; animation: mm-salvagente 0s 3s forwards; }
@keyframes mm-salvagente { to { opacity: 1; } }

/* ---------------------------------------------------------------- griglia (12 colonne) -- */
.contenitore { padding-inline: var(--margine); }
.griglia {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.griglia > * { grid-column: 1 / -1; min-width: 0; }
.m-span-6 { grid-column: auto / span 6; }
.m-span-4 { grid-column: auto / span 4; }
.m-span-8 { grid-column: auto / span 8; }
@media (min-width: 820px) {
  .span-1 { grid-column: auto / span 1; }  .span-2 { grid-column: auto / span 2; }
  .span-3 { grid-column: auto / span 3; }  .span-4 { grid-column: auto / span 4; }
  .span-5 { grid-column: auto / span 5; }  .span-6 { grid-column: auto / span 6; }
  .span-7 { grid-column: auto / span 7; }  .span-8 { grid-column: auto / span 8; }
  .span-9 { grid-column: auto / span 9; }  .span-10 { grid-column: auto / span 10; }
  .span-11 { grid-column: auto / span 11; } .span-12 { grid-column: 1 / -1; }
  .da-1 { grid-column-start: 1; }  .da-2 { grid-column-start: 2; }  .da-3 { grid-column-start: 3; }
  .da-4 { grid-column-start: 4; }  .da-5 { grid-column-start: 5; }  .da-6 { grid-column-start: 6; }
  .da-7 { grid-column-start: 7; }  .da-8 { grid-column-start: 8; }  .da-9 { grid-column-start: 9; }
  .da-10 { grid-column-start: 10; } .da-11 { grid-column-start: 11; } .da-12 { grid-column-start: 12; }
}
.sezione {
  position: relative;
  isolation: isolate;
  padding-block: var(--ritmo);
}
.sezione--piena { min-height: 100svh; }

/* ---------------------------------------------------------------- grana ----------------- */
.grana {
  position: fixed;
  inset: 0;
  z-index: var(--z-grana);
  pointer-events: none;
  overflow: hidden;
  opacity: .16;
  mix-blend-mode: plus-lighter;
}
.grana::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: url("../img/grana.webp") repeat;
  background-size: 128px 128px;
  animation: mm-grana .8s steps(1) infinite;
}
@keyframes mm-grana {
  0% { transform: translate(0, 0); }
  12.5% { transform: translate(-7%, 4%); }
  25% { transform: translate(5%, -9%); }
  37.5% { transform: translate(-13%, -3%); }
  50% { transform: translate(9%, 11%); }
  62.5% { transform: translate(-4%, -12%); }
  75% { transform: translate(14%, 2%); }
  87.5% { transform: translate(-9%, 8%); }
}

/* ---------------------------------------------------------------- bagliori -------------- */
.bagliori {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  /* sfumano in alto e in basso: niente taglio netto dove finisce la sezione */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 82%, transparent);
}
.bagliori i {
  position: absolute;
  width: 78vmax; height: 78vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(65, 37, 108, .62), rgba(65, 37, 108, .22) 55%, rgba(65, 37, 108, 0));
  animation: mm-respira 16s ease-in-out infinite alternate;
  will-change: transform;
}
.bagliori i:nth-child(1) { left: -30vmax; top: -34vmax; }
.bagliori i:nth-child(2) {
  right: -36vmax; top: 18%;
  width: 64vmax; height: 64vmax;
  background: radial-gradient(closest-side, rgba(105, 49, 170, .36), rgba(105, 49, 170, .1) 60%, rgba(105, 49, 170, 0));
  animation-duration: 19s; animation-delay: -7s;
}
.bagliori i:nth-child(3) {
  left: 18%; bottom: -46vmax;
  background: radial-gradient(closest-side, rgba(35, 20, 61, .95), rgba(35, 20, 61, .4) 55%, rgba(35, 20, 61, 0));
  animation-duration: 13s; animation-delay: -3s;
}
.bagliori--alto i:nth-child(3) { bottom: auto; top: -50vmax; }
.bagliori--basso i:nth-child(1) { top: auto; bottom: -40vmax; }
.bagliori--destra i:nth-child(1) { left: auto; right: -30vmax; }
.bagliori--sinistra i:nth-child(2) { right: auto; left: -36vmax; }
@keyframes mm-respira {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6%, -5%, 0) scale(1.16); }
}

/* ---------------------------------------------------------------- foto ------------------ */
.foto {
  display: block;
  position: relative;
  background-color: var(--nero-2);
  background-size: cover;
  background-position: var(--focus, 50% 50%);
}
.foto img { width: 100%; height: auto; }
.foto--copri, .foto--copri img { width: 100%; height: 100%; }
.foto--copri img { object-fit: cover; object-position: var(--focus, 50% 50%); }
/* le foto hanno neri leggermente verdi: i bordi si sciolgono sempre nel nero */
.foto--sfuma-bordi { -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 45%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 45%, #000 52%, transparent 100%); }
.foto--sfuma-basso { -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent); mask-image: linear-gradient(to bottom, #000 50%, transparent); }
.foto--sfuma-alto { -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent); }
.foto--sfuma-lati { -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); }
.foto--sfuma-tutto {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 70%, transparent), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 70%, transparent), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}
/* ritratto scontornato su fondo scuro: luce di contorno viola */
.ritratto-luce { filter: drop-shadow(0 0 1px rgba(169, 139, 255, .55)) drop-shadow(0 0 28px rgba(105, 49, 170, .55)); }

/* ---------------------------------------------------------------- movimento ridotto ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .grana::before { animation: none; }
  .bagliori i { animation: none; }
}
html.ridotto .grana::before, html.ridotto .bagliori i { animation: none; }