/*
  Un foglio di stile solo, per sei pagine.

  IL SITO È UNA DISCESA. Non è un vezzo: la pagina scende come scende
  un'immersione, e il fondo passa dal blu illuminato della superficie al buio.
  Sul bordo sinistro corre una scala di metri, e ogni sezione dichiara la propria
  quota. Chi arriva qui è un subacqueo e riconosce quel movimento prima di aver
  letto una parola — che è esattamente il momento in cui si decide se un sito
  parla la tua lingua o no.

  PERCHÉ È SCURO E BASTA, anche per chi tiene il sistema in chiaro. Un fondo
  chiaro spezzerebbe la metafora a metà, e le schermate dell'applicazione sono
  anch'esse scure: su bianco galleggerebbero come francobolli. È una scelta, non
  una dimenticanza, e vale la pena scriverlo qui perché fra un anno sembrerà una
  svista.

  NESSUN CARATTERE SCARICATO. Non è pigrizia: un font ospitato altrove è una
  richiesta a un terzo per ogni visita, cioè un dato che esce senza che nessuno
  l'abbia chiesto — su un sito che nella pagina della privacy promette il
  contrario. I caratteri di sistema, usati bene, non hanno niente da invidiare.

  NIENTE JAVASCRIPT. Le animazioni sono CSS: il profilo che si traccia usa
  `stroke-dashoffset`, le sezioni che compaiono usano `animation-timeline: view()`
  dentro un `@supports`, così dove non c'è resta tutto visibile invece di restare
  invisibile — che è l'errore che rende un sito vuoto sui browser vecchi. E
  `prefers-reduced-motion` spegne ogni movimento, perché a qualcuno fa star male.
*/

:root {
  /* La colonna d'acqua, dalla superficie al fondo. */
  --superficie: #0d3f6e;
  --dieci: #0a3057;
  --venti: #072341;
  --trenta: #05192f;
  --fondo-abisso: #04131f;

  --ciano: #43d6ff;
  --ciano-cupo: #1a8fb8;
  --riflesso: #9ddcff;
  --ambra: #ffb454;

  --testo: #eaf3fb;
  --testo-tenue: #9fb6cc;
  --bordo: rgba(157, 220, 255, 0.16);
  --vetro: rgba(255, 255, 255, 0.045);

  --misura: 34rem;
  --largo: 68rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  color: var(--testo);
  font:
    17px/1.65 -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  /*
    Il gradiente sta su `body` e non su un elemento fisso: così la profondità
    dipende da QUANTO È LUNGA la pagina, non dall'altezza della finestra. Una
    pagina corta è un'immersione bassa, una lunga scende davvero.
  */
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(157, 220, 255, 0.28), transparent 60%),
    linear-gradient(
      180deg,
      var(--superficie) 0%,
      var(--dieci) 18%,
      var(--venti) 40%,
      var(--trenta) 65%,
      var(--fondo-abisso) 100%
    );
  background-attachment: scroll;
  /*
    ► SENZA QUESTE DUE RIGHE IL GRADIENTE RICOMINCIA. ◄ Uno sfondo si ripete di
    sua natura: quando l'area da dipingere è più alta del riquadro del corpo —
    e in fondo alla pagina lo è — sotto l'abisso ricompariva una striscia di
    superficie, azzurra, come se il sito fosse finito e ne cominciasse un altro.
    `no-repeat` toglie la ripetizione e il colore di fondo riempie quel che
    resta col buio, che è la risposta giusta alla domanda «cosa c'è sotto».
  */
  background-repeat: no-repeat;
  background-color: var(--fondo-abisso);
  min-height: 100%;
}

html {
  background: var(--fondo-abisso);
}

