/* =========================================================
   Impaginato finale — sistema a colonne condiviso
   Fonte: assets/pagine/{S,Tablet,L,XL}.png
   Token: tokens.css (§7.0 --container / --grid-margin)

   Va caricato PER ULTIMO: neutralizza i wrapper "demo" dei singoli
   componenti (.hero, .jurney, ecc. portano container+margini propri
   per le loro pagine isolate) in modo che la colonna la definisca una
   volta sola .site-section, uguale per tutti.

   La colonna e' verificata sulle tavole: il box "Get in touch" misura
   1088px centrati su XL.png (canvas 1728), 760px su Tablet/L.png
   (canvas 834) e 370px su S.png (canvas 402) — esattamente i valori
   di --container gia' presenti in tokens.css. Tutto il resto (thumb,
   titoli, deck, form) si allinea a quella stessa colonna.
   ========================================================= */

:root {
  /* Ritmo verticale unico fra le sezioni. Non e' un token nuovo:
     e' derivato dalla scala spaziature esistente (--space-8 = 64px). */
  --section-gap: var(--space-8);

  /* Navbar fissa: altezza reale del componente (navbar.css) + distanza
     dal bordo. Servono anche a scalare lo scroll-margin delle sezioni,
     cosi il click sulla nav non ferma la sezione sotto la barra. */
  --nav-height: 64px;   /* navbar.css, tier compatto */
  --nav-inset: var(--space-5);
  /* Spazio che la navbar fissa toglie al flusso: usato sia per il
     padding di compensazione su main sia per far combaciare #home con
     l'altezza reale della prima schermata (vedi #home piu sotto). */
  --nav-clearance: calc(var(--nav-height) + var(--nav-inset) * 2);

  /* Curva unica per gli ingressi (glide "iOS", la stessa gia' usata da
     card / jurney / about) e per lo scroll animato in js/navbar.js. */
  --page-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --reveal-duration: 700ms;

  /* Quanto il form "Get in touch" risale a sovrapporsi al collage About
     me sotto di lui, invece del normale --section-gap fra le sezioni:
     nella reference le due sezioni sono quasi a contatto e il form copre
     in parte l'ultima foto del collage. Multiplo di --space-8 (nessun
     token nuovo), cresce a XL perche' li' le foto del collage sono quasi
     il doppio (misurato in about-me.css). */
  --about-contact-overlap: var(--space-8);
}

@media (min-width: 1280px) {
  :root {
    --about-contact-overlap: calc(var(--space-8) * 1.5);
  }
}

@media (min-width: 600px) {
  :root {
    --nav-height: 56px; /* navbar.css, tier largo (solo etichette) */
    --nav-inset: var(--space-5);
  }
}

@media (min-width: 900px) {
  :root { --section-gap: calc(var(--space-8) * 1.5); }
}

