/* ==========================================================================
   stella.css: PROVA 5, la stella di strass e il nome
   All'inizio si vede solo la stella; scorrendo entrano il nome, il ruolo e
   il menu. Senza JavaScript (o con "riduci movimento") si vede subito la
   composizione finale.
   ========================================================================== */

/* In questa prova la pagina scorre: lo scroll muove l'animazione (GSAP) */
.js body { overflow-x: hidden; overflow-y: auto; }
html { overflow-x: hidden; }
.palco { overflow: hidden; }

/* La stella (canvas WebGL trasparente) sta sopra il nome, come nel mock;
   non intercetta i clic, così il menu e i link restano cliccabili */
.js .palco__scena { z-index: 2; pointer-events: none; }
.azioni, .menu { z-index: 3; }

/* Il nome: due righe enormi in Anton, bianche, allineate a sinistra */
.nome {
  position: absolute; z-index: 1;
  left: var(--margine); right: var(--margine);
  top: calc(var(--margine) + 3.5rem);
  margin: 0;
  font-family: "Anton", Impact, sans-serif; font-weight: 400;
  font-size: min(21vw, 37svh);
  line-height: 0.9; letter-spacing: 0;
  text-transform: uppercase;
  color: var(--colore-nome);
}
.nome__riga { display: block; }

/* In alto a destra: Scarica il CV, Scarica il portfolio, il cambio di tema */
.azioni {
  position: absolute; top: var(--margine); right: var(--margine);
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline;
  gap: 0.25rem 1.5rem;
  font-size: 0.8125rem; font-weight: 500;
}
.azioni { align-items: center; }
.azioni a { padding-block: 0.6rem; margin-block: -0.6rem; }

/* Il cambio di tema: solo il simbolo e un bordo spesso ("chunky"), niente fondo dentro.
   Bianco nel tema scuro, bordeaux nel tema chiaro. */
.tema {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 3.6rem; height: 2.4rem; padding: 0;
  border: 3px solid var(--colore-tema); border-radius: 999px;
  background: transparent; color: var(--colore-tema);
  cursor: pointer;
  transition: transform 160ms var(--ease), color 400ms ease, border-color 400ms ease;
}
.tema:hover { transform: scale(1.06); }
.tema:active { transform: scale(0.94); }
.tema svg { width: 1.25rem; height: 1.25rem; grid-area: 1 / 1; transition: opacity 250ms ease, transform 400ms var(--ease); }
.tema__luna { fill: currentColor; }
.tema__sole { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; opacity: 0; transform: rotate(-90deg) scale(0.6); }
.tema__sole circle { fill: currentColor; stroke: none; }
[data-tema="chiaro"] .tema__luna { opacity: 0; transform: rotate(90deg) scale(0.6); }
[data-tema="chiaro"] .tema__sole { opacity: 1; transform: none; }

/* Le stelline dello scoppio: piccole costellazioni di Matilde che volano via dal pulsante.
   La forma arriva da --forma (una delle stelle essenziali, scelta a caso da tema.js) */
.stellina {
  position: fixed; z-index: 50; left: 0; top: 0;
  width: 16px; height: 16px;
  background: var(--stella-pieno);
  -webkit-mask: var(--forma, url("../assets/img/stelle/singole/essenziale-02.svg")) center / contain no-repeat;
          mask: var(--forma, url("../assets/img/stelle/singole/essenziale-02.svg")) center / contain no-repeat;
  pointer-events: none;
}

/* Il disegno di stelle che si forma prima del pop dei pannelli (js/pannelli.js):
   Saturno, il Capricorno o la Luna. Linee sottili e stelle delle costellazioni */