/*
  I raggi di sole, solo in cima. Due strisce chiare inclinate, sfocate e quasi
  invisibili: si notano se le cerchi, e se non le cerchi fanno il loro lavoro
  lo stesso. `pointer-events: none` perché non devono intercettare niente.
*/
body::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 90vh;
  pointer-events: none;
  background:
    linear-gradient(96deg, transparent 34%, rgba(157, 220, 255, 0.1) 38%, transparent 42%),
    linear-gradient(84deg, transparent 58%, rgba(157, 220, 255, 0.07) 62%, transparent 67%);
  filter: blur(6px);
  z-index: 0;
}

.contenitore {
  position: relative;
  z-index: 1;
  max-width: var(--largo);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------- testata */

.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  flex-wrap: wrap;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-size: 18px;
  color: var(--testo);
  text-decoration: none;
}

.marchio img {
  width: 32px;
  height: 32px;
  display: block;
}

.navigazione {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
}

.navigazione a {
  color: var(--testo-tenue);
  text-decoration: none;
  transition: color 0.2s;
}

.navigazione a:hover {
  color: var(--riflesso);
}

.lingua {
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- apertura */

.apertura {
  padding: 4vh 0 2vh;
  max-width: 44rem;
}

.apertura h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -0.033em;
  margin: 0 0 20px;
  font-weight: 680;
  text-wrap: balance;
}

.apertura h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--ciano), var(--riflesso));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.occhiello {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.5;
  color: var(--testo-tenue);
  margin: 0 0 30px;
  max-width: 36rem;
  text-wrap: pretty;
}

.occhiello strong {
  color: var(--testo);
  font-weight: 620;
}

