/* Il telefono (scelte di Leo, APPROVATO.md §12): vale solo sugli schermi stretti (le pagine lo collegano con
   media="telefono", la costruzione ci scrive la larghezza). Testi, colori e aspetto sono quelli del sito; cambia dove
   stanno le cose. Qui le parti comuni a tutte le pagine: la pagina larga quanto lo schermo, la barra in alto col
   logo e la sigla della lingua, il menu in basso, i titoli; ogni pagina ha poi il suo foglio (telefono-*.css).
   Le misure dei testi sono il minimo approvato da Leo: mai più piccole. */
:root {
  --pad: 18px;
  --nav-cima: 12px;
  --nav-alta: 50px;
  /* dove finisce la barra in alto: da qui si misurano i titoli delle pagine e «Torna» della rete aperta */
  --sotto-barra: calc(var(--nav-cima) + var(--nav-alta));
  --titolo-cima: calc(var(--sotto-barra) + 34px);
  --raggio-lastra: 22px;
  /* quanto spazio prende in fondo il menu in basso: la pagina finisce sopra */
  --menu-sotto: calc(80px + env(safe-area-inset-bottom));
  /* Sul telefono il vetro non sfoca (scelta di Leo): quando la pagina cambia il telefono deve ricalcolare la sfocatura
     di ogni vetro, e per un attimo le schede restavano trasparenti con la sfera dietro. Schede, colonne, barra in alto
     e tasti sono un velo bianco che lascia vedere lo sfondo vero dietro, senza sfocarlo: costa niente e resta uguale
     nei passaggi. La lingua aperta è piena. Il menu in basso, che passa sopra le schede, resta di vetro vero (scelta di
     Leo, «A · Trasparente»). */
  --vetro-sfoca: none;
  --nodo-sfoca: none;
  --tasto-sfoca: none;
  --vetro-fondo: linear-gradient(160deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.14));
  --vetro-pieno: linear-gradient(160deg, rgba(243, 239, 232, 0.95), rgba(233, 228, 219, 0.93));
  --menu-sfoca: blur(10px) saturate(150%);
  --menu-fondo: linear-gradient(160deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12));
  --menu-raggio: 28px;
  /* i nodi (Home, «Come funziona», le lastre di Cosa faccio e Chi sono) più chiari di quelli del computer, anche ai
     bordi della lente (scelta di Leo) */
  --lens-full: rgba(255, 255, 255, 0.98);
  --lens-bordo: var(--bianco-60);
  /* la voce aperta del menu (e la lingua, il lavoro scelto in «Per chi») bianco puro: bordino e ombra grigi, non color
     sabbia, che accanto allo sfondo la facevano sembrare giallina (scelta di Leo) */
  --voce-aperta-ombra:
    inset 0 1px 0 var(--bianco), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 6px 14px -8px rgba(0, 0, 0, 0.22);
  --menu-ombra:
    inset 0 1px 0 var(--bianco-75), inset 0 0 0 1px var(--bianco-35), 0 18px 36px -20px rgba(60, 50, 40, 0.35);
  /* quanto ci mette una pagina a uscire o entrare di lato (anche la rete che esce a metà apertura,
     js/telefono-rete-piano.js) */
  --di-lato: 0.45s;
}
/* toccando un tasto il telefono non ci disegna sopra il suo riquadro colorato: il tasto risponde da sé */
html {
  scrollbar-gutter: auto;
  -webkit-tap-highlight-color: transparent;
}
/* I tasti scuri e «← Cosa faccio» sono più bassi dei 44 punti consigliati per il dito: attorno hanno una zona
   invisibile che risponde al tocco. Si vedono uguali, ma si prendono più facilmente. («Come funziona» e la lingua
   usano già le loro decorazioni per il vetro.) */
:is(.btn-dark, .lavori-indietro) {
  position: relative;
}
:is(.btn-dark, .lavori-indietro)::after {
  content: '';
  position: absolute;
  inset: -6px -4px;
}
/* la pagina larga quanto lo schermo, senza i gradini che la rimpiccioliscono sul computer (stili/zoom.css) */
.site {
  width: 100%;
  zoom: 1;
}
main {
  padding: 0 var(--pad) calc(56px + var(--menu-sotto));
}
/* La barra in alto: il logo e la lingua */
.nav {
  padding: 8px 8px 8px 12px;
  border-radius: 26px;
}
/* il marchio porta alla Home solo dove c'è la scritta: accanto, la sigla della lingua si prende senza sbagliare */
.brand {
  justify-self: start;
  font-size: 16px;
  white-space: nowrap;
}
.brand .nodo-lc {
  width: 34px;
  height: 34px;
}
/* Il menu in basso, come in un'app (scelta di Leo, APPROVATO.md §13): in fondo allo schermo, a portata di pollice,
   le quattro voci con icona e nome, quella aperta bianca, su un vetro molto trasparente. Nelle pagine che si scorrono
   arriva scorrendo (js/telefono-menu.js). Nei passaggi fra le pagine ha un nome suo: resta fermo mentre la pagina
   cambia, anche quando la pagina di un lavoro sale dal basso */