.firmamento { position: fixed; inset: 0; z-index: 42; pointer-events: none; --velo: color-mix(in srgb, var(--fondo) 78%, transparent); }
.firmamento svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.firmamento path { fill: none; stroke: var(--stella-pieno); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* la sfera di cristallo è ingrandita di --k: il tratto si divide per --k, così sullo schermo è spesso come gli altri */
.firmamento .scalato path { stroke-width: calc(2.5px / var(--k)); }
.firmamento .scalato path.sottile { stroke-width: calc(1.5px / var(--k)); }   /* il riflesso, la nebbia, le stelline */
.firmamento .scalato path.spesso { stroke-width: calc(7px / var(--k)); }      /* i bordi esterni della falena, come nel tatuaggio */
.firmamento .scalato path.punto { stroke-width: calc(3px / var(--k)); }       /* la scia di puntini pieni */
.firmamento .scalato path.pieno-corpo { fill: var(--stella-pieno); }            /* il corpo della falena, pieno */
.firmamento__stella {
  position: absolute; transform: translate(-50%, -50%);
  background: var(--stella-pieno);
  -webkit-mask: var(--forma) center / contain no-repeat;
          mask: var(--forma) center / contain no-repeat;
}

/* Il menu: voci un po' più grandi */
.menu a { font-size: 1.0625rem; }
@media (max-width: 40rem) { .menu a { font-size: 1rem; } }

/* Il menu: le voci dei progetti, al passaggio, prendono il colore del progetto */
.menu a[style*="--sopra"]:hover,
.menu a[style*="--sopra"]:focus-visible { color: var(--sopra); }
[data-tema="chiaro"] .menu a[style*="--sopra"]:hover,
[data-tema="chiaro"] .menu a[style*="--sopra"]:focus-visible { color: var(--c1); }

/* ---------- I due temi ----------
   Scuro (di base): fondo quasi nero violaceo, testi avorio, accento lilla.
   Chiaro: fondo avorio, testi quasi neri, accento viola.
   I colori sono tutti in fondo al file, nel blocco PALETTE. */
html, body { transition: background-color 400ms ease, color 400ms ease; }
.nome { transition: color 400ms ease; }
/* nel tema chiaro il nome è viola pieno (nel tema scuro resta avorio) */
[data-tema="chiaro"] .nome__riga { color: var(--palette-viola); }
/* nel tema chiaro l'alone scuro dietro le scritte non serve */
[data-tema="chiaro"] .menu a,
[data-tema="chiaro"] .palco__etichetta { text-shadow: none; }
/* i titoli dei pannelli: i colori chiari pensati per il nero non si leggono sul bianco,
   quindi nel tema chiaro il nome del progetto prende la sua tinta piena */
[data-tema="chiaro"] .pannello__nome { color: var(--c1); }
[data-tema="chiaro"] .pannello::before {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c1) 25%, var(--pannello)) 0%, var(--pannello) 75%);
}
/* il riflesso a stella del bling: prende l'accento del tema */
.bling { background: var(--bling); }

/* La stella di riserva: solo se WebGL o Three.js non partono, nella posizione finale */
.stella-riserva { display: none; }
.js.senza-webgl .stella-riserva {
  display: block; position: absolute; z-index: 2;
  width: min(40svh, 34vw); height: auto;
  left: 66%; top: 70%; transform: translate(-50%, -50%);
}

/* L'invito a scorrere, in fondo al centro */
.scorri {
  position: absolute; z-index: 3; left: 50%; bottom: var(--margine);
  transform: translateX(-50%);
  font-size: var(--t-piccolo); font-weight: 500; color: var(--tenue);
}
.statica .scorri, .senza-webgl .scorri, html:not(.js) .scorri { display: none; }

/* Prima che GSAP parta, nome, ruolo e menu sono nascosti (li fa entrare lo scroll).
   Solo se c'è JavaScript e non siamo in versione statica: altrimenti restano visibili. */
.js:not(.statica):not(.senza-webgl) .nome__riga { visibility: hidden; }
.js:not(.statica):not(.senza-webgl) [data-entra] { opacity: 0; }   /* solo opacità: si può ancora arrivarci con il tab */

/* Telefono: nome più piccolo; la stella c'è solo al caricamento */
@media (max-width: 40rem) {
  .statica .palco__scena, .js.senza-webgl .stella-riserva { display: none !important; }
  .nome { font-size: 25vw; top: calc(var(--margine) + 4.5rem); }
  .azioni { left: var(--margine); right: var(--margine); justify-content: space-between; gap: 0.25rem 1rem; }
  .js.senza-webgl .stella-riserva { left: 50%; top: 72%; width: 70vw; }
}

/* ---------- Chi sono: il ritratto a tutta scheda ----------
   Esce dai margini del pannello e arriva ai suoi bordi (i margini negativi sono
   uguali al respiro interno del pannello). È tagliato a metà del bicipite. */
.ritratto {
  grid-column: 1 / -1; grid-row: 1;
  align-self: start;                   /* senza questo la griglia lo stira e il taglio non vale */
  position: relative; margin: 0;
  margin-inline: calc(-1 * clamp(1.25rem, 4vw, 4rem));
  margin-top: calc(-1 * clamp(1.25rem, 4vw, 4rem));
  /* il taglio, dall’alto fino a metà del braccio: 820 px su 1600 di larghezza.
     L’altezza è scritta in vw (larghezza del pannello × 820/1600) perché dentro la griglia
     aspect-ratio con i margini negativi non viene calcolato bene */
  height: calc((100vw - 2 * var(--ritaglio, 0px)) * 0.5125);
  overflow: hidden;
  container-type: inline-size;         /* la scritta si misura sulla larghezza del ritratto */
}
.ritratto__foto, .ritratto__scontorno {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%;   /* identici per tutte e due: combaciano */
  border-radius: 0; background: none;
}
.ritratto__scritta {
  position: absolute; left: 3cqw; right: 3cqw; top: 12cqw;
  font-family: "Anton", Impact, sans-serif; font-weight: 400;
  font-size: 12.2cqw; line-height: 0.9; letter-spacing: 0;
  text-transform: uppercase; white-space: nowrap; text-align: center;
}
.ritratto__scontorno { z-index: 1; }
.pannello__testo--sotto { grid-row: 2; }
@media (max-width: 52rem) {
  /* sul telefono: il pannello ha più spazio sopra (per Chiudi). La foto è ingrandita
     (larga 1,65 volte il riquadro) così Matilde si vede bene, ed è tagliata come sul
     computer, a metà del bicipite (il 77% dell'altezza della foto): sotto si vede il testo.
     Altezza del riquadro = 1,65 × (2/3 per la foto 3:2) × 0,77 = 0,846 della larghezza.
     Il centro è il viso: gli occhi stanno al 57% della larghezza della foto; spostando la
     foto a sinistra del 44% del riquadro, gli occhi cadono proprio a metà. */
  .ritratto { margin-top: -4.75rem; height: calc((100vw - 2 * var(--ritaglio, 0px)) * 0.846); }
  .ritratto__foto, .ritratto__scontorno {
    inset: auto; top: 0; left: -44%;
    width: 165%; height: auto; max-width: none;
    object-fit: fill;
  }
  .ritratto__scritta { top: 26cqw; font-size: 12cqw; }
}


