/* ============================================================
   CREATORS — due volti a particelle GPGPU (core particle-face.js, intatto).
   Layout: i DUE canvas .face coprono l'INTERA sezione e sono sovrapposti;
   l'inquadratura di ciascun busto nel suo rettangolo è fatta SOLO via camera
   (creators.js → fitSilhouette). Nessun box/sfondo: i busti galleggiano sul
   verde. Lo scroll/pin della sezione è INVARIATO (runway + sticky).
   Tokens/reset da hero.css.
   ============================================================ */
  body {
    background: var(--bg-green);
    color: var(--cream);
    font-family: var(--font-display);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* PIN invariato: runway 200vh + sticky 100vh = "doppio scroll" (non toccare). */
  .creators-scroll { position: relative; height: 200vh; }
  .creators {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  /* ---------- I due canvas, a tutta sezione, sovrapposti ---------- */
  /* Il canvas è pointer-events:none: click via hit-rect, hover forwardato dalla
     sezione (creators.js). Trasparente (renderer clear alpha = 0). */
  .face {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 1;
  }
  .face.is-active { z-index: 2; }         /* il volto aperto sta sopra l'altro */
  .face canvas { display: block; width: 100%; height: 100%; pointer-events: none; }

  /* ---------- Hit-target invisibili (§9.1) ---------- */
  /* Rettangoli invisibili sovrapposti alle silhouette; posizionati da JS.
     Nessuna affordance di click: cursore standard, nessuno sfondo/bordo. */
  .creator-hit {
    position: absolute;
    z-index: 5;
    margin: 0; padding: 0;
    background: none; border: 0;
    cursor: default;                       /* §9: niente cursor:pointer */
    -webkit-tap-highlight-color: transparent;
  }
  .creator-hit:focus { outline: none; }
  .creator-hit:focus-visible {             /* solo tastiera: accessibilità */
    outline: 2px solid var(--red);
    outline-offset: -2px;
  }

  /* ---------- Blocchi descrizione (§7) ---------- */
  /* Compaiono solo a ricomposizione conclusa (classe .in aggiunta da JS).
     Font-size misurati in headless per combaciare (≤2px) con le larghezze SVG. */
  .creator-text {
    /* Misurati in headless su Futura PT reale → larghezze entro ≤2px dalle w §7. */
    --cr-fs1: 30px;                        /* riga 1 (nome), Bold */
    --cr-fs2: 28px;                        /* riga 2 (enfasi), Bold + stroke */
    --cr-fs3: 29px;                        /* righe 3–4, Medium */
    --cr-step: 38px;                       /* passo tra le righe a 1440 (§7) */
    position: absolute;
    top: 37.4vh;                           /* 383/1024 */
    z-index: 6;
    pointer-events: none;
    letter-spacing: var(--tracking);
    color: var(--cream);
    line-height: var(--cr-step);
  }
  .creator-text.left  { right: 13.7%; text-align: right; }  /* bordo dx a x=1243 */
  .creator-text.right { left: 23.3%; text-align: left;  }   /* bordo sx a x=336 */

  .creator-text .ln {
    display: block;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(16px);
    will-change: opacity, transform;
  }
  .creator-text.in .ln { opacity: 1; transform: none; }

  .creator-text .l1 { font-weight: 700; font-size: var(--cr-fs1); }
  .creator-text .l2 {
    font-weight: 500; font-size: var(--cr-fs2);   /* Medium (non Bold) + stroke rosso 3pt */
    -webkit-text-stroke: 3px var(--red);  /* stroke "outside" 3pt (path-*-outside-*) */
    paint-order: stroke fill;
  }
  .creator-text .l3 { font-weight: 500; font-size: var(--cr-fs3); }
  .creator-text .l4 { font-weight: 500; font-size: var(--cr-fs3); }
  .creator-text .red { color: var(--red); }

  /* ---------- Testo vista PRINCIPALE (solo tagline centrale, da SVG) ---------- */
  /* Centrato; sparisce in dissolvenza quando si apre un dettaglio.
     Tagline: Futura Medium piccola, cream con MERGING/EYE in rosso, senza stroke.
     (I nomi NICCOLÒ/GIOVANNI sono stati rimossi dall'SVG aggiornato.) */
  .creators-main {
    position: absolute; inset: 0; z-index: 6; pointer-events: none;
    color: var(--cream); font-family: var(--font-display);
    transition: opacity .3s ease;
  }
  .creators.detail .creators-main { opacity: 0; }   /* nascosto in dettaglio */
  /* Posizione ricavata dall'SVG 16:9 (1920×1080): centrata in x (cx=960=50%),
     y del CENTRO del blocco come frazione dell'altezza: tagline centro y472 → 43.7vh. */
  .creators-main > * {
    position: absolute; left: 50%; transform: translate(-50%, -50%);
    white-space: nowrap; text-align: center; letter-spacing: var(--tracking);
  }
  .creators-main .cm-tagline { top: 43.7vh; font-weight: 500; font-size: 13px; line-height: 1.3; }
  .creators-main .cm-tagline .ln { display: block; }
  .creators-main .red { color: var(--red); }
  /* su schermi piccoli/portrait il layout cambia: per ora nascondo il testo
     principale (da rivedere insieme, come i tier §12). */
  @media (max-width: 1023px), (orientation: portrait) { .creators-main { display: none; } }

  /* ---------- Tier NARROW (<1024 o portrait, §12) ---------- */
  /* Busti più bassi (34vh base / 60vh dettaglio, gestito in JS via tier()).
     Il testo va SOPRA il busto, piena larghezza meno margini, allineato al lato
     esterno del personaggio. (Da rivedere insieme — non è nel Figma.) */
  /* Tier NARROW: il testo va SOPRA il busto (che è alto 60vh, ancorato in basso →
     il suo bordo alto sta intorno a ~40vh), a piena larghezza meno i 20px di
     margine, allineato al lato ESTERNO del personaggio (niccolo=sx, giovanni=dx). */
  @media (max-width: 1023px), (orientation: portrait) {
    .creator-text {
      --cr-fs1: 22px; --cr-fs2: 21px; --cr-fs3: 20px; --cr-step: 28px;
      top: 6vh;
    }
    .creator-text.left  { left: 20px;  right: 20px; text-align: left;  }
    .creator-text.right { left: 20px;  right: 20px; text-align: right; }
    .creator-text .ln { white-space: normal; }
  }

  /* ---------- Tier MINI (<600px, §12): niente WebGL ---------- */
  /* Solo nomi + descrizioni IMPILATI sul verde. I canvas non vengono nemmeno
     istanziati (creators.js esce prima) e il pin/doppio-scroll viene rimosso:
     su telefono la sezione è a flusso normale, non pinnata. */
  @media (max-width: 599px) {
    .creators-scroll { height: auto; }
    .creators.no-webgl { position: relative; height: auto; min-height: 100vh; overflow: visible; }
  }
  .creators.no-webgl {
    display: flex; flex-direction: column; justify-content: center;
    gap: 10vh; padding: 12vh 24px;
  }
  .creators.no-webgl .face,
  .creators.no-webgl .creator-hit { display: none; }
  .creators.no-webgl .creator-text {
    position: static;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
    left: auto; right: auto;
    text-align: left;
    --cr-fs1: 26px; --cr-fs2: 24px; --cr-fs3: 19px; --cr-step: 32px;
  }
  .creators.no-webgl .creator-text.left,
  .creators.no-webgl .creator-text.right { text-align: left; }
  .creators.no-webgl .creator-text .ln { opacity: 1; transform: none; white-space: normal; line-height: 1.35; }
  /* le prime due righe (nome + ruolo) più staccate dalle righe di dettaglio */
  .creators.no-webgl .creator-text .l3 { margin-top: 10px; }

  /* prefers-reduced-motion: nessuna traslazione del testo (§14) */
  @media (prefers-reduced-motion: reduce) {
    .creator-text .ln { transform: none; }
  }