.links {
  position: fixed;
  top: auto;
  left: var(--pad);
  right: var(--pad);
  bottom: calc(12px + env(safe-area-inset-bottom));
  height: auto;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px;
  border-radius: var(--menu-raggio);
  font-size: 13px;
  background: var(--menu-fondo);
  -webkit-backdrop-filter: var(--menu-sfoca);
  backdrop-filter: var(--menu-sfoca);
  box-shadow: var(--menu-ombra);
  view-transition-name: menu-sotto;
}
@media (prefers-reduced-motion: no-preference) {
  .links {
    transition:
      translate 0.45s var(--ease),
      opacity 0.45s var(--ease);
  }
}
/* con lo script, nelle pagine che si scorrono il menu sta sotto lo schermo finché non si scorre; il suo primo posto,
   appena la pagina si vede, lo prende senza movimento */
.menu-scorre .links:not(.su) {
  translate: 0 calc(100% + 30px);
  opacity: 0;
}
.menu-fermo .links {
  transition: none;
}
.links a:not([aria-current='page']) {
  background: var(--bianco-18);
  box-shadow: inset 0 0 0 1px var(--bianco-35);
}
.links a {
  height: 56px;
  padding: 0 4px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  border-radius: 22px;
  line-height: 1.05;
  text-align: center;
}
.links svg {
  display: block;
  width: 21px;
  height: 21px;
}
/* nei passaggi il menu resta sopra i pezzi che scorrono; sopra il suo vetro il bianco della voce aperta, e sopra
   ancora icone e scritte delle voci (js/transizioni.js). La foto del menu non sfoca quello che c'è dietro: lo sfoca il
   suo gruppo, fermo dove sta il menu, così mentre le pagine passano sotto il vetro resta lo stesso. */
::view-transition-group(menu-sotto) {
  z-index: 3;
  border-radius: var(--menu-raggio);
  -webkit-backdrop-filter: var(--menu-sfoca);
  backdrop-filter: var(--menu-sfoca);
}
::view-transition-group(voce-aperta) {
  z-index: 4;
}
::view-transition-group(*.voce) {
  z-index: 5;
}
/* Cambiando pagina il menu e le sue scritte stanno subito al loro posto, e la pillola bianca scivola solo di lato, dal
   posto che le dà js/telefono-menu.js: sull'iPhone, quando la barra di Chrome in basso torna grande, il menu nuovo sta
   più in su e la pillola, che il browser faceva salire dal posto di prima, restava nascosta dietro la barra. */
::view-transition-group(menu-sotto),
::view-transition-group(*.voce) {
  animation-duration: 0s;
}
:root.pillola-di-lato::view-transition-group(voce-aperta) {
  animation: pillola-di-lato 0.64s var(--ease) both;
}
@keyframes pillola-di-lato {
  from {
    translate: var(--pillola-da) 0;
  }
}

/* Titoli e aperture delle pagine */
h1,
.titolo-grande {
  font-size: 30px;
  line-height: 1.08;
}
h2 {
  font-size: 22px;
}
.intro,
.hero {
  margin-top: var(--titolo-cima);
  flex-direction: column;
  gap: 14px;
}
.intro-side,
.hero-side {
  width: auto;
}
.intro-side {
  font-size: 15px;
}
/* i tasti piccoli: «Scrivimi» e «Come funziona» nella Home, i tasti di Contatti (e quello dell'invito, che c'è solo in
   «Per chi»: stili/telefono-per-chi.css) */
:is(.hero, .contatto) .btn {
  height: 32px;
  padding: 0 14px;
  font-size: 13.5px;
}
/* l'invito in fondo alla pagina sul telefono c'è solo in «Per chi»: altrove la pagina sta in uno schermo */
body:not([data-pagina='per-chi']) .invito {
  display: none;
}
/* All'inizio di un passaggio il browser fotografa i pezzi che si muovono. Su un Android vero (lo Xiaomi di Leo), con la
   Home piena di animazioni, la foto dei pezzi che non stanno su un livello loro usciva vuota: sparivano il titolo, la
   frase, «Scrivimi», le scritte del menu e, chiudendo «Come funziona», nodi, titoli delle colonne e fili. I vetri si
   vedevano sempre perché la sfocatura li teneva su un livello loro; senza sfocatura sul telefono lo hanno perso, e
   sparivano anche loro (le colonne, la scheda «Per chi»). Tutti questi pezzi stanno su un livello loro, pronto prima
   del passaggio: si vedono uguali. */