/* ---------- Il ruolo, sopra il nome ---------- */
.ruolo {
  position: absolute; z-index: 3; top: var(--margine); left: var(--margine);
  margin: 0; font-size: 1rem; font-weight: 500; color: var(--chiaro);
}

/* ---------- Il menu: titoletto, "Progetto Nome · tipo" ---------- */
.menu__titoletto {
  font-size: 0.8125rem; font-weight: 500; color: var(--tenue);
  padding-bottom: 0.2rem;
}
.menu__stacco { height: 0.9rem; }
.menu__tipo { margin-left: 0.3em; color: var(--tenue); font-weight: 400; transition: color 200ms ease; }   /* il margine: nel flex lo spazio iniziale sparisce */
.menu a:hover .menu__tipo, .menu a:focus-visible .menu__tipo { color: inherit; }

/* ---------- Pannelli: titoli in Anton, risultato in evidenza ---------- */
.pannello__titolo {
  font-family: "Anton", Impact, sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0; line-height: 0.95;
}
.scheda__risultato dd { font-weight: 700; font-size: var(--t-frase); line-height: 1.3; color: var(--chiaro); }
.scheda__risultato dt { color: var(--colore-nome); }


/* ---------- Telefono ---------- */
@media (max-width: 40rem) {
  .ruolo { top: calc(var(--margine) + 3rem); font-size: 0.9375rem; }
  .nome { top: calc(var(--margine) + 5.5rem); }

  /* pannelli: titolo, poi la prima immagine, poi la scheda e il resto delle immagini */
  .pannello__testo:not(.pannello__testo--largo), .pannello__immagini { display: contents; }
  .pannello__testo:not(.pannello__testo--largo) > *, .pannello__immagini > * { grid-column: 1 / -1; order: 3; }
  .pannello__titolo { order: 1 !important; }
  .pannello__immagini > :first-child { order: 2 !important; }
  .pannello__immagini > :not(:first-child) { order: 4 !important; }
  .pannello__dopo { order: 5; }
  .pannello:has(.pannello__immagini) { row-gap: 1.25rem; }
}

/* "Scorri": bianco nel tema scuro, bordeaux nel tema chiaro (lo stesso colore del pulsante del tema) */
.scorri { color: var(--colore-tema); font-weight: 700; }


/* ---------- Il menu: tre voci ---------- */
.menu a { font-size: 1.0625rem; }
@media (max-width: 40rem) {
  .menu ul { display: flex; justify-content: flex-start; gap: 0 1.5rem; }
  .menu a { font-size: 1.125rem; min-height: 2.75rem; }
}

/* ---------- Il pannello Progetti: cinque nomi giganti in Anton ---------- */
.elenco-progetti {
  grid-column: 1 / -1; align-self: center;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
}
.elenco-progetti__voce {
  display: inline-flex; align-items: baseline; gap: 1rem;
  text-decoration: none; color: var(--chiaro);
  transition: color 250ms ease, opacity 250ms ease, transform 350ms var(--ease);
}
.elenco-progetti__nome {
  font-family: "Anton", Impact, sans-serif; font-weight: 400;
  font-size: clamp(3.2rem, 1rem + 8vw, 9rem); line-height: 0.92;
  text-transform: uppercase;
}
.elenco-progetti__tipo { font-size: 1rem; color: var(--tenue); }
/* al passaggio: il nome prende il colore del progetto, gli altri si spengono */
/* solo quando il mouse è proprio su un nome: la lista è larga quanto il pannello, e nel vuoto restano tutti accesi */
.elenco-progetti:has(.elenco-progetti__voce:hover, .elenco-progetti__voce:focus-visible) .elenco-progetti__voce:not(:hover, :focus-visible) { opacity: 0.35; }
.elenco-progetti .elenco-progetti__voce:hover,
.elenco-progetti .elenco-progetti__voce:focus-visible { opacity: 1; color: var(--sopra); transform: translateX(0.6rem); }
[data-tema="chiaro"] .elenco-progetti .elenco-progetti__voce:hover,
[data-tema="chiaro"] .elenco-progetti .elenco-progetti__voce:focus-visible { color: var(--c1); }
.js .pannello--progetti { align-content: center; }

/* i nomi tempestati di strass (js/nomi-strass.js): le pietre stanno in un canvas sopra le lettere;
   sotto, la lettera si scurisce nel colore del progetto, come la colla tra una pietra e l'altra */
