/* ============================================================
   La pagina di benvenuto — /welcome/

   Foglio a se' e non dentro shell.css, perche' questa pagina il guscio
   non ce l'ha: la carica solo lei, e chi apre il portale non se la porta
   dietro. Stava in shell.css quando il benvenuto era una sezione della
   home; spostato quando e' diventato una pagina sua.
   ============================================================ */

/* 100svh e non 100vh, come per la soglia del 28-08: su telefono la barra del
   browser si ritira mentre si scorre, e con vh la schermata resterebbe piu'
   alta dello schermo, tagliando i due pulsanti proprio a chi deve premerli.
   svh misura l'altezza minima, cioe' il caso peggiore.

   min-height evita l'altro estremo: su una finestra bassa e larga — un
   portatile con molte barre aperte — 100svh puo' scendere sotto i 400 px e il
   titolo finirebbe addosso ai pulsanti. */
.benvenuto {
  position: relative;
  height: 100svh;
  min-height: 28rem;
  display: grid;
  /* `center start`: centrato in verticale, appoggiato a sinistra in
     orizzontale. Il triskele dell'immagine sta al centro, e il testo sopra ci
     si perdeva dentro: spostandolo di lato il marchio resta leggibile come
     disegno e la scritta ha un fondo piu' quieto su cui posarsi. */
  place-items: center start;
  overflow: hidden;
  /* Il colore di fondo e' quello dell'angolo dell'immagine, campionato: se il
     file tarda ad arrivare non c'e' un lampo bianco prima del crema. */
  background: #f6f2ea center / cover no-repeat;
  background-image: image-set(
    url('/assets/images/benvenuto.webp') type('image/webp'),
    url('/assets/images/benvenuto.jpg') type('image/jpeg')
  );
}

/* NESSUN VELO, ed e' la differenza con la soglia di agosto: li' il fondo era
   un video scuro e il testo chiaro, quindi serviva una velatura per staccare.
   Qui il fondo e' un acquerello chiarissimo e il testo e' l'inchiostro del
   sito, che ci sta sopra con margine.

   Misurato sui PIXEL e non sui token, perche' il fondo e' un'immagine e non si
   legge da una variabile: campionata la fascia dietro il titolo prendendo il
   pixel PIU' SCURO, che e' il caso peggiore per un testo scuro. Il numero sta
   nel commit. */
.benvenuto-contenuto {
  position: relative;
  text-align: left;
  /* Il rientro cresce con la finestra invece di restare fisso: su un telefono
     6vw sono ~23 px, su un desktop largo ~90, che e' la stessa aria in
     proporzione. Il minimo tiene il testo staccato dal bordo sui formati
     stretti, il massimo gli impedisce di finire a meta' schermo su un monitor
     molto largo. */
  padding: var(--space-lg) clamp(1.5rem, 6vw, 6rem);
  max-width: 34rem;
}

/* Il titolo e' l'unica cosa grande della schermata, e cresce con la finestra:
   da 3rem su un telefono stretto fino a 7rem su un desktop. clamp e non una
   media query perche' fra i due estremi non c'e' un salto da governare. */
/* PIU' PICCOLO DI PRIMA — era clamp(3rem, 11vw, 7rem), cioe' fino a 112 px.
   A quella misura, centrato sul triskele, il titolo era l'unica cosa che si
   vedeva e il disegno sotto spariva. Spostato di lato non deve piu' gridare
   per farsi leggere: 68 px al massimo bastano, e lasciano respirare
   l'acquerello. */
.benvenuto-titolo {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.5vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--color-primary);
  margin: 0 0 var(--space-lg);
}

/* La seconda riga va a capo da sola restando dentro la stessa frase: e' uno
   <span> a blocco, non un secondo paragrafo. Chi legge a voce sente «Welcome
   col nome del marchio di seguito, chi guarda le vede impilate. */
.benvenuto-titolo-seconda {
  display: block;
}

.benvenuto-scelte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: flex-start;
}

/* I due pulsanti hanno la stessa larghezza minima perche' la scelta si legga
   come una scelta fra pari, non come una principale e una di ripiego. */
.benvenuto-btn {
  min-width: 15rem;
  justify-content: center;
}

/* Il pulsante spento non e' grigio-su-grigio: resta leggibile e dichiara di
   non essere premibile con l'opacita' e il cursore. Un comando disabilitato
   che non si legge piu' e' un comando che sembra rotto. */