.glass,
.hero :is(h1, .lead, .btn-dark),
.links :is(.voce, svg),
.rete-telefono :is(.ra-nodo, .fili-telefono) {
  will-change: transform;
}
/* I passaggi fra le pagine (scelte di Leo, APPROVATO.md §12). Col menu tutta la pagina esce di lato e la nuova
   entra dall'altra parte, come nelle app: verso sinistra andando avanti nel menu, verso destra tornando indietro; la
   pillola bianca del menu scivola solo di lato (js/telefono-menu.js). */
/* Uscendo da una pagina con la rete aperta (js/telefono-rete-piano.js) la rete esce in una foto sola e lo sfondo ha
   un nome suo: la foto della rete viene prima di quella dello sfondo, che la coprirebbe, e i pezzi stanno sopra.
   Barra e lingua lì le ha solo la pagina vecchia: restano piene fino alla fine, uguali a quelle della nuova, che
   arrivano sotto lo sfondo che sfuma. Queste regole stanno qui perché il passaggio lo disegna la pagina nuova. */
::view-transition-group(*.pezzo) {
  z-index: 1;
}
::view-transition-old(rete-barra):only-child,
::view-transition-old(rete-lingue):only-child {
  animation: none;
}
/* Il bianco del menu che c'è in una pagina sola non scivola: sfuma dove sta, dentro o fuori, coi tempi del menu e le
   sfumature dei pezzi (stili/transizioni.css; il tipo lo dà js/transizioni.js, sul computer lo sfuma lo script) */
:root:active-view-transition-type(bianco-entra)::view-transition-group(voce-aperta) {
  animation-name: pezzo-compare;
}
:root:active-view-transition-type(bianco-esce)::view-transition-group(voce-aperta) {
  animation-name: pezzo-sparisce;
}
::view-transition-old(*.pezzo) {
  animation: pagina-esce var(--di-lato) var(--ease) both;
}
::view-transition-new(*.pezzo) {
  animation: pagina-entra var(--di-lato) var(--ease) both;
}
@keyframes pagina-esce {
  to {
    translate: calc(var(--verso) * -100vw) 0;
  }
}
@keyframes pagina-entra {
  from {
    translate: calc(var(--verso) * 100vw) 0;
  }
}
/* Da «Cosa faccio» a un lavoro la pagina del lavoro sale dal basso come un foglio, sopra quella di prima; tornando
   scende e lascia «Cosa faccio» sotto (il tipo del passaggio lo mette js/transizioni.js). Il riquadro che si allarga
   del computer qui non c'è. */
.riquadri .riq {
  view-transition-name: none;
}
.lavori-velo {
  display: none;
}
:root:active-view-transition-type(lavoro-apre)::view-transition-old(root),
:root:active-view-transition-type(lavoro-chiude)::view-transition-new(root) {
  animation: pagina-resta 0.5s both;
}
:root:active-view-transition-type(lavoro-apre)::view-transition-new(root) {
  animation: foglio-sale 0.5s var(--ease) both;
}
:root:active-view-transition-type(lavoro-chiude)::view-transition-old(root) {
  z-index: 1;
  animation: foglio-scende 0.45s var(--ease) both;
}
@keyframes foglio-sale {
  from {
    translate: 0 100%;
  }
}
@keyframes foglio-scende {
  to {
    translate: 0 100%;
  }
}
@keyframes pagina-resta {
  from,
  to {
    opacity: 1;
  }
}

/* i fili disegnati per il telefono (js/telefono-fili.js), sopra le schede e sotto i nodi */
.fili-telefono {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* Le strisce da scorrere col dito di lato (le lastre di «Cosa faccio» e «Chi sono», gli esempi dei lavori): una
   scheda per schermata, che si ferma allineata al margine */
.casi,
.lavori-esempi {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-inline: calc(-1 * var(--pad));
  padding: 0 var(--pad) 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.casi .caso,
.lavori-esempi > .idea {
  flex: none;
  width: calc(100vw - 2 * var(--pad) - 28px);
  scroll-snap-align: start;
}
/* i puntini sotto una striscia da scorrere (li mette js/telefono.js): quello scuro è l'elemento che si vede; sopra
   il colore di fondo delle pagine dei lavori, come gli altri pezzi */
.puntini {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: -11px;
}
.puntini i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}
.puntini i.qui {
  background: var(--text);
}