@media (min-width: 1280px) {
  :root {
    --section-gap: calc(var(--space-8) * 2);
    /* Misurato su assets/pagine/XL.png: 43px dal bordo, --space-7 (48px)
       era il token piu' vicino ma dal vivo risultava troppo staccata
       dal bordo (feedback diretto): --space-6 (32px) resta piu' in
       alto, coerente col resto della gerarchia degli inset. */
    --nav-inset: var(--space-6);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------- Sfondo a quadretti ----------
   MISURATO sulle quattro tavole: celle di 55x55px IDENTICHE a ogni
   breakpoint (S/Tablet/L/XL), linee da 1px in #EFEFEF, cioe' il token
   --color-grey gia' esistente, su bianco. Copre tutta l'altezza della
   pagina (linee orizzontali a y = 0, 55, 110, ... in ogni tavola).

   Allineamento orizzontale: nelle tavole una linea cade ESATTAMENTE
   sulla mezzeria della pagina (XL: linee a 39..1689 su 1728, mezzeria
   864 = linea; Tablet/L: 32..802 su 834, mezzeria 417 = linea). La
   gradient disegna la linea sul bordo sinistro della cella, quindi la
   posizione va spostata di mezza cella (27.5px) oltre il 50% perche'
   la linea — e non il bordo della cella — finisca al centro.
   Le card bianche (form, thumb) coprono il reticolo esattamente come
   nelle tavole: nessuna maschera aggiuntiva. */
body {
  margin: 0;
  /* card.css imposta uno sfondo grigio per la sua pagina demo:
     nell'impaginato lo sfondo e' bianco come nelle tavole. */
  background-color: var(--color-white);
  background-image:
    linear-gradient(to right, var(--color-grey) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grey) 1px, transparent 1px);
  background-size: 55px 55px;
  background-position: calc(50% + 27.5px) 0;
  font-family: var(--font-family-base);
  color: var(--color-black);
}

/* ---------- La colonna ----------
   max-width = container + i due margini, cosi il CONTENUTO risulta
   largo esattamente var(--container): e' il modo per far coincidere il
   bordo del form, quello delle thumb e quello dei titoli, come chiesto
   (a XL: sezione 1184px centrata in 1728 -> contenuto 320..1408, che e'
   la posizione misurata del box del form nella tavola). */

.site-section {
  width: 100%;
  max-width: calc(var(--container) + var(--grid-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
  padding-block: var(--section-gap);
}

/* Il collage "About me" e' a tutta larghezza e tagliato ai bordi
   (vedi about-me.css): esce dalla colonna. */
.site-section--bleed {
  max-width: none;
  padding-inline: 0;
  /* Solo l'About (unica sezione --bleed) e' seguita dal form che le
     risale sopra (vedi #contacts sotto): non serve lo spazio pieno di
     --section-gap sotto il collage, il form lo colma lui stesso. */
  padding-bottom: var(--grid-margin);
}

.site-section--center {
  text-align: center;
}

/* Titolo di sezione: stesso token per tutte, per coerenza tipografica
   (le tavole variano fra ~40 e ~56px, ma la scala del sito ha la
   priorita' sulla fedelta' al singolo mockup). */
.site-section__title {
  margin: 0 0 var(--section-gap);
  text-align: center;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

/* ---------- Navbar fissa ----------
   Resta agganciata allo schermo mentre la pagina scorre.
   Posizione presa dalle tavole: in alto al centro da 600px in su
   (XL.png: y 43..97, centrata), in basso al centro sotto i 600px
   (S.png: la barra compatta a icone sta a ~20px dal fondo della
   prima schermata, che e' il posto giusto per il pollice).
   Il main compensa l'altezza tolta dal flusso. */

.site-nav {
  position: fixed;
  z-index: 200;
  bottom: var(--nav-inset);
  /* Larga quanto la barra e non quanto la pagina: una fascia a tutta
     larghezza intercetterebbe i click su cio' che le passa sotto (le
     foto trascinabili dell'About). Centrata con left+transform invece
     che con margin:auto perche' in position:fixed la larghezza e'
     shrink-to-fit. */
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - var(--grid-margin) * 2);
  display: flex;
  justify-content: safe center;
  /* .navbar e' inline-flex + flex-shrink:0: sui telefoni piu stretti
     scorre qui dentro invece di allargare la pagina */
  overflow-x: auto;
  /* overflow crea un clip rettangolare, e il backdrop-filter della
     navbar viene tagliato su QUELLO invece che sui suoi angoli tondi:
     si vedeva un rettangolo sfocato attorno alla pillola. Stesso raggio
     del componente, cosi il clip coincide con la sua forma. */
  border-radius: 999px;
}

.site-nav .navbar {
  /* Non nelle tavole: staccata dalla pagina, la barra ha bisogno di un
     appoggio d'ombra per non sembrare incollata al contenuto che le
     scorre sotto. Stessa ombra card del resto del sito, piu contenuta. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.18);
}

@media (min-width: 600px) {
  .site-nav {
    top: var(--nav-inset);
    bottom: auto;
  }
}

/* ---------- Velo sfocato progressivo (glass blur) ----------
   Nato per il pill Back di eppoi.html, richiesto identico anche qui,
   dietro la navbar: "questo stesso identico blur lo vorrei anche in
   homepage dietro la navbar". Vive in QUESTO foglio — condiviso da
   ogni pagina del sito — e non in css/eppoi.css, apposta: due copie
   della stessa ricetta in due fogli avrebbero garantito che prima o
   poi sarebbero diventate due ricette diverse, bastava correggerne una
   sola. Ogni pagina che lo usa aggiunge una SECONDA classe
   (.eppoi-velo in css/eppoi.css, .site-nav-velo qui sotto) che porta
   solo cio' che e' specifico di quel posto — posizione, altezza,
   z-index, verso della sfumatura. Struttura, sfocature, maschere e
   tinta restano qui, una volta sola.

   PERCHE' CINQUE STRATI. backdrop-filter sfoca in modo UNIFORME tutta
   la superficie dell'elemento a cui e' applicato: un solo strato con
   una sfocatura e un gradiente nel colore fa sfumare il COLORE, non la
   SFOCATURA, che finisce di colpo sul bordo — un blocco sfocato con un
   taglio netto (il primo tentativo su eppoi.html, corretto dopo un
   riscontro diretto: "sembra solo un blocco blurrato"). Una sfocatura
   che muore in modo graduale si ottiene solo impilando piu' strati,
   ognuno con il proprio raggio e la propria maschera che lo spegne a
   un punto diverso: dove si sovrappongono tutti, la sfocatura si somma;
   scendendo (o salendo, a seconda del verso) ne restano sempre meno.
   E' la "progressive blur" delle barre di sistema di iOS/macOS, e
   cinque strati sono il minimo perche' il passaggio non mostri i
   gradini.

   Il raggio piu' grande e' 3px — un ottavo del primo tentativo (24px),
   dimezzato tre volte di seguito, tutte per riscontro diretto
   ("eccessivamente blurrato", poi "e' ancora troppo blurrato, la
   meta'", poi ancora "e' ancora troppo invasivo, puoi diminuirlo
   ancora?"). Dimezzati tutti e cinque i raggi in proporzione ogni
   volta, non solo il piu' grande: dimezzare solo il primo avrebbe
   stretto la progressione fra gli strati invece di restringerla nel
   suo insieme. Il quinto strato e' 0.25px: i browser lo accettano, ed
   e' l'ultimo gradino prima di sparire del tutto — sotto quella soglia
   la sfocatura non aggiunge piu' nulla che la maschera non stia gia'
   facendo da sola.

   --velo-direzione decide il VERSO della sfumatura (dove sta il bianco
   pieno, dove sta il trasparente): "to bottom" quando il controllo
   fisso sta in ALTO (il pill di eppoi.html, la navbar da 600px in su),
   "to top" quando sta in BASSO (la navbar sotto i 600px, css/page.css
   qui sopra). Il valore di ripiego e' "to bottom" perche' e' il caso
   di eppoi.html, che non lo dichiara mai esplicitamente. */
.velo-vetro {
  position: fixed;
  pointer-events: none;
}

.velo-vetro span {
  position: absolute;
  inset: 0;
  display: block;
}

/* Ogni strato: raggio che scende, maschera che si spegne sempre piu'
   lontano dal bordo pieno. La maschera non e' un vezzo — e' cio' che
   limita DOVE la sfocatura agisce: mascherare l'elemento maschera
   anche il suo backdrop-filter, ed e' l'unico appiglio che il CSS
   offre per rendere una sfocatura non uniforme. */
.velo-vetro span:nth-child(1) {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  mask-image: linear-gradient(var(--velo-direzione, to bottom), #000 0%, #000 12%, transparent 32%);
  -webkit-mask-image: linear-gradient(var(--velo-direzione, to bottom), #000 0%, #000 12%, transparent 32%);
}

.velo-vetro span:nth-child(2) {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  mask-image: linear-gradient(var(--velo-direzione, to bottom), #000 0%, #000 28%, transparent 48%);
  -webkit-mask-image: linear-gradient(var(--velo-direzione, to bottom), #000 0%, #000 28%, transparent 48%);
}

.velo-vetro span:nth-child(3) {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  mask-image: linear-gradient(var(--velo-direzione, to bottom), #000 0%, #000 44%, transparent 64%);
  -webkit-mask-image: linear-gradient(var(--velo-direzione, to bottom), #000 0%, #000 44%, transparent 64%);
}

.velo-vetro span:nth-child(4) {
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
  mask-image: linear-gradient(var(--velo-direzione, to bottom), #000 0%, #000 60%, transparent 80%);
  -webkit-mask-image: linear-gradient(var(--velo-direzione, to bottom), #000 0%, #000 60%, transparent 80%);
}

.velo-vetro span:nth-child(5) {
  backdrop-filter: blur(0.25px);
  -webkit-backdrop-filter: blur(0.25px);
  mask-image: linear-gradient(var(--velo-direzione, to bottom), #000 0%, #000 76%, transparent 100%);
  -webkit-mask-image: linear-gradient(var(--velo-direzione, to bottom), #000 0%, #000 76%, transparent 100%);
}

/* Il bianco sopra la sfocatura, non sotto: cosi' la velatura si legge
   come luce sul vetro invece che come una lastra bianca dietro cui
   qualcosa e' sfocato. La sua rampa segue quella del blur — entrambi
   arrivano a zero sullo stesso bordo. Il massimo era 0.3 (poi dimezzato
   a 0.15): con poco bianco e' la sfocatura a fare quasi tutto il lavoro
   di separazione, richiesta diretta la prima volta ("la sfumatura
   bianca deve essere al 30% non al 100%") e dimezzata la seconda
   insieme al blur ("e' ancora troppo invasivo, puoi diminuirlo ancora?
   anche il bianco.") — vetro, non vernice. */
.velo-vetro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--velo-direzione, to bottom),
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.11) 40%,
    rgba(255, 255, 255, 0.045) 72%,
    rgba(255, 255, 255, 0) 100%
  );
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* Senza sfocatura resterebbe solo il bianco velato al 15%, che da
     solo non separerebbe niente: qui diventa quasi opaco e fa lui il
     lavoro — stesso principio del fallback di .navbar qui sopra. */
  .velo-vetro::after {
    background: linear-gradient(
      var(--velo-direzione, to bottom),
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.92) 55%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}

/* .site-nav-velo: la posizione, non la ricetta (quella e' sopra). Segue
   .site-nav passo per passo — stesso fondo/cima, stessa altezza
   (--nav-clearance e' gia' "altezza barra + i due inset", la stessa
   formula che eppoi.html scrive a mano per il pill). z-index 199, un
   passo sotto la barra (200): sta fra la barra e il contenuto normale
   della pagina, mai sopra la prima. */
.site-nav-velo {
  inset: auto 0 0 0;
  height: var(--nav-clearance);
  z-index: 199;
  --velo-direzione: to top;
}

@media (min-width: 600px) {
  .site-nav-velo {
    inset: 0 0 auto 0;
    --velo-direzione: to bottom;
  }
}

/* Spazio per la barra: sopra da 600px in su, sotto sui telefoni. */
main {
  padding-bottom: var(--nav-clearance);
}

@media (min-width: 600px) {
  main {
    padding-top: var(--nav-clearance);
    padding-bottom: 0;
  }
}

/* Lo scroll da navbar si ferma sotto la barra, non dietro. */
.site-section {
  scroll-margin-top: var(--nav-clearance);
}

@media (max-width: 599px) {
  .site-section {
    scroll-margin-top: var(--space-5);
  }
}

/* ---------- Neutralizzazione dei wrapper demo ----------
   Questi elementi, nelle loro pagine isolate, si portano dietro
   container e margini propri: dentro l'impaginato la colonna e' gia'
   quella di .site-section, quindi qui si annullano per non applicarla
   due volte (che stringerebbe il contenuto sotto --container). */

.site-section > .hero,
.site-section > .jurney {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.site-section > .contact-form {
  max-width: none;
}

/* SOLO al ritaglio M il form NON riempie la colonna, ed e' l'unica
   eccezione alla regola qui sopra.

   E' l'unico ritaglio in cui la colonna mangia praticamente tutta la
   finestra: a 768px di larghezza la card ne occupa il 94%. Da quando
   dietro al form c'e' il fondale di "Get in touch"
   (js/presence/fondali.js) quello spazio serve — quei disegni sono
   composizioni fatte per stare NEI MARGINI, e senza margini restavano
   scaglie ai bordi. Riscontro del committente sulle tavole: «le uniche
   che non mi tornano sono quelle "m" in cui il box get in touch risulta
   troppo largo e non lascia vedere i disegni sotto, stringerei il box».

   551px non e' scelto a occhio: e' la larghezza a cui la card e'
   DISEGNATA nei mockup di questo ritaglio — i quattro Tablet.png in
   "assets/get in touch", canvas 834 — misurata dai pixel insieme al
   resto, vedi tools/misura-fondali.py. E' quindi la misura per cui
   quei quattro disegni sono stati composti: a 834px i margini tornano
   esattamente quelli del mockup, non un compromesso.

   Verso il basso si spegne da sola: sotto i ~650px la colonna e' gia'
   piu' stretta di 551 e il form torna a riempirla. Li' non c'e' margine
   da liberare, come non ce n'e' al ritaglio S — e infatti i disegni di
   quelle larghezze sono composti per stare SOPRA e SOTTO la card invece
   che di fianco.

   Da L in su non si tocca niente: la finestra e' gia' piu' larga della
   colonna, il margine c'e', e il fondale ci sta comodo. */
@media (min-width: 600px) and (max-width: 899px) {
  .site-section > .contact-form {
    max-width: 551px;
    /* Il form e' un blocco dentro un blocco: senza questo, stringendolo
       si incollerebbe a sinistra invece di restare al centro della
       colonna. */
    margin-inline: auto;
  }
}

/* ---------- Sezioni ---------- */

.section-works .card-list {
  margin: 0;
}

.section-jurney__cta-row {
  text-align: center;
}

/* Centrato verticalmente nella prima schermata, a ogni dimensione dello
   schermo — su richiesta diretta, invertendo la scelta precedente (il
   titolo restava in alto, ancorato al padding-top di .site-section, con
   lo spazio sotto segnalato dalla sola freccina): quel modello con un
   padding FISSO in cima a una sezione min-height:100vh si legge come
   centrato solo su schermi grandi, dove il padding e' una frazione
   piccola dell'altezza — restringendo il viewport (mobile, o una finestra
   bassa su desktop) lo stesso padding diventa una fetta sempre piu' grande
   dell'altezza disponibile e il testo scivola verso l'alto, che e'
   esattamente il difetto segnalato. display:flex + justify-content:center
   centra sullo spazio VERO che resta dopo il padding di .site-section, a
   qualunque altezza. */
#home {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Da 600px in su #home non e' alto quanto il viewport vero: e' alto
   100vh MENO --nav-clearance (vedi min-height piu' sotto), perche' quello
   spazio lo occupa gia' il padding-top di `main` prima di lui. Centrare
   con justify-content dentro QUEL riquadro pero' centra rispetto a un box
   che parte --nav-clearance px piu' in basso del vero inizio schermo —
   il risultato e' un contenuto spostato in basso di meta' di quello
   scarto rispetto al centro VERO del viewport (a XL, dove --nav-inset
   cresce a 32px, lo scarto e' abbastanza da notarsi: segnalato dal
   vivo). Si compensa risalendo il contenuto di quella meta' —
   margin-top: calc(-1 * NC/2) SUL FIGLIO CENTRATO NON basta: dentro un
   contenitore a justify-content:center un margine negativo sull'item
   sposta il risultato solo della META' del margine (l'altra meta' viene
   riassorbita nel calcolo dello spazio libero prima/dopo), quindi per
   ottenere uno spostamento reale di NC/2 il margine va messo a -NC
   intero, non -NC/2 — verificato dal vivo: con -NC/2 restava uno scarto
   residuo esatto di NC/4. */
@media (min-width: 600px) {
  #home > .hero {
    margin-top: calc(var(--nav-clearance) * -1);
  }
}

/* Piccolo indizio che sotto c'e' altro, ancorato al bordo della hero (non
   al testo): resta fermo in fondo alla prima schermata qualunque sia
   l'altezza del testo sopra, e scompare da solo scrollando, come tutto
   il resto della sezione — non serve altro JS. Puramente decorativo
   (aria-hidden, non e' un link: la navigazione resta la navbar). */
.hero__scroll-hint {
  position: absolute;
  left: 50%;
  /* Sotto i 600px la navbar e' fissa in fondo allo schermo (site-nav,
     sopra): var(--space-7) da sola ci finiva sotto, coperta. */
  bottom: var(--nav-clearance);
  transform: translateX(-50%);
  color: var(--color-grey-2);
  animation: heroScrollHint 1600ms ease-in-out infinite;
}

@media (min-width: 600px) {
  .hero__scroll-hint {
    /* Da 600px in su la navbar e' in alto: qui basta un margine fisso
       dal fondo vero della prima schermata. */
    bottom: var(--space-7);
  }
}

@keyframes heroScrollHint {
  0%, 100% {
    transform: translate(-50%, 0);
    opacity: 0.45;
  }
  50% {
    transform: translate(-50%, 6px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-hint {
    animation: none;
    opacity: 0.7;
  }
}

/* La hero deve occupare l'intera prima schermata: "Best works" non deve
   sbirciare gia' al caricamento, deve comparire solo scrollando. svh
   (small viewport height) invece di vh puro: su mobile vh include l'area
   che la barra degli indirizzi puo' coprire/scoprire, quindi con vh la
   sezione risulterebbe piu bassa del viewport reale nello stato piu
   compresso e "Best works" tornerebbe a sbirciare. */
#home {
  min-height: 100vh;
  min-height: 100svh;
}

/* Da 600px in su, main aggiunge gia' --nav-clearance di padding-top
   prima di #home (spazio per la navbar in alto): senza sottrarlo qui,
   #home finiva alto quanto lo schermo E spostato di quel tanto in piu'
   in basso, sforando oltre il fondo reale della prima schermata — la
   freccia sotto restava fuori dal viewport e lo scroll vuoto cresceva
   invece di ridursi. */
@media (min-width: 600px) {
  #home {
    min-height: calc(100vh - var(--nav-clearance));
    min-height: calc(100svh - var(--nav-clearance));
  }
}

/* Il form risale sopra il collage About invece di lasciare il normale
   gap fra sezioni: position+z-index perche' le foto del collage sono
   position:absolute e altrimenti la sovrapposizione avrebbe un ordine
   di stacking incerto (dipende dall'ordine nel DOM interno di .about,
   non da quello fra le due <section>). */
#contacts {
  position: relative;
  z-index: 10;
  padding-top: 0;
  margin-top: calc(var(--about-contact-overlap) * -1);
}

/* ---------- Ingresso allo scroll (emil-design-eng) ----------
   Non e' nelle tavole (che sono statiche): e' l'aggiunta che tiene
   insieme le sezioni mentre si scorre, invece di farle comparire di
   colpo. Regole d'uso rispettate:
     - si anima solo opacity + transform (niente layout);
     - una volta sola per elemento, non a ogni passaggio;
     - lo spostamento e' piccolo (12px): l'elemento arriva "da vicino",
       non entra volando;
     - la curva e' quella gia' usata dal resto del sito.

   Gli stili sono sotto .js: senza JavaScript non si nasconde nulla,
   la pagina resta leggibile. E [data-reveal] sta solo su elementi che
   non hanno gia' una transform propria (le card ruotate del deck e le
   foto trascinabili dell'About si rivelano tramite il contenitore). */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--reveal-duration) var(--page-ease-out),
    transform var(--reveal-duration) var(--page-ease-out);
}

/* Il collage About e le sue foto sono trascinabili: la loro transform
   e' gia' occupata dal drag, qui si rivela solo l'opacita'. */
.js [data-reveal="fade"] {
  transform: none;
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}