.elenco-progetti__nome, .pannello__nome { position: relative; transition: color 250ms ease; }
.nome-strass { position: absolute; pointer-events: none; opacity: 0; transition: opacity 250ms ease; }
.e-strass > .nome-strass { opacity: 1; }
.elenco-progetti .elenco-progetti__nome.e-strass,
.pannello__nome.e-strass,
.titolo-in-volo.e-strass { color: var(--strass); }   /* la lettera dipinta nel colore del progetto, sotto i cristalli */

/* il nome che vola: una copia fissa sopra tutto, mentre il pannello del progetto si apre sotto */
.titolo-in-volo {
  position: fixed; z-index: 45; margin: 0; pointer-events: none;
  font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase;
  transform-origin: 0 0; white-space: nowrap;
}
@media (max-width: 40rem) {
  .elenco-progetti__nome { font-size: 15vw; }
  .elenco-progetti__voce { flex-direction: column; gap: 0; align-items: flex-start; margin-bottom: 0.6rem; }
  .elenco-progetti__tipo { font-size: 0.875rem; }
}

/* i nomi dei progetti sono già nel colore del progetto:
   la versione chiara sul nero, la tinta piena sul giallo burro */
.elenco-progetti__voce { color: var(--sopra); }
[data-tema="chiaro"] .elenco-progetti__voce { color: var(--c1); }

/* Il tasto per tornare alla lista dei progetti: accanto a Chiudi, stessa forma ma solo bordo */
.pannello__indietro { display: none; }
.js .pannello__indietro {
  display: inline-flex; align-items: center; gap: 0.35rem;
  position: fixed; z-index: 3;
  top: calc(var(--ritaglio) + 1rem); right: calc(var(--ritaglio) + 6.6rem);
  min-height: 2.75rem; padding: 0 1.1rem;
  border: 2px solid var(--chiaro); border-radius: 999px;
  color: var(--chiaro); text-decoration: none;
  font-weight: 700; font-size: var(--t-piccolo);
  transition: transform 200ms var(--ease);
}
.pannello__indietro:hover { transform: translateX(-3px); }

/* ==========================================================================
   PALETTE: sei colori, e i token che li usano
   1. --palette-*: i sei colori, scritti una volta sola.
   2. --colore-* e --stella-*: i token "semantici", dicono a cosa servono
      (fondo, testo, accento, stelle). Il tema chiaro cambia solo questi.
   3. --fondo, --chiaro, --viola...: i nomi che il resto del CSS usava già,
      ora collegati ai token (così non serve riscrivere tutto il resto).
   Contrasti verificati (WCAG AA):
   - scuro: testo avorio su quasi nero 14,6:1; lilla (link, accento) 7,3:1;
     testo secondario 7,4:1; quasi nero sui pulsanti lilla 7,3:1.
   - chiaro: testo quasi nero sulla lavanda 15,5:1; viola (link, accento) 5,7:1;
     testo secondario 6,2:1; bianco sui pulsanti viola 6,4:1.
   - il salvia (2,9:1 su avorio) e il lilla nel tema chiaro (2:1) sono solo
     decorativi: stelle, contorni, intrecci. Mai per testo o controlli.
   ========================================================================== */
:root {
  --palette-bianco: #FFFFFF;
  --palette-avorio: #F4F0E7;
  --palette-nero: #201D24;        /* quasi nero violaceo */
  --palette-viola: #705094;       /* il colore identitario */
  --palette-lilla: #B9A2D2;
  --palette-salvia: #7D927D;      /* accento occasionale */
  --palette-lavanda: #F9F6FD;     /* tema chiaro: i pannelli, lavanda latte schiarita (il viola del nome, appena accennato) */
  --palette-lavanda-scura: #E6DDF0; /* tema chiaro: il fondo della pagina, un tono sotto i pannelli */

  /* tema scuro (di base) */
  --colore-fondo: var(--palette-nero);
  --colore-superficie: color-mix(in srgb, var(--palette-viola) 14%, var(--palette-nero));   /* i pannelli: il quasi nero appena velato di viola */
  --colore-testo: var(--palette-avorio);
  --colore-testo-tenue: color-mix(in srgb, var(--palette-avorio) 68%, var(--palette-nero));
  --colore-accento: var(--palette-lilla);           /* sul fondo scuro il viola pieno si perde: l'accento è il lilla */
  --colore-su-accento: var(--palette-nero);         /* il testo sopra l'accento (pulsanti) */
  --colore-separatore: color-mix(in srgb, var(--palette-avorio) 18%, var(--palette-nero));
  /* le costellazioni: pieni, contorni e intrecci */
  --stella-pieno: var(--palette-lilla);
  --stella-contorno: var(--palette-salvia);

  /* i nomi usati nel resto del CSS */
  --fondo: var(--colore-fondo);
  --pannello: var(--colore-superficie);
  --chiaro: var(--colore-testo);
  --tenue: var(--colore-testo-tenue);
  --viola: var(--colore-accento);
  --verde: var(--palette-salvia);
  --separatore: var(--colore-separatore);
  --bottone-fondo: var(--colore-accento);
  --bottone-testo: var(--colore-su-accento);
  --bottone-bordo: var(--colore-accento);
  --colore-nome: var(--colore-testo);
  --colore-tema: var(--colore-accento);
  --bling: var(--colore-accento);
}
:root[data-tema="chiaro"] {
  --colore-fondo: var(--palette-lavanda-scura);
  --colore-superficie: var(--palette-lavanda);      /* i pannelli: lavanda latte, non bianco */
  --colore-testo: var(--palette-nero);
  --colore-testo-tenue: color-mix(in srgb, var(--palette-nero) 72%, var(--palette-avorio));
  --colore-accento: var(--palette-viola);
  --colore-su-accento: var(--palette-bianco);
  --colore-separatore: color-mix(in srgb, var(--palette-nero) 15%, var(--palette-avorio));
  --stella-pieno: var(--palette-viola);
  --stella-contorno: var(--palette-salvia);
  --stella-variante: var(--palette-lilla);          /* contorni secondari, dove serve una variante */
}
::selection { background: var(--colore-accento); color: var(--colore-su-accento); }
:focus-visible { outline-color: var(--colore-accento); }
html { scrollbar-color: var(--separatore) var(--fondo); }