.benvenuto-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* UN VELO CHIARO, LEGGERISSIMO. Non serviva alla prima misura — con
   l'inchiostro del sito sul crema il contrasto passa — ma serve alla
   SECONDA: `cover` ritaglia l'immagine in modo diverso a ogni formato, e
   quello che finisce dietro le lettere cambia con la finestra. Misurato a
   testo nascosto, prendendo ogni volta il pixel piu' scuro della fascia del
   titolo: 3,47:1 su 1280 px, 6,80:1 su 500. Il primo passa per il testo
   grande (soglia 3:1) ma con margine sottile, e non e' il minimo possibile:
   e' solo il minimo delle due larghezze che ho provato.

   Il velo e' crema, non nero: schiarisce invece di scurire, quindi lavora
   nella stessa direzione dell'acquerello e non lo spegne. Radiale e centrato
   sul contenuto, trasparente ai bordi: dove non c'e' testo l'immagine resta
   quella che e'. */
.benvenuto::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    /* Centrato al 30% e non al 50%: il velo serve a far leggere il testo, e il
       testo si e' spostato a sinistra. Lasciato al centro avrebbe schiarito il
       triskele — che non ne ha bisogno — e non la fascia che conta. */
    46% 38% at 30% 50%,
    rgba(250, 248, 245, 0.62) 0%,
    rgba(250, 248, 245, 0.34) 58%,
    rgba(250, 248, 245, 0) 100%
  );
}

/* DENTRO IL GUSCIO L'ALTEZZA E' UN'ALTRA. Sulla pagina autonoma il benvenuto
   ha tutto lo schermo, e 100svh e' esatto. In cima alla home invece sopra c'e'
   la testata fissa: 100svh piene la spingerebbero oltre il bordo, e i pulsanti
   finirebbero sotto la piega proprio a chi deve premerli — lo stesso difetto
   che svh serviva a evitare, rientrato da un'altra porta.

   `body:not(.pagina-nuda)` e non una classe nuova sulla sezione: il markup e'
   condiviso fra le due pagine e non deve sapere dove si trova. Lo sa il corpo
   del documento, che e' gia' marcato dal layout. */
body:not(.pagina-nuda) .benvenuto {
  height: calc(100svh - var(--header-height));
  min-height: 24rem;
}

/* ============================================================
   Dentro la home: a tutto schermo, e poi si scosta
   ============================================================

   La proprietaria l'ha chiesto senza cornice anche sulla radice: niente
   testata, niente barra laterale. La strada scelta NON sposta la home su un
   altro indirizzo — quella resta a `/`, una schermata piu' sotto, e i motori
   continuano a trovarla dove l'hanno sempre trovata.

   COME FA A COPRIRE LA CORNICE SENZA JAVASCRIPT. Il benvenuto resta nel flusso
   normale del documento, ma esce dai suoi confini in tre mosse:

     - `margin-top` negativo pari all'altezza della testata: il guscio ha un
       margine superiore che gli lascia spazio, e qui si annulla, cosi' il
       benvenuto comincia dal bordo alto della finestra;
     - `margin-left` negativo pari alla barra laterale, con la larghezza
       aumentata dello stesso valore: copre anche la colonna di sinistra;
     - `z-index` sopra la testata, che e' `position: fixed` e altrimenti
       resterebbe disegnata sopra.

   E SI SCOSTA DA SOLO. Non serve nessun meccanismo per farlo sparire: sta nel
   flusso, quindi scorrendo — o premendo il pulsante, che porta all'ancora
   dell'eroe — esce dallo schermo e la cornice ricompare al suo posto.

   E' il motivo per cui NON e' `position: fixed`: con quello sarebbe rimasto
   incollato davanti per sempre, e per toglierlo sarebbe servito :has() o del
   JavaScript. Una schermata che si supera scorrendo non ha bisogno di essere
   spenta.
*/
body:not(.pagina-nuda) .benvenuto {
  height: 100svh;
  min-height: 26rem;
  position: relative;
  /* 150: sopra la testata, che sta a 100 e altrimenti resterebbe disegnata
     davanti; sotto i pannelli di carrello e menu (200 e 300), che mentre il
     benvenuto e' a schermo non possono essere aperti perche' i loro comandi
     stanno nella testata coperta. Il numero non e' scelto a occhio: sono i
     valori che components.css usa gia'. */
  z-index: 150;
  margin-top: calc(-1 * var(--header-height));
  margin-left: calc(-1 * var(--aside-width));
  width: calc(100% + var(--aside-width));

  /* IL MARGINE SOTTO RIMETTE A POSTO IL RESTO DELLA PAGINA, e senza di lui
     questa regola era una riparazione che ne rompeva un'altra: il margine
     NEGATIVO sopra non sposta solo il benvenuto, tira su tutto cio' che
     segue: l'eroe e ogni sezione sotto finivano ottantotto pixel piu' in
     alto, cioe' sotto la testata fissa. Visto scorrendo, non leggendo il
     CSS. Qui si restituisce esattamente quello che si e' tolto, quindi il
     benvenuto parte dal bordo alto della finestra e per il resto della pagina
     e' come se non fosse mai uscito dai suoi confini. */
  margin-bottom: var(--header-height);
}

