/* ===================================================================
   NAV SHEET — il menu a schermo intero del telefono
   ===================================================================
   IL PROBLEMA CHE RISOLVE
   La ruota nella barra funzionava, ma non si riconosceva come un menu. Su un
   iPhone vero quel che si vedeva era una parola sola — "Benvenuto" — con due
   parole sfocate e mezze tagliate sopra e sotto: nessun bordo, nessuna icona,
   nessuna forma di pulsante. E "Benvenuto" si legge come un saluto, non come
   una navigazione. Da qui il "non si vede nessun menu": c'era, ma non come
   menu.

   LA CURA
   Non un hamburger accanto — provato e scartato: aggiungeva un secondo
   simbolo di navigazione a fianco di una navigazione che c'e' gia', e
   riduceva la ruota, che e' la cosa piu' riconoscibile del sito, a etichetta
   di un'icona qualunque.

   La ruota E' il pulsante: si preme lei, e si apre QUESTA schermata. Dentro
   non c'e' una lista di link ma la COLONNA DEL DESKTOP, in grande — stesso
   arco, stessa inclinazione, stessa sfocatura che cresce allontanandosi,
   voce attiva bianca al centro. E' lo stesso menu del sito, visto sul
   telefono: quello che sulla barra non ci stava per mancanza di spazio.

   I numeri che producono quell'aspetto (curve, tilt, blur, fade, minOpacity)
   sono copiati dalla ruota del rail in js/scene-manager.js. Se un giorno si
   ritocca il look del desktop, vanno cambiati insieme o i due divergono.

   Sta sopra tutto (z-index 210): la pila della pagina arriva a 200 con
   text-peek e scroll-expand, e un menu aperto deve coprirli entrambi.
   =================================================================== */

.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 210;

  display: flex;
  flex-direction: column;
  justify-content: center;

  /* svh e non vh: su iOS vh e' l'altezza che il viewport ha con le barre del
     browser RITIRATE, quindi un pannello a 100vh e' piu' alto dello schermo
     davvero disponibile e il fondo del menu finisce sotto la barra inferiore.
     La riga vh resta prima come ripiego per i browser che svh non ce l'hanno. */
  height: 100vh;
  height: 100svh;

  /* Pieno, senza backdrop-filter. Sono partito da un vetro smerigliato — in
     tinta col resto del sito — e l'ho tolto perche' su WebKit, cioe' su ogni
     browser di ogni iPhone, faceva l'opposto del suo mestiere.

     Il sintomo: col menu aperto la pagina dietro restava leggibile. Sembrava
     uno sfondo troppo trasparente, ma non lo era — l'ho portato a 0.985, che
     lascia passare l'1,5%, e si leggeva ancora uguale. La prova che ha chiuso
     la questione: ho colorato di rosso e giallo tutto quello che sta dietro e
     ho riaperto il menu. Il fantasma e' rimasto BIANCO. Quindi non era la
     pagina che si vedeva attraverso: era il backdrop-filter che disegnava la
     sua copia del fondo SOPRA il colore invece che sotto.

     Nessun trucco per rimetterlo in riga: un menu deve essere leggibile, e la
     leggibilita' non puo' dipendere da una proprieta' che un motore rende a
     modo suo — e che oltretutto i browser sono i primi a saltare quando la
     batteria e' bassa. Il fondo pieno costa un effetto e non sbaglia mai. */
  background: #060606;

  /* Chiuso: invisibile e non toccabile. `hidden` da solo non basterebbe per
     l'animazione — l'attributo toglie l'elemento dal flusso di colpo, senza
     dare tempo alla dissolvenza — quindi lo stato visivo e' qui e js lo
     accompagna: toglie `hidden`, poi aggiunge .is-open al frame dopo. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s var(--ease), visibility 0.32s var(--ease);
  visibility: hidden;
}

.nav-sheet.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ===== L'intestazione della schermata ===== */
.nav-sheet__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Alta e larga come la barra che apre il menu, cosi' l'intestazione della
     schermata cade esattamente sopra quella della pagina e l'apertura non
     sposta niente all'occhio. */
  padding: 8px 20px;
  min-height: 80px;
}

.nav-sheet__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-50);
}

/* ===== La × ===== */
.nav-sheet__close {
  /* 44px e' il bersaglio minimo che si prende senza mirare, ed e' la misura
     che Apple e Google indicano entrambe. Il segno dentro e' piu' piccolo:
     conta l'area, non il disegno. */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  position: relative;
  flex-shrink: 0;
}

.nav-sheet__close::before,
.nav-sheet__close::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.nav-sheet__close::before { transform: rotate(45deg); }
.nav-sheet__close::after  { transform: rotate(-45deg); }

.nav-sheet__close:hover::before { transform: rotate(45deg) scaleX(1.15); }
.nav-sheet__close:hover::after  { transform: rotate(-45deg) scaleX(1.15); }

/* ===== La ruota, in grande ===== */
.nav-sheet__wheel {
  width: 100%;
  /* Alta abbastanza per sette righe alla misura che js calcola dal viewport.
     Il contenitore della ruota ritaglia (overflow:hidden), quindi qui la
     misura NON e' cosmetica: quel che sborda non si vede. */
  height: min(72svh, 640px);
  /* Il margine sinistro delle etichette (--ow-inset) e la loro dimensione
     (--ow-font-size) NON stanno qui: li scrive js/scene-manager.js, che li
     calcola dall'altezza dello schermo. Metterli anche qui vorrebbe dire due
     fonti per lo stesso numero, e prima o poi una delle due resta indietro. */
}

/* Il peso e' quello del rail desktop: la riga attiva stacca perche' e' l'unica
   bianca e nitida, non perche' e' piu' grassa delle altre. */
.nav-sheet__wheel .option-wheel__item {
  font-weight: 300;
  letter-spacing: -0.02em;
}
.nav-sheet__wheel .option-wheel__item--selected {
  font-weight: 500;
}

/* ===== In fondo: il contatto ===== */
.nav-sheet__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
}

.nav-sheet__cta {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text-50);
  text-decoration: none;
  padding: 12px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav-sheet__cta:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.24);
}

/* ===== Sopra il breakpoint non esiste =====
   Da 981px in su la navigazione e' la ruota fissa sul bordo sinistro, sempre
   presente: una schermata da aprire sarebbe un passaggio in piu' per arrivare
   a qualcosa che e' gia' li'. */
@media (min-width: 981px) {
  .nav-sheet { display: none; }
}

/* ===== Chi ha chiesto meno movimento =====
   La dissolvenza sparisce, l'apparizione resta immediata. Il menu e' una
   funzione, non un effetto: non si toglie, si smette solo di animarlo. */
@media (prefers-reduced-motion: reduce) {
  .nav-sheet,
  .nav-sheet__close::before,
  .nav-sheet__close::after { transition: none; }
}