/* link e dettagli nell'accento */
.link, .contatti__email { color: var(--viola); }
.menu a:hover, .menu a:focus-visible { color: var(--viola); }
.scheda__risultato dt { color: var(--viola); }
.ritratto__scritta { color: var(--palette-viola); }   /* sulla foto chiara: lo stesso viola nei due temi */

/* pulsanti principali: l'accento pieno */
.js .pannello__chiudi { background: var(--bottone-fondo); color: var(--bottone-testo); border: 2px solid var(--bottone-bordo); }
.js .pannello__indietro { border-color: var(--tenue); color: var(--chiaro); }

/* superfici piatte e opache: niente sfumature né bagliori */
.pannello::before, [data-tema="chiaro"] .pannello::before { background: var(--pannello); }
.lampo { display: none; }
[data-tema="chiaro"] .testa, [data-tema="chiaro"] .palco__cv, [data-tema="chiaro"] .azioni, [data-tema="chiaro"] .ruolo { text-shadow: none; }

/* i colori dei progetti nel tema chiaro: pastello, nella tinta dei nomi del tema scuro (--sopra).
   Sono testi grandissimi e decorativi; sulla lavanda il contrasto è tra 2,5 e 2,8 (sotto il 3:1
   dei testi grandi), scelto da Matilde per la morbidezza: chi li legge li ha anche nell'elenco del menu */
[data-tema="chiaro"] #imaze .pannello__nome, [data-tema="chiaro"] .elenco-progetti__voce[href="#imaze"] { --c1: #f0758e !important; }
[data-tema="chiaro"] #synapses, [data-tema="chiaro"] .elenco-progetti__voce[href="#synapses"] { --c1: #c9963a !important; }
[data-tema="chiaro"] #ju1ce .pannello__nome, [data-tema="chiaro"] .elenco-progetti__voce[href="#ju1ce"] { --c1: #9b85f2 !important; }
[data-tema="chiaro"] #energiapura, [data-tema="chiaro"] .elenco-progetti__voce[href="#energiapura"] { --c1: #4fa3a5 !important; }
[data-tema="chiaro"] #virtuoso .pannello__nome, [data-tema="chiaro"] .elenco-progetti__voce[href="#virtuoso"] { --c1: #c58f80 !important; }

/* ==========================================================================
   LE COSTELLAZIONI: le 12 composizioni di stelle di Matilde
   Stanno tutte in assets/img/stelle/costellazione.svg (uno "sprite": un file
   con 12 simboli). Nell'HTML se ne richiama una così:
     <svg class="costellazione ..." viewBox="0 0 L A" aria-hidden="true" focusable="false">
       <use href="assets/img/stelle/costellazione.svg#espressiva-01" width="L" height="A"/>
     </svg>
   (L e A sono larghezza e altezza del suo viewBox nello sprite).
   I colori arrivano dai token --stella-pieno e --stella-contorno: cambiando tema
   cambia solo il colore, non la forma né la misura.
   ========================================================================== */
.costellazione {
  display: block; flex: none;
  height: auto;                 /* l'altezza segue le proporzioni del viewBox */
  overflow: visible;            /* nessuna punta tagliata */
  pointer-events: none;         /* decorative: non intercettano clic né tocchi */
}

/* la firma accanto al ruolo, nella hero: piccola, sulla stessa riga */
.costellazione--ruolo { display: inline-block; width: 1.35em; margin-left: 0.3em; vertical-align: -0.3em; }

/* La costellazione con tutte e 12: compare dove la stella di strass svanisce
   (telefono e schermi in verticale: la stessa regola di stella.js) nello spazio
   libero tra il nome e il fondo. È un solo SVG (un foglio 300 × 400): stelle e linee
   si ingrandiscono insieme e restano al loro posto, qualunque sia lo schermo. */