.pulsanti {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.pulsante {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 12px;
  border: 1px solid var(--bordo);
  color: var(--testo);
  text-decoration: none;
  font-size: 15px;
  font-weight: 560;
  background: var(--vetro);
  backdrop-filter: blur(8px);
  transition:
    transform 0.18s,
    border-color 0.18s,
    background 0.18s;
}

.pulsante:hover {
  transform: translateY(-2px);
  border-color: rgba(157, 220, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.pulsante-primario {
  background: linear-gradient(100deg, var(--ciano), var(--ciano-cupo));
  border-color: transparent;
  color: #04121d;
  font-weight: 660;
  box-shadow: 0 8px 30px rgba(67, 214, 255, 0.28);
}

.pulsante-primario:hover {
  background: linear-gradient(100deg, #63e0ff, #229ec9);
}

/* ------------------------------------------------------- il profilo in cima */

/*
  Il grafico che si traccia da solo. È la cosa più bella che l'applicazione
  produce, ed è l'unica immagine al mondo che un subacqueo riconosce a colpo
  d'occhio senza didascalia.

  La linea è una sola `path`: si disegna allungando il tratteggio, che è il
  trucco più vecchio e più solido che ci sia — nessuna libreria, nessuno script,
  e su un browser che non animasse resterebbe comunque disegnata.
*/
.profilo {
  position: relative;
  margin: 26px 0 10px;
}

.profilo svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.profilo .linea {
  fill: none;
  stroke: var(--ciano);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(67, 214, 255, 0.55));
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: traccia 3.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s forwards;
}

.profilo .area {
  fill: url(#sfumaturaProfilo);
  opacity: 0;
  animation: comparire 1.6s ease 2.2s forwards;
}

.profilo .griglia-linea {
  stroke: rgba(157, 220, 255, 0.13);
  stroke-width: 1;
}

.profilo text {
  fill: var(--testo-tenue);
  /*
    Quindici unità del viewBox, non undici: il grafico si restringe con la
    finestra, e su un telefono da 390 px undici diventavano quattro pixel veri,
    cioè una riga di puntini. Le dimensioni dentro un SVG che scala vanno
    scelte guardando lo schermo piccolo, non quello grande.
  */
  font-size: 15px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

.profilo .segno {
  opacity: 0;
  animation: comparire 0.9s ease 2.6s forwards;
}

.profilo .segno circle {
  fill: var(--ambra);
}

.profilo .segno text {
  fill: var(--ambra);
}

@keyframes traccia {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes comparire {
  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------- sezioni */

section {
  position: relative;
  padding: 6vh 0;
  border-top: 1px solid rgba(157, 220, 255, 0.08);
}

section:first-of-type {
  border-top: 0;
}

/*
  La scala dei metri. Ogni sezione dichiara la propria quota con
  `data-quota="-10 m"`, e qui diventa una tacca sul bordo sinistro. Sotto i
  1100 px sparisce invece di accavallarsi al testo: una decorazione che rende
  illeggibile il contenuto ha smesso di essere una decorazione.
*/
section[data-quota]::before {
  content: attr(data-quota) ' ────';
  position: absolute;
  left: -128px;
  top: calc(6vh + 6px);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(157, 220, 255, 0.34);
  white-space: nowrap;
}

@media (max-width: 1180px) {
  section[data-quota]::before {
    display: none;
  }
}

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  font-weight: 660;
  text-wrap: balance;
}

h3 {
  font-size: 1.06rem;
  margin: 0 0 7px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 16px;
  max-width: var(--misura);
  color: var(--testo-tenue);
  text-wrap: pretty;
}

p strong {
  color: var(--testo);
  font-weight: 620;
}

section > p:first-of-type {
  font-size: 1.08rem;
}

a {
  color: var(--riflesso);
}

/* ----------------------------------------------------------------- schede */

.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 16px;
  margin: 26px 0 0;
}

.riquadro {
  border: 1px solid var(--bordo);
  border-radius: 16px;
  padding: 22px;
  background: var(--vetro);
  backdrop-filter: blur(10px);
  transition:
    transform 0.2s,
    border-color 0.2s,
    background 0.2s;
}

.riquadro:hover {
  transform: translateY(-3px);
  border-color: rgba(157, 220, 255, 0.34);
  background: rgba(255, 255, 255, 0.075);
}

.riquadro p {
  margin: 0;
  font-size: 15px;
  color: var(--testo-tenue);
}

.riquadro .etichetta {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ciano);
  margin-bottom: 10px;
}

/* --------------------------------------------------------------- fusione */

.fusione {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin: 30px 0 12px;
}

.fusione-fonti {
  display: grid;
  gap: 12px;
}

.fonte,
.fusione-esito {
  border: 1px solid var(--bordo);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--vetro);
  font-size: 14px;
  color: var(--testo-tenue);
}

.fonte strong,
.fusione-esito strong {
  display: block;
  color: var(--testo);
  font-size: 15px;
  margin-bottom: 4px;
}

.fusione-esito {
  border-color: rgba(67, 214, 255, 0.45);
  background: linear-gradient(160deg, rgba(67, 214, 255, 0.14), rgba(67, 214, 255, 0.03));
  box-shadow: 0 10px 40px rgba(67, 214, 255, 0.14);
}

.fusione-freccia {
  font-size: 26px;
  color: var(--ciano);
  text-align: center;
}

.fonti-di,
.schema-didascalia {
  font-size: 13px;
  color: var(--testo-tenue);
  max-width: none;
}

@media (max-width: 720px) {
  .fusione {
    grid-template-columns: 1fr;
  }
  .fusione-freccia {
    transform: rotate(90deg);
  }
}

/* ------------------------------------------------------------- schermate */

.schermate {
  display: grid;
  /*
    Ventiquattro rem e non tredici: con tredici ci stavano quattro colonne, e una
    schermata da 1600 px larga 245 non è una schermata, è un francobollo. Meglio
    due colonne grandi che quattro illeggibili — chi guarda deve poterci leggere
    dentro, altrimenti tanto vale non metterle.
  */
  /*
    `min(24rem, 100%)` e non `24rem` secco: un minimo più largo della colonna
    disponibile non si comprime — SFONDA. Su un telefono da 390 px una traccia
    da 384 px più i margini faceva traboccare la pagina di lato, che è
    esattamente il difetto che questo sito ha già pagato una volta.
  */
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: 20px;
  margin-top: 28px;
}

.schermata {
  margin: 0;
}

.schermata img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--bordo);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}

.schermata figcaption {
  font-size: 13px;
  color: var(--testo-tenue);
  margin-top: 10px;
}

/*
  La prima schermata occupa tutta la riga, e NIENTE PIÙ.
  Il `max-width: 22rem` che stava qui veniva dal tempo in cui questa figura
  stava da sola sotto il titolo, fuori dalla griglia. Rientrata nella griglia,
  quel tetto la rimpiccioliva rispetto alle altre — e su un telefono, dove la
  griglia è una colonna sola, il risultato era un elenco di immagini di misure
  diverse, che è la prima cosa che si nota e l'ultima che si spiega.
*/
.vetrina {
  grid-column: 1 / -1;
  max-width: none;
}

/* ------------------------------------------------------------- evidenze */

.evidenza {
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--ciano);
  border-radius: 12px;
  padding: 18px 20px;
  background: var(--vetro);
  margin: 22px 0;
}

