/* ══════════════════════════════════════════════════════════════════════════
   COME UN'APP — le differenze fra "sito aperto sul telefono" e "app"   (v18)
   ──────────────────────────────────────────────────────────────────────────
   🔴 IL PUNTO. Il sito è fatto di 19 pagine separate. Ogni tocco su un link
   butta via tutto e ricarica: lampo bianco, scorrimento perso, mezzo secondo
   di vuoto. È QUELLO che fa dire "è un sito", non la lentezza — la mappa,
   misurata in produzione, è pronta in 109 ms e pesa 290 KB.

   ⚠️ Fino a poco fa l'unico modo di togliere quel lampo era rifare tutto a
   pagina unica, ed è il motivo per cui tutti finivano su React. Ora i browser
   animano il passaggio FRA DUE DOCUMENTI: si dichiara qui, e i link restano
   link. Nessuna riscrittura, nessun instradamento da mantenere.

   ⚠️ QUESTO FILE NON DEVE MAI ESSERE NECESSARIO. Dove il browser non
   conosce le transizioni (Firefox, Safari vecchi) il sito funziona
   esattamente come prima: si perde l'animazione, non una funzione. È la
   ragione per cui sta in un file suo e non dentro `style.css` — se un giorno
   dà problemi si toglie la riga e si è tornati indietro.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. IL PASSAGGIO FRA PAGINE ─────────────────────────────────────────────
   `navigation: auto` vale solo fra pagine dello STESSO sito, quindi i link
   verso l'esterno (il sito di un partner) non sono toccati. */
@view-transition { navigation: auto; }

/* ⚠️ SENZA QUESTE DUE RIGHE L'EFFETTO È SBAGLIATO, non assente: la barra in
   alto e la tabbar sono uguali su tutte le pagine, e se non le si dichiara
   "le stesse" il browser le fa sparire e ricomparire in dissolvenza a ogni
   passaggio. Un'app tiene ferme le sue barre e muove solo il contenuto: è
   esattamente questa la differenza che si sente. */
.topbar    { view-transition-name: gv-topbar; }
.gv-tabbar { view-transition-name: gv-tabbar; }

/* Il contenuto entra da destra e esce a sinistra, come in un'app.
   ⚠️ Durate corte di proposito: 180/220 ms. Sopra i ~300 ms l'animazione
   smette di essere "fluidità" e diventa "attesa", e su un telefono lento
   diventa subito fastidiosa. Meglio troppo poco che troppo. */
@keyframes gv-entra-da-destra {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gv-esce-a-sinistra {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(-12px); }
}
::view-transition-old(root) {
  animation: gv-esce-a-sinistra 180ms cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: gv-entra-da-destra 220ms cubic-bezier(0, 0, .2, 1) both;
}

/* 🔴 ACCESSIBILITÀ, e non è una formalità: per chi soffre di disturbi
   vestibolari il movimento sullo schermo può dare nausea vera. Chi ha chiesto
   al telefono di ridurre le animazioni deve ottenere il sito di prima, non
   una versione più lenta della stessa animazione. Qui si spegne del tutto. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  ::view-transition-group(*)  { animation-duration: 1ms; }
}

/* ── 2. IL TOCCO ────────────────────────────────────────────────────────────
   Su Android, toccando un link, il sistema disegna un rettangolo grigio
   translucido. È il segno più riconoscibile del "sito dentro un'app": nessuna
   app nativa lo fa. Si toglie e si mette al suo posto un riscontro nostro.
   ⚠️ Togliere l'evidenziazione SENZA metterne una propria è peggio del
   problema: chi tocca non capisce se il tocco è stato preso. Sotto c'è
   `:active`, che deve restare. */
a, button, [role="button"], [onclick], [data-action], .chip, .pill, label {
  -webkit-tap-highlight-color: transparent;
}
a:active, button:active, [role="button"]:active, [data-action]:active {
  opacity: .62;
  transition: opacity 40ms linear;
}

/* ── 3. QUELLO CHE NON SI SELEZIONA ─────────────────────────────────────────
   In un'app, tenendo premuto su un pulsante non compare "Copia / Condividi".
   🔴 SI TOGLIE SOLO SULL'INTERFACCIA, MAI SUI CONTENUTI: il nome di un
   rifugio, un indirizzo, un numero di telefono devono restare copiabili —
   è esattamente quello che la gente fa con una guida. Per questo l'elenco
   qui sotto nomina barre e pulsanti, e non `body`. */
.topbar, .gv-tabbar, .chip, .pill, button, [role="button"], .fab-segnala {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ── 4. IL RIMBALZO DI FINE PAGINA ──────────────────────────────────────────
   `overscroll-behavior-y:none` su `body` c'è già in style.css: impedisce che
   trascinando in fondo si trascini la pagina sotto. Qui si aggiunge il caso
   che manca — gli elenchi che scorrono dentro un pannello, dove arrivati in
   fondo lo scorrimento passava alla pagina dietro. */
.evd-panel, .modal, .sgnl-modal, [data-scroll-contenuto] {
  overscroll-behavior: contain;
}

/* ── 5. LA TASTIERA CHE FA ZOOMARE (solo iPhone) ────────────────────────────
   🔴 Se un campo di testo ha caratteri sotto i 16px, Safari ZOOMA la pagina
   quando ci si scrive dentro, e non torna più indietro da solo. È il difetto
   che più di ogni altro fa sembrare rotto un sito su iPhone, e capita solo
   sui telefoni Apple veri: nel simulatore del computer non si vede.
   16px è la soglia esatta di Safari, non un valore scelto a occhio. */
@media (max-width: 900px) {
  input[type="text"], input[type="search"], input[type="email"],
  input[type="tel"], input[type="number"], input[type="password"],
  select, textarea { font-size: 16px; }
}

/* ── 6. QUANDO GIRA COME APP INSTALLATA ─────────────────────────────────────
   `display-mode: standalone` è vero SOLO dall'icona in schermata home o
   dentro l'app degli store. Nel browser normale niente di tutto questo si
   applica: la stessa pagina si comporta da sito quando è un sito.
   ⚠️ Qui NON si nasconde niente di funzionale. Sono ritocchi di contorno:
   nessuno deve trovarsi senza un pulsante perché ha installato l'app. */
@media (display-mode: standalone) {
  /* Niente selezione accidentale trascinando: in un'app non succede. */
  body { -webkit-user-select: none; user-select: none; }
  /* ...ma il contenuto resta copiabile. Vedi il punto 3: vale lo stesso
     motivo, ed è il motivo per cui questa riga non è facoltativa. */
  p, li, h1, h2, h3, h4, td, .card, .modal, [data-testo] {
    -webkit-user-select: text; user-select: text;
  }
  /* Lo spazio sotto la barra di casa dell'iPhone. */
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}