.cielo { display: none; }
@media (max-width: 40rem), (max-aspect-ratio: 1/1) {
  .cielo {
    display: block;
    position: absolute; z-index: 1;
    /* schermi in verticale più larghi del telefono: il nome è min(21vw, 37svh) su due righe,
       il menu sta a destra a metà altezza, quindi la costellazione gli lascia la colonna */
    top: calc(var(--margine) + 3.5rem + 1.8 * min(21vw, 37svh) + 1.5rem);
    bottom: var(--margine);
    left: var(--margine); right: calc(var(--margine) + 8rem);
    pointer-events: none;
  }
  .cielo__mappa { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }
  /* le linee: sottili e salvia come i contorni; restano sottili a qualunque misura */
  .cielo__linee { stroke: var(--stella-contorno); stroke-width: 1.25; stroke-linecap: round; fill: none; }
  .cielo__linee line { vector-effect: non-scaling-stroke; }
}
@media (max-width: 40rem) {
  /* telefono: il nome è 25vw su due righe e il menu sta in fondo, su una riga */
  .cielo {
    top: calc(var(--margine) + 5.5rem + 45vw + 1rem);
    bottom: calc(var(--margine) + 3.75rem);
    right: var(--margine);
  }
}

/* la riserva, se WebGL non parte: solo allora */
svg.stella-riserva { display: none; }
.js.senza-webgl svg.stella-riserva { display: block; }
@media (max-width: 40rem) { .js.senza-webgl svg.stella-riserva { display: none; } }

/* la firma accanto alla prima riga del titolo di un progetto (e di Contatti) */
.costellazione--firma { display: inline-block; width: 0.62em; margin-left: 0.12em; vertical-align: 0.02em; }

/* Progetti: nello spazio libero in basso a destra, lontano dai nomi */
.pannello > .costellazione--angolo {
  position: absolute; z-index: 0;
  right: clamp(1.5rem, 6vw, 6rem); bottom: clamp(1.5rem, 6vh, 5rem);
  width: clamp(9rem, 15vw, 15rem);
}

/* Chi sono: accanto al testo, nella colonna libera a destra */
.costellazione--chi { grid-column: 10 / 13; grid-row: 2; align-self: center; justify-self: center; width: min(100%, 15rem); }

/* Telefono e schermi stretti: meno decorazioni, quelle che restano sono intere */
@media (max-width: 52rem) {
  .costellazione--chi { display: none; }
}
@media (max-width: 40rem) {
  .pannello > .costellazione--angolo { display: none; }   /* i nomi dei progetti occupano tutta la larghezza */
  .costellazione--ruolo { display: none; }                /* sul telefono c'è già la costellazione accanto al nome */
}

/* Chi sono: le due stelline nel cielo della foto. Stanno tra la foto e lo scontorno,
   come la scritta: dietro la testa e la spalla. La foto è la stessa nei due temi,
   quindi anche i colori: viola pieno e contorno lilla, che sul bianco e nero si vedono. */
.ritratto__stella {
  position: absolute; z-index: 0;
  --stella-pieno: var(--palette-viola);
  --stella-contorno: var(--palette-lilla);
}
.ritratto__stella--1 { left: 4cqw; top: 1cqw; width: 9cqw; }       /* nel cielo in alto, verso il bordo sinistro */
.ritratto__stella--2 { left: 76cqw; top: 22cqw; width: 8cqw; }     /* a destra della testa, sopra le colline */
@media (max-width: 52rem) {
  /* sul telefono la foto è più alta e tagliata sul volto */
  .ritratto__stella--1 { left: auto; right: 3cqw; top: 56cqw; width: 14cqw; }   /* sui palazzi a destra, lontano dal viso: in alto c'è Chiudi */
  .ritratto__stella--2 { left: 6cqw; top: 8cqw; width: 15cqw; }
}

/* Due figure affiancate che devono stare insieme (i volantini di Prōsopon):
   un blocco solo, così sul telefono arrivano tutte e due subito dopo il titolo */
.coppia { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }

/* ==========================================================================
   CONTATTI: il gioco con Bijou (la logica è in js/bijou.js, le pose in js/bijou-asset.js)
   Bijou è scontornata: niente riquadri bianchi, sta sul fondo del pannello
   in tutti e due i temi. Gli strumenti hanno il tratto delle illustrazioni.
   ========================================================================== */
.bijou {
  grid-column: 8 / 13; grid-row: 1 / span 2; align-self: start;
  display: grid; gap: 0.75rem; justify-items: center; text-align: center;
}
.bijou__titolo { font-size: var(--t-frase); font-weight: 700; line-height: 1.2; }
.bijou__aiuto { color: var(--tenue); font-size: var(--t-piccolo); max-width: 28rem; }