.evidenza p {
  margin: 0;
  max-width: none;
}

.avvertenza {
  border-left-color: var(--ambra);
  background: rgba(255, 180, 84, 0.07);
}

/* ---------------------------------------------------------------- piede */

.piede {
  border-top: 1px solid rgba(157, 220, 255, 0.1);
  padding: 30px 0 50px;
  font-size: 14px;
  color: var(--testo-tenue);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ------------------------------------------------- pagine di documento */

.documento {
  max-width: 46rem;
  padding-bottom: 40px;
}

.documento h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -0.028em;
  margin: 20px 0 8px;
}

.documento h2 {
  margin-top: 34px;
}

.documento .data {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--testo-tenue);
}

.documento p,
.documento li {
  max-width: none;
  color: var(--testo-tenue);
}

.indice {
  border: 1px solid var(--bordo);
  border-radius: 14px;
  padding: 18px 22px;
  background: var(--vetro);
  margin: 24px 0 10px;
}

.indice ul {
  margin: 0;
  padding-left: 20px;
}

/* -------------------------------------------- comparse legate allo scorrimento */

/*
  Dentro `@supports`, e mai fuori: il valore di partenza è «visibile», e solo
  dove il browser sa animare sullo scorrimento la sezione parte abbassata e
  risale. Il contrario — nascondere sempre e mostrare con l'animazione — è come
  si ottiene un sito completamente bianco su un browser di due anni fa.
*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    section > h2,
    .griglia,
    .fusione,
    .schermate,
    .evidenza {
      animation: risale linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
  }
}

@keyframes risale {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profilo .linea {
    animation: none;
    stroke-dashoffset: 0;
  }
  .profilo .area,
  .profilo .segno {
    animation: none;
    opacity: 1;
  }
}

/* I due riquadri della fusione elencano righe, non frasi: ogni voce a capo. */
.fonte span,
.fusione-esito span {
  display: block;
}

.fonte strong,
.fonte b,
.fusione-esito strong,
.fusione-esito b {
  display: block;
  color: var(--testo);
  font-size: 15px;
  margin-bottom: 6px;
  font-weight: 620;
}

/*
  Il richiamo finale: un blocco che chiude, non una sezione come le altre. È il
  punto più profondo della pagina, quindi è anche quello in cui la luce torna —
  un riquadro illuminato sul fondo scuro, perché è lì che si chiede qualcosa.
*/
.richiamo {
  border: 1px solid rgba(67, 214, 255, 0.3);
  border-radius: 20px;
  padding: 44px 32px;
  margin: 4vh 0 6vh;
  background: linear-gradient(160deg, rgba(67, 214, 255, 0.13), rgba(67, 214, 255, 0.02));
  box-shadow: 0 20px 70px rgba(67, 214, 255, 0.12);
  text-align: center;
}