/* L'ancora si ferma SOTTO la testata. Senza, il bordo alto dell'eroe va a
   coincidere col bordo alto della finestra, dove pero' c'e' la testata fissa:
   il titolo arriverebbe coperto. scroll-margin-top e' la riga che dice al
   browser di lasciare quello spazio quando salta a un'ancora. */
#portale {
  scroll-margin-top: var(--header-height);
}

/* Sotto i 901 px la barra laterale non c'e' (shell.css la spegne e la griglia
   torna a una colonna): senza questa riga il benvenuto si sposterebbe a
   sinistra di 190 px inseguendo una colonna che non esiste. */
@media (max-width: 900px) {
  body:not(.pagina-nuda) .benvenuto {
    margin-left: 0;
    width: 100%;
  }
}

/* LA DISSOLVENZA IN BASSO, perche' scorrendo non sembri una tapparella.

   Il benvenuto e' alto quanto la finestra e finisce di netto: passandolo, il
   bordo inferiore dell'immagine scorre come una linea orizzontale dura sopra
   la pagina. Qui l'ultimo quarto sfuma nel colore che sta sotto, cosi' il
   passaggio non ha un bordo da vedere.

   IL COLORE E' SCRITTO PER ESTESO nel primo estremo, `rgba(248, 244, 240, 0)`,
   e non `transparent`: sono lo stesso colore a opacita' zero solo se lo si
   dice: `transparent` vale rgba(0,0,0,0), cioe' NERO trasparente, e nei punti
   intermedi la sfumatura passa per un grigio sporco. E' il classico alone che
   si vede in mezzo a una dissolvenza e non si spiega.

   Il valore e' quello di --color-surface, che e' il fondo sia del corpo sia
   dell'eroe qui sotto: scritto a mano perche' dentro rgba() una variabile non
   si puo' spezzare nei suoi tre numeri. Se un giorno la palette cambia, questa
   riga va cambiata con lei — per questo il colore e' nominato qui accanto.

   Le tre fermate non sono lineari: una rampa dritta si vede partire, perche'
   l'occhio nota il punto in cui l'opacita' comincia a crescere. Con la
   fermata di mezzo piu' bassa del punto medio la salita e' lenta all'inizio e
   rapida alla fine, e l'attacco sparisce.

   Solo dentro il guscio: sulla pagina autonoma sotto non c'e' niente, il
   bordo inferiore e' quello della finestra e non c'e' nessuna giunzione da
   nascondere. */
body:not(.pagina-nuda) .benvenuto::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26vh;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(248, 244, 240, 0) 0%,
    rgba(248, 244, 240, 0.35) 55%,
    rgba(248, 244, 240, 0.85) 82%,
    #f8f4f0 100%
  );
}

/* ============================================================
   Il comando per zittire il brano, in testata
   ============================================================

   NON STA PIU' SUL BENVENUTO. C'era, come pillola sotto le due porte con
   scritto «Turn sound on»: brutta, e soprattutto fuori posto — sulla schermata
   d'ingresso il suono non e' ancora partito, quindi era un comando che
   annunciava qualcosa invece di governarlo.

   Adesso compare in testata solo DOPO che la musica e' partita, e lo costruisce
   il JavaScript: non e' scritto nel markup e nascosto col CSS, perche' un
   pulsante che sta li' anche quando non c'e' niente da zittire e' un ingombro.

   Lampeggia piano per farsi trovare: e' comparso da solo dentro una testata
   che chi guarda conosce gia', e senza un movimento resterebbe un'icona in
   piu' fra le altre. Il battito e' lento — quasi tre secondi per ciclo — e non
   scende mai sotto il mezzo tono: un lampeggio secco e' un allarme, questo
   deve essere un richiamo. */
.testata-muto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  animation: respiro-muto 2.8s ease-in-out infinite;
}

.testata-muto svg {
  width: 22px;
  height: 22px;
}

.testata-muto:hover {
  color: var(--color-link);
}

@keyframes respiro-muto {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Premuto: si spegne e se ne va. La transizione e' corta perche' il gesto e'
   gia' stato fatto — un pulsante che resta li' mezzo secondo dopo il clic
   sembra non aver risposto. L'animazione si ferma, o continuerebbe a pulsare
   mentre svanisce. */
.testata-muto--via {
  animation: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.24s ease, transform 0.24s ease;
  pointer-events: none;
}

/* Chi ha chiesto meno movimento non riceve il lampeggio: l'icona resta ferma e
   piena, che si vede lo stesso. */
@media (prefers-reduced-motion: reduce) {
  .testata-muto {
    animation: none;
  }
}