/* le quattro stelline del progresso: spente (contorno) e accese (piene) */
.bijou__progressi { display: flex; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.bijou__stellina {
  display: block; width: 1.6rem; height: 1.6rem;
  background: var(--separatore);
  -webkit-mask: url("../assets/img/stelle/singole/essenziale-02.svg") center / contain no-repeat;
          mask: url("../assets/img/stelle/singole/essenziale-02.svg") center / contain no-repeat;
  transition: background-color 300ms ease;
}
.e-accesa .bijou__stellina { background: var(--colore-accento); }

/* il palco: misure fisse (il viewBox), così cambiando posa non salta niente */
.bijou__palco { position: relative; width: min(100%, 34rem); user-select: none; -webkit-user-select: none; }
.bijou__scena { display: none; width: 100%; height: auto; overflow: visible; }
.e-pronto .bijou__scena { display: block; }
.e-pronto .bijou__riserva { display: none; }
.bijou__riserva { width: min(100%, 20rem); margin-inline: auto; }
.bijou__scena g { transform-box: view-box; }
.bijou__posa { transform-origin: 500px 580px; }          /* il punto tra le zampe, sul pavimento */
/* mentre si accarezza o si gioca con la stellina il dito muove il gioco, non la pagina */
.e-accarezza .bijou__palco, .e-gioca .bijou__palco { touch-action: none; }
.e-accarezza .bijou__scena { cursor: none; }             /* la mano disegnata fa da cursore */
.e-gioca .bijou__scena { cursor: grab; }

/* la zona dove si può lasciare lo strumento: un'ellisse tratteggiata, appena accennata */
.bijou__zona { fill: var(--colore-accento); fill-opacity: 0; stroke: var(--colore-accento); stroke-width: 3; stroke-dasharray: 10 10; opacity: 0; transition: opacity 200ms ease, fill-opacity 200ms ease; pointer-events: none; }
.bijou__zona.e-attiva { opacity: 0.7; }
.bijou__zona.e-sopra { opacity: 1; fill-opacity: 0.12; }
.bijou__mano, .bijou__giocattolo { pointer-events: none; transition: opacity 180ms ease; }

/* la barra degli strumenti */
.bijou__strumenti { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.bijou__strumenti[hidden] { display: none; }
.bijou__strumento {
  display: grid; justify-items: center; gap: 0.15rem;
  min-width: 5rem; padding: 0.45rem 0.6rem 0.4rem;
  border: 2px solid var(--separatore); border-radius: 1rem;
  background: var(--pannello); color: var(--chiaro);
  font-size: var(--t-piccolo); font-weight: 700;
  cursor: grab; touch-action: none;                     /* il dito trascina lo strumento */
  transition: border-color 160ms ease, transform 160ms var(--ease), opacity 160ms ease;
}
.bijou__strumento svg { width: 2.75rem; height: 2.75rem; }
.bijou__strumento:hover { border-color: var(--colore-accento); transform: translateY(-2px); }
.bijou__strumento[aria-pressed="true"] { border-color: var(--colore-accento); box-shadow: 0 0 0 2px var(--colore-accento); }
.bijou__strumento[aria-disabled="true"] { opacity: 0.45; cursor: default; transform: none; }
/* la copia che segue il puntatore mentre si trascina */
.bijou__fantasma { position: fixed; left: 0; top: 0; z-index: 60; width: 80px; height: 80px; pointer-events: none; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.25)); } /* taste-skill-ignore */
.bijou__fantasma svg { width: 100%; height: 100%; }

.bijou__stato { min-height: 1.5em; font-weight: 700; color: var(--chiaro); max-width: 28rem; }
.bijou__fine { display: grid; gap: 0.75rem; justify-items: center; }
.bijou__fine[hidden] { display: none; }
.bijou__messaggio { font-size: var(--t-frase); font-weight: 700; line-height: 1.3; max-width: 24rem; }
.bijou__bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1.25rem; border-radius: 999px;
  border: 2px solid var(--colore-accento);
  background: var(--colore-accento); color: var(--colore-su-accento);
  font-weight: 700; font-size: var(--t-piccolo); cursor: pointer;
  transition: transform 200ms var(--ease);
}
.bijou__bottone:hover { transform: scale(1.04); }