.richiamo h2,
.richiamo p {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.richiamo .pulsanti {
  justify-content: center;
}

/*
  Le bolle. Tre, lente, quasi trasparenti, e solo in apertura: chi le nota
  sorride, chi non le nota non è disturbato. È il limite oltre il quale una
  metafora diventa un fastidio, e sta un passo prima.
*/
.bolle {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bolle span {
  position: absolute;
  bottom: -40px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(157, 220, 255, 0.5);
  background: rgba(157, 220, 255, 0.12);
  animation: sale linear infinite;
}

.bolle span:nth-child(1) {
  left: 12%;
  animation-duration: 17s;
}
.bolle span:nth-child(2) {
  left: 63%;
  width: 6px;
  height: 6px;
  animation-duration: 22s;
  animation-delay: 4s;
}
.bolle span:nth-child(3) {
  left: 84%;
  width: 12px;
  height: 12px;
  animation-duration: 26s;
  animation-delay: 9s;
}

@keyframes sale {
  from {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  to {
    transform: translateY(-120vh) translateX(18px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bolle {
    display: none;
  }
}

/* ============================================================ IL BATIMETRO */

/*
  Il profondimetro che segue lo scorrimento.

  È un nastro di numeri dentro una finestrella alta una riga: mentre la pagina
  scende, il nastro sale, e nella finestrella si legge la quota. Non è una barra
  di avanzamento travestita — è la stessa informazione, detta nella lingua di
  chi guarda.

  DENTRO `@supports`, E NASCOSTO ALTRIMENTI. Un profondimetro fermo su «0 m»
  mentre la pagina scorre è peggio di nessun profondimetro: dichiara una cosa
  falsa. Dove il browser non sa animare sullo scorrimento, sparisce.
*/
.batimetro {
  display: none;
}

@supports (animation-timeline: scroll()) {
  @media (min-width: 1180px) and (prefers-reduced-motion: no-preference) {
    .batimetro {
      display: flex;
      position: fixed;
      right: 26px;
      top: 50%;
      transform: translateY(-50%);
      align-items: center;
      gap: 8px;
      z-index: 3;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 13px;
      color: rgba(157, 220, 255, 0.75);
      pointer-events: none;
    }

    .batimetro-quadro {
      height: 26px;
      overflow: hidden;
      position: relative;
      width: 34px;
      text-align: right;
      /* Sfuma sopra e sotto: il numero entra ed esce invece di apparire di colpo. */
      mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent);
    }

    .batimetro-nastro {
      display: flex;
      flex-direction: column;
      animation: scende linear both;
      animation-timeline: scroll(root);
    }

    .batimetro-nastro span {
      height: 26px;
      line-height: 26px;
    }

    .batimetro::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--ciano);
      box-shadow: 0 0 12px var(--ciano);
      order: -1;
    }
  }
}

@keyframes scende {
  from {
    transform: translateY(0);
  }
  to {
    /* Dieci passi da 26 px: la finestrella parte da 0 e finisce su 50 m. */
    transform: translateY(-260px);
  }
}

/* =============================================================== LE PAGINE */

/*
  L'indice dell'applicazione, subito sotto il profilo.

  Prima qui c'era una fascia di numeri — sette formati, sedici compartimenti,
  zero pubblicità — ed era vera ma raccontava il COME. Chi arriva su un sito di
  logbook si chiede prima un'altra cosa: «che cosa ci trovo dentro?». Sei nomi
  con una riga ciascuno rispondono a quella, e nell'ordine in cui si usano
  davvero: prima si guarda l'elenco, alla fine si prepara l'immersione dopo.
*/
.pagine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 14px;
  margin: 34px 0 10px;
  padding: 0;
  list-style: none;
}

.pagine li {
  border: 1px solid var(--bordo);
  border-radius: 16px;
  padding: 20px;
  background: var(--vetro);
  backdrop-filter: blur(10px);
  transition:
    transform 0.2s,
    border-color 0.2s,
    background 0.2s;
}

.pagine li:hover {
  transform: translateY(-3px);
  border-color: rgba(157, 220, 255, 0.34);
  background: rgba(255, 255, 255, 0.075);
}

.pagine b {
  display: block;
  font-size: 1.12rem;
  font-weight: 640;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  background: linear-gradient(120deg, var(--riflesso), var(--ciano));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pagine span {
  display: block;
  font-size: 14px;
  color: var(--testo-tenue);
  line-height: 1.45;
}

/* ====================================================== il termoclino */

/*
  Il bordo fra una sezione e l'altra non è una riga grigia: è una lama di luce
  che sfuma ai due lati, come il termoclino visto da sotto. Costa un
  pseudo-elemento e cambia il carattere di tutta la pagina.
*/
section {
  border-top: 0;
}

section + section::after,
section::after {
  content: none;
}

section:not(:first-of-type)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(157, 220, 255, 0.34) 22%,
    rgba(157, 220, 255, 0.34) 78%,
    transparent
  );
}

