/* ============================================================================
   AdsWaves · REDLINE · tokens.css
   "One Light, One Wave" · UNICA FONTE DI VERITÀ · non forkare.
   Consumato da: sito web (tutte le pagine) + (via tokens.json) social kit.
   Regola: ogni superficie eredita da qui. Nessun colore/curva/spazio hard-coded altrove.
   ========================================================================== */

:root {
  /* ---- COLORE · substrato grafite / bianco-caldo ---------------------- */
  --bg:           #ffffff;   /* base pagina (chiara) */
  --bg-warm:      #faf8f4;   /* bianco-caldo, sezioni alternate */
  --bg-2:         #f4f2ee;   /* riempimenti tenui, card neutre */
  --panel:        #ffffff;
  --line:         #eae6df;   /* hairline "drafting-table" */
  --line-strong:  #ddd8cf;

  --ink:          #18181b;   /* testo principale */
  --ink-soft:     #44444b;   /* sottotitoli */
  --ink-mut:      #686871;   /* meta, mono labels (AA su tint #f4f2ee) */

  /* "stanza strumento" · riservata a hero/overlay */
  --graphite:     #15151a;
  --graphite-2:   #1e1e25;
  --graphite-line:#2c2c35;
  --on-graphite:  #f5f4f2;
  --on-graphite-mut:#a6a3ad;

  /* IL ROSSO È UN BISTURI · solo CTA, metriche, stati attivi, wave, mesh. */
  --red:          #dc2626;   /* === brand. Allineato a logo-redline.svg === */
  --red-dark:     #b91c1c;
  --red-bright:   #ef4444;
  --ember:        #fb7185;   /* unico tint per profondità gradienti/mesh */

  /* mesh hero (stop derivati dal rosso brand) + glow CTA · tokenizzati */
  --mesh-core: rgba(239, 68, 68, 0.55);
  --mesh-mid:  rgba(251, 113, 133, 0.20);
  --mesh-far:  rgba(220, 38, 38, 0.22);
  --glow-red:        0 6px 18px rgba(220, 38, 38, 0.28);
  --glow-red-strong: 0 10px 24px rgba(220, 38, 38, 0.34);
  --header-bg: rgba(255, 255, 255, 0.82);

  /* ACCENTI PASTELLO · SOCIAL-ONLY. ❌ Non usare sul sito web.
     Rotazione chiusa per la griglia IG: amber→emerald→sky→violet→rose. */
  --x-amber:   #f59e0b;  --x-amber-soft:  #fef3c7;
  --x-emerald: #10b981;  --x-emerald-soft:#d1fae5;
  --x-sky:     #0ea5e9;  --x-sky-soft:    #e0f2fe;
  --x-violet:  #8b5cf6;  --x-violet-soft: #ede9fe;
  --x-rose:    #f43f5e;  --x-rose-soft:   #ffe4e6;

  /* ---- TIPOGRAFIA · 4 registri, ognuno con un mestiere ---------------- */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif; /* la voce */
  --font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;      /* workhorse SEO */
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;     /* registro "engineered" */
  --font-serif:   Georgia, "Times New Roman", serif;                                    /* voce umana, scoped · webfont rimosso finché non usato */

  /* scala tipografica fluida */
  --fs-mono:    0.78rem;
  --fs-eyebrow: 0.80rem;
  --fs-small:   0.88rem;
  --fs-body:    1.0rem;
  --fs-lead:    clamp(1.06rem, 0.98rem + 0.4vw, 1.22rem);
  --fs-h4:      1.12rem;
  --fs-h3:      clamp(1.2rem,  1.05rem + 0.7vw, 1.5rem);
  --fs-h2:      clamp(1.7rem,  1.3rem  + 1.9vw, 2.7rem);
  --fs-h1:      clamp(2.5rem,  1.6rem  + 4.4vw, 4.6rem);
  --fs-display: clamp(3.0rem,  1.7rem  + 6.0vw, 6.0rem);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.6;
  --tracking-mono: 0.08em;

  /* ---- SPAZIATURA ----------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* ---- RADII ---------------------------------------------------------- */
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --r-btn: 13px; /* pulsanti: solidi, non pill ("meno 2020") */

  /* ---- LAYOUT --------------------------------------------------------- */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ---- ELEVAZIONE · UNA luce (alto, leggermente a sinistra). Mai nero puro,
         tinta calda rosso-grafite. ----------------------------------------*/
  --e0: 0 1px 2px rgba(40, 28, 28, 0.04);
  --e1: 0 2px 6px rgba(40, 28, 28, 0.05), 0 1px 2px rgba(40, 28, 28, 0.04);
  --e2: 0 10px 24px rgba(40, 28, 28, 0.07), 0 3px 8px rgba(40, 28, 28, 0.05);
  --e3: 0 22px 48px rgba(40, 28, 28, 0.10), 0 8px 18px rgba(40, 28, 28, 0.06);

  /* ---- MOTION · token bloccati (web + reel). 'linear'/'ease' VIETATI. -- */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
  --dur-reveal:  640ms;
  --drift:       24s;

  --ease-out-soft:  cubic-bezier(.22, 1, .36, 1);   /* settle/hover · workhorse */
  --ease-out-quint: cubic-bezier(.16, 1, .30, 1);   /* entrate hero/sezioni */
  --ease-in-out:    cubic-bezier(.65, 0, .35, 1);    /* toggle/overlay/loop */
  --ease-spring:    cubic-bezier(.34, 1.56, .64, 1); /* SOLO CTA magnetica */

  /* ---- Z-INDEX -------------------------------------------------------- */
  --z-nav: 100; --z-overlay: 200; --z-palette: 300; --z-skip: 400;
}

