/* Infinity 2000 · v3 "mainstage"
 * ---------------------------------------------------------------------------
 * La v2 usava tre colori del marchio su fondo scuro. Questa versione ne usa
 * cinque: ai tre del logo (magenta, viola, giallo) si aggiungono il ciano e il
 * verde acido, che non sono inventati ma campionati dai fari nelle loro foto.
 * Sono i colori che la gente vede davvero quando è sotto quel palco, e servono
 * a far sembrare la pagina illuminata dallo stesso impianto.
 *
 * Il fondo non è nero puro: è nero tinto di magenta. Un nero a chroma zero
 * spegne il neon che ci sta sopra e fa sembrare tutto una presentazione.
 */

:root {
  /* ---- superfici ----------------------------------------------------- */
  --paper:        oklch(8% 0.022 340);
  --paper-2:      oklch(12% 0.028 338);
  --paper-3:      oklch(17% 0.032 336);
  --paper-tech:   oklch(14% 0.030 262);   /* il blu notte, per la parte tecnica */
  --paper-deep:   oklch(5% 0.016 340);

  /* ---- inchiostri ---------------------------------------------------- */
  --ink:          oklch(97% 0.008 340);
  --ink-2:        oklch(88% 0.012 340);
  --muted:        oklch(70% 0.018 340);
  --faint:        oklch(63% 0.016 340);   /* a 56% il contrasto restava sotto 4,5:1 */

  /* ---- linee --------------------------------------------------------- */
  --rule:         oklch(34% 0.030 340);
  --rule-2:       oklch(22% 0.020 340);

  /* ---- i colori del palco -------------------------------------------- */
  --magenta:      oklch(64% 0.235 347);
  --magenta-hot:  oklch(70% 0.250 346);
  --viola:        oklch(66% 0.250 328);
  --giallo:       oklch(90% 0.180 103);
  --ciano:        oklch(82% 0.155 205);   /* i fari nelle foto di San Valentino */
  --verde:        oklch(86% 0.210 145);   /* i fari di Badia, da usare pochissimo */

  --on-magenta:   oklch(12% 0.030 340);
  --on-giallo:    oklch(12% 0.030 340);
  --focus:        oklch(90% 0.180 103);

  /* ---- neon ----------------------------------------------------------
     Tre strati: il filamento, l'alone stretto, la diffusione nell'aria.    */
  --glow-magenta:
    0 0 0.05em oklch(72% 0.250 346 / 0.95),
    0 0 0.45em oklch(64% 0.235 347 / 0.6),
    0 0 1.5em  oklch(64% 0.235 347 / 0.3);
  --glow-giallo:
    0 0 0.04em oklch(95% 0.150 103 / 0.9),
    0 0 0.4em  oklch(90% 0.180 103 / 0.55),
    0 0 1.4em  oklch(90% 0.180 103 / 0.26);
  --glow-ciano:
    0 0 0.04em oklch(90% 0.120 205 / 0.9),
    0 0 0.45em oklch(82% 0.155 205 / 0.5),
    0 0 1.5em  oklch(82% 0.155 205 / 0.24);

  /* ---- l'estrusione del marchio --------------------------------------
     Nel logo la parola INFINITY è bianca, spostata sopra una copia magenta e
     una gialla. Questa variabile ricostruisce lo stesso scalino sui titoli
     della pagina, così i titoli appartengono al marchio invece di somigliargli. */
  --extrude:
     0.035em 0.035em 0 var(--magenta),
     0.07em  0.07em  0 var(--giallo);
  --extrude-sm:
     0.025em 0.025em 0 var(--magenta),
     0.05em  0.05em  0 var(--giallo);

  /* ---- tipografia ---------------------------------------------------- */
  --display: "Gagalin", "Arial Black", "Helvetica Neue", sans-serif;
  --body:    "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   clamp(1.125rem, 0.5vw + 1.02rem, 1.375rem);
  --text-xl:   clamp(1.35rem, 1.2vw + 1.05rem, 1.9rem);
  --text-2xl:  clamp(1.8rem, 2.6vw + 1.1rem, 2.9rem);
  --text-3xl:  clamp(2.3rem, 5vw + 1rem, 4.6rem);
  --text-4xl:  clamp(3rem, 9vw + 0.6rem, 7.5rem);
  --text-mega: clamp(3.4rem, 14vw, 12rem);

  --lead-tight: 0.95;
  --lead-snug:  1.28;
  --lead-body:  1.62;
  --measure:    58ch;

  /* ---- spazio -------------------------------------------------------- */
  --s-2xs: 0.25rem;
  --s-xs:  0.5rem;
  --s-sm:  0.75rem;
  --s-md:  1rem;
  --s-lg:  1.5rem;
  --s-xl:  2.5rem;
  --s-2xl: 3.5rem;
  --s-3xl: 5rem;
  --s-4xl: 7rem;
  --s-5xl: 10rem;

  /* il margine laterale della colonna di testo: serve a far sbordare le foto
     fino al bordo dello schermo tenendo il testo allineato al resto */
  --gutter: clamp(1.5rem, (100vw - 1180px) / 2, 9rem);

  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --pill: 999px;

  /* ---- movimento -----------------------------------------------------
     Tutto quello che pulsa nella pagina è agganciato a --beat, che è la
     durata di una battuta a 128 bpm (60/128 = 0,469 s), il tempo tipico di
     una dance dei primi 2000. Non è un vezzo: pulsazioni scelte a caso vanno
     ognuna per conto suo e sembrano un errore, mentre così l'intera pagina
     respira insieme e chi guarda sente un tempo anche senza audio.          */
  --beat:  0.469s;
  --beat2: 0.938s;
  --beat4: 1.875s;
  --beat8: 3.75s;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-mid:  320ms;
  --dur-slow: 700ms;

  --z-bg: 0;
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 200;
}