/* ================================================= le schermate, incorniciate */

/*
  Le schermate stavano nude su fondo scuro e sembravano ritagli. Adesso hanno
  una cornice di vetro e un'inclinazione appena percettibile che si raddrizza
  quando ci passi sopra: il movimento dice «è una cosa vera, guardala» senza
  scriverlo.
*/
.schermata {
  perspective: 1000px;
}

.schermata img {
  transform: rotateY(3.5deg) rotateX(1.5deg);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s;
  border-radius: 16px;
  border: 1px solid rgba(157, 220, 255, 0.22);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.55),
    0 0 0 6px rgba(255, 255, 255, 0.02);
}

.schermate .schermata:nth-child(even) img {
  transform: rotateY(-3.5deg) rotateX(1.5deg);
}

.schermata img:hover {
  transform: none;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.6),
    0 0 0 6px rgba(67, 214, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .schermata img,
  .schermate .schermata:nth-child(even) img {
    transform: none;
    transition: none;
  }
}

/*
  L'inclinazione è un vezzo da schermo largo: là c'è aria intorno e si legge
  come profondità. Su un telefono, dove l'immagine tocca i due bordi, la stessa
  rotazione non dice «profondità» — dice «storto», e sembra un difetto.
*/
@media (max-width: 900px) {
  .schermata img,
  .schermate .schermata:nth-child(even) img {
    transform: none;
  }
}

.vetrina img {
  transform: none !important;
}

/* ================================================== le sezioni di sola prosa */

/*
  IL FONDO DELLA PAGINA ERA VUOTO. Le ultime sezioni sono testo e basta, e su
  uno schermo largo diventavano una colonna stretta a sinistra con mezza pagina
  di buio a destra: la parte più profonda dell'immersione era anche la più
  sciatta.

  Qui il titolo passa in una colonna sua, a sinistra, e ci resta appiccicato
  mentre il testo scorre — così la larghezza è occupata da una struttura invece
  che dal vuoto, e mentre leggi sai sempre di cosa si sta parlando. Sotto i 900
  px torna una colonna sola, perché due colonne su un telefono sono due colonne
  strette.
*/
section.prosa {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 16px 48px;
  align-items: start;
}

section.prosa > h2 {
  grid-column: 1;
  position: sticky;
  top: 28px;
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--riflesso);
}

section.prosa > *:not(h2) {
  grid-column: 2;
}

section.prosa p {
  max-width: 40rem;
}

@media (max-width: 900px) {
  section.prosa {
    grid-template-columns: 1fr;
  }
  section.prosa > h2 {
    position: static;
  }
  section.prosa > *:not(h2) {
    grid-column: 1;
  }
}

/*
  Il fondale. Un alone appena percettibile in fondo alla pagina: senza, l'ultimo
  schermo è nero e sembra che il sito sia finito prima del previsto.
*/
.piede {
  position: relative;
}

.piede::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: min(90vw, 60rem);
  height: 16rem;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(67, 214, 255, 0.09), transparent 70%);
  pointer-events: none;
}