/* ============================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--ink);
}
h2 { line-height: var(--lh-snug); }
h3, h4 { font-weight: 700; line-height: var(--lh-snug); }

p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ---- Focus visibile (rosso = stato) -------------------------------------- */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Skip link ----------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: var(--s2);
  z-index: var(--z-skip);
  background: var(--ink);
  color: #fff;
  padding: var(--s2) var(--s4);
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: var(--r-sm);
}
.skip:focus { left: var(--s4); }

/* ---- Screen-reader only -------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================================
   PRIMITIVE RIUSABILI
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* hairline "drafting" */
.hairline { height: 1px; background: var(--line); border: 0; }

/* index-line mono · il device più riconoscibile a feed-scale */
.index-line {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-mut);
}
.index-line .rule { flex: 1 1 auto; height: 1px; background: var(--line); }
.index-line .red { color: var(--red); }

/* eyebrow / overline */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-mut);
}
.eyebrow .pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); flex: 0 0 auto;
}

/* mono label utility */
.mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }

/* ---- BOTTONI ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  padding: 14px 22px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft),
              background var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft);
}
.btn .arrow { transition: transform var(--dur-base) var(--ease-spring); }

.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: var(--e2), var(--glow-red);
}
.btn--primary:hover {
  background: var(--red-dark);
  box-shadow: var(--e3), var(--glow-red-strong);
}
.btn--primary:hover .arrow { transform: translateX(3px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn--ghost:hover .arrow { transform: translateX(3px); }

/* su grafite */
.on-graphite .btn--ghost { color: var(--on-graphite); border-color: var(--graphite-line); }
.on-graphite .btn--ghost:hover { border-color: var(--on-graphite); }

/* ---- REVEAL (ping/stagger) ---------------------------------------------- */
/* Floor: SENZA JS il contenuto è pienamente visibile (bot/AT non restano a opacity:0).
   La classe .js viene impostata da script all'avvio; solo allora nascondiamo. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out-quint),
              transform var(--dur-reveal) var(--ease-out-quint);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ============================================================================
   REDUCED MOTION · first-class kill-switch
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}