/* senza JavaScript: solo Bijou, niente gioco */
html:not(.js) .bijou__aiuto, html:not(.js) .bijou__progressi, html:not(.js) .bijou__strumenti, html:not(.js) .bijou__stato { display: none; }
@media (max-width: 52rem) {
  .bijou { grid-column: 1 / -1; grid-row: auto; margin-top: 1rem; }
}
/* sul desktop Bijou sta in alto a destra, proprio dove c'è il pulsante Chiudi: scende quanto il pulsante più un po' d'aria */
@media (min-width: 52.01rem) {
  .js .bijou { padding-top: 3.25rem; }
}
/* telefono: i quattro strumenti su una riga sola (restano grandi abbastanza per il dito) */
@media (max-width: 26rem) {
  .bijou__strumenti { gap: 0.35rem; flex-wrap: nowrap; }
  .bijou__strumento { min-width: 0; flex: 1 1 0; padding-inline: 0.2rem; }
  .bijou__strumento svg { width: 2.4rem; height: 2.4rem; }
}
/* sul computer il testo dei contatti lascia la destra a Bijou */
@media (min-width: 52.01rem) { #contatti .pannello__testo--largo { grid-column: 1 / 8; } }
/* telefono: dentro i blocchi di testo "largo" (Contatti) il titolo resta in cima
   (la regola dei pannelli dei progetti lo manderebbe in fondo) */
@media (max-width: 40rem) { .pannello__testo--largo > .pannello__titolo { order: 0 !important; } }

/* il bouquet in ASCII: sul suo fondo scuro in tutti e due i temi, così i petali bianchi si leggono.
   È un canvas: le celle monospace restano nelle loro proporzioni e non vanno mai a capo */
.bijou__bouquet { display: block; width: min(100%, 24rem); height: auto; border-radius: 1.25rem; background: #201D24; }
.bijou__azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.bijou__bottone--secondario { background: transparent; color: var(--chiaro); border-color: var(--tenue); }

/* Bijou che dorme: tre "z" salgono piano sopra la sua testa (ferme con "riduci movimento") */
.bijou__zzz { opacity: 0; pointer-events: none; font: 700 44px var(--font); fill: var(--colore-accento); transition: opacity 400ms ease; }
.e-dorme .bijou__zzz { opacity: 1; }
.e-dorme .bijou__zzz text { animation: bijou-zzz 2.4s ease-in-out infinite; }
.e-dorme .bijou__zzz text:nth-child(2) { animation-delay: 0.6s; }
.e-dorme .bijou__zzz text:nth-child(3) { animation-delay: 1.2s; }
@keyframes bijou-zzz { 0% { opacity: 0; transform: translate(0, 10px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -24px); } }
@media (prefers-reduced-motion: reduce) { .e-dorme .bijou__zzz text { animation: none; } }
/* telefono: i cinque strumenti su una riga */
@media (max-width: 26rem) {
  .bijou__strumenti { gap: 0.25rem; }
  .bijou__strumento svg { width: 2.1rem; height: 2.1rem; }
  .bijou__strumento { font-size: 0.75rem; }
}

/* all'apertura Bijou dorme: niente strumenti né stelline, solo lei e l'invito a svegliarla */
.bijou__invito, .bijou__sveglia { display: none; }
.e-in-attesa .bijou__invito { display: block; color: var(--tenue); max-width: 26rem; }
.e-in-attesa .bijou__sveglia { display: inline-flex; }
.e-in-attesa .bijou__aiuto, .e-in-attesa .bijou__progressi, .e-in-attesa .bijou__strumenti { display: none; }
.e-in-attesa .bijou__scena { cursor: pointer; }

/* le mani disegnate negli strumenti e nella copia che si trascina */
.bijou__strumento img { width: 2.75rem; height: 2.75rem; object-fit: contain; pointer-events: none; }
.bijou__fantasma img { width: 100%; height: 100%; object-fit: contain; }
.bijou__fantasma { width: 110px; height: 110px; }
@media (max-width: 26rem) { .bijou__strumento img { width: 2.1rem; height: 2.1rem; } }

/* ---------- La lattina di strass (Synapses): un oggetto 3D da girare ---------- */
.oggetto { margin-top: 1rem; width: min(100%, 17rem); justify-self: center; text-align: center; }
.oggetto__palco {
  position: relative; aspect-ratio: 3 / 5;
  border-radius: 1rem; cursor: grab;
  touch-action: pan-y;                 /* sul telefono si scorre in verticale, si gira in orizzontale */
  display: none;
}
.oggetto__palco.e-presa { cursor: grabbing; }
.oggetto__palco.e-col-mouse:focus-visible { outline: none; }
.oggetto__palco canvas { display: block; width: 100%; height: 100%; }
/* gli occhiali: più larghi che alti, e fatti di foto una sopra l'altra */
.oggetto--largo { width: 100%; max-width: 34rem; }
.oggetto--largo .oggetto__palco { aspect-ratio: 4 / 3; }
.oggetto__palco > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.oggetto__foto { width: 100%; height: auto; border-radius: 1rem; }
/* quando il 3D è pronto, la foto lascia il posto alla lattina da girare */
.oggetto.e-3d .oggetto__palco { display: block; }
.oggetto.e-3d .oggetto__foto { display: none; }
.oggetto figcaption { margin-top: 0.5rem; font-size: var(--t-piccolo); color: var(--tenue); }
/* l'etichetta "non fa parte del progetto" sta sulla sua riga, sopra l'istruzione */
.oggetto__etichetta { display: block; }


/* ---------- Il pannello piccolo (Portfolio): un riquadro al centro, grande quanto i due nomi ----------
   Il ritaglio lo calcola pannelli.js; qui il contenuto si mette al centro dello schermo
   e il pulsante Chiudi va nell'angolo del riquadro */
.js .pannello--piccolo { align-content: center; justify-items: center; }
.pannello--piccolo .elenco-progetti { grid-column: 1 / -1; justify-self: center; width: max-content; max-width: 100%; }
.pannello--piccolo .elenco-progetti__nome { font-size: clamp(2.6rem, 1rem + 5vw, 5.5rem); }
.js .pannello--piccolo .pannello__chiudi { top: calc(var(--riquadro-sopra, 0px) + 0.75rem); right: calc(var(--riquadro-lato, 0px) + 0.75rem); }