/* ═══════════════════════════════════════════════════════════════════════════
   moto.css — vestizione degli effetti di moto.js

   Va accanto a moto.js. I colori non sono scritti qui: arrivano dai token del
   tema, così lo stesso effetto cambia pelle da una categoria all'altra senza
   toccare una riga.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-moto="magnetica"] {
  position: relative;
  /* Le carte hanno z-index proprio, e il testo deve stare sopra tutte senza
     entrare in gara con il resto della pagina: il contesto si chiude qui.
     (Senza isolation i figli a indice basso finivano sotto la sezione.) */
  isolation: isolate;
  overflow: clip;                        /* le carte escono e vengono tagliate */
  background: var(--moto-sfondo, var(--fondo, #FBFAF8));

  /* Le due misure limite della carta. Il minimo cresce meno del massimo:
     su schermo grande servono poche carte molto grandi e molte piccole. */
  --moto-min: clamp(72px, 9vw, 150px);
  --moto-max: clamp(140px, 23vw, 350px);
}

/* Il livello di fondo: sta sotto, non intercetta il puntatore, non esiste per
   chi naviga da tastiera o con un lettore di schermo. */
.moto-scena {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* La specificità di due classi serve davvero: nel tema .arco-carta ha
   position:relative, e una regola a classe singola verrebbe sovrascritta —
   le carte cadrebbero nel flusso e si sparpaglierebbero in diagonale.
   È una trappola già pagata una volta su arco.css. */
.moto-scena .moto-carta {
  position: absolute;
  translate: -50% -50%;                  /* left/top indicano il CENTRO */
  border-radius: var(--moto-raggio, 3px);
  overflow: hidden;
  will-change: transform;
  /* Nessuna transizione qui: il movimento lo governa il rAF di moto.js.
     Una transition in più litigherebbe con l'inseguimento e darebbe scatti. */
}

.moto-scena .moto-carta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Stesso trattamento delle foto del tema: le immagini di Google sono spesso
     troppo sature e piatte, e questa correzione le riporta in famiglia.
     Sta sull'immagine e non sulla carta perché la carta porta già il blur
     inline della profondità, che altrimenti cancellerebbe questo filtro. */
  filter: saturate(.88) contrast(1.06);
}

/* Un velo unico sopra tutte le carte, invece di uno per carta: costa un
   composito solo e tiene insieme la scena come se fosse una sola fotografia.
   Il gradiente scava il centro, dove sta il testo. */
.moto-scena::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  /* Quattro tappe, non due: il centro deve essere quasi pieno perché ci sta
     il nome grande, ma la sfumatura deve aprirsi in fretta — con due sole
     tappe le foto ai bordi restavano lattiginose e la scena perdeva forza.
     La tinta arriva dal tema come terna RGB, così cambia con la categoria. */
  background:
    radial-gradient(102% 74% at 50% 47%,
      rgba(var(--moto-tinta, 251,250,248), .94) 0%,
      rgba(var(--moto-tinta, 251,250,248), .84) 24%,
      rgba(var(--moto-tinta, 251,250,248), .38) 51%,
      rgba(var(--moto-tinta, 251,250,248), 0) 76%);
}

/* Il primo piano. Tutto quello che si legge o si tocca sta qui dentro. */
[data-moto="magnetica"] > :not(.moto-scena) {
  position: relative;
  z-index: 300;
}

/* Finché moto.js non ha costruito la scena, la griglia di ripiego è la pagina
   vera e propria: chi ha JavaScript spento vede le foto in griglia, come
   sempre. A costruzione avvenuta la griglia sparisce — le stesse immagini
   sono già nella scena, e non vengono scaricate una seconda volta. */
[data-moto="magnetica"].moto-attiva .moto-ripiego { display: none; }

/* Movimento ridotto: la disposizione sparsa resta — è già una composizione —
   e si spegne solo l'inseguimento. La pagina deve restare bella, non solo
   utilizzabile. */
@media (prefers-reduced-motion: reduce) {
  .moto-scena .moto-carta { will-change: auto; transform: none !important; }
}

/* ── telefono ────────────────────────────────────────────────────────────
   Qui l'istinto sbaglia. Rimpicciolire le carte su schermo stretto sembra
   prudente e invece uccide l'effetto: a 64px le foto smettono di essere foto
   e diventano macchie sbiadite. Su un telefono servono POCHE carte GRANDI —
   la più grande arriva a metà schermo — perché la scena si legge in verticale
   e una carta piccola non ha tempo di dire cosa raffigura mentre scorre. */
@media (max-width: 640px) {
  [data-moto="magnetica"] {
    --moto-min: 96px;
    --moto-max: 215px;
  }

  /* Il velo cambia forma insieme allo schermo. Su desktop è un'ellisse che
     scava il centro; qui è una fascia verticale, perché il testo occupa una
     colonna alta e stretta e un'ellisse larga sbiancherebbe anche i bordi,
     dove invece le foto devono restare visibili. */
  .moto-scena::after {
    background:
      linear-gradient(to bottom,
        rgba(var(--moto-tinta, 251,250,248), .30) 0%,
        rgba(var(--moto-tinta, 251,250,248), .88) 18%,
        rgba(var(--moto-tinta, 251,250,248), .94) 46%,
        rgba(var(--moto-tinta, 251,250,248), .58) 66%,
        rgba(var(--moto-tinta, 251,250,248), .18) 100%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EFFETTI ALLO SCORRIMENTO — aggiunti il 09/09/2026

   A differenza di `magnetica`, questi valgono anche su telefono: lo
   scorrimento c'è ovunque, è il puntatore che manca. Ogni effetto lascia la
   pagina in uno stato finito e leggibile anche se il JavaScript non parte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── raddrizza ─────────────────────────────────────────────────────────── */
.moto-raddrizza {
  display: block;
  margin-inline: auto;
  transform-origin: center center;
  will-change: transform, width;
}
/* Senza JavaScript resta dritta e a tutta larghezza: lo stato d'arrivo, non
   quello di partenza — una foto storta e stretta sembrerebbe un errore. */
.moto-raddrizza img { width: 100%; height: auto; display: block; }

/* ─── zoom ──────────────────────────────────────────────────────────────── */
.moto-zoom { will-change: transform; transform-origin: center center; }

/* ─── fascia ────────────────────────────────────────────────────────────── */
.moto-fascia {
  overflow: hidden;
  /* La fascia è più larga della pagina e ruotata: senza questo i suoi
     estremi rientrerebbero nello schermo e si vedrebbe dove finisce. */
  width: 118%;
  margin-inline: -9%;
}
.moto-pista {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  width: max-content;
  will-change: transform;
}
.moto-pista > * { flex: none; }

/* ─── rivela ────────────────────────────────────────────────────────────── */
.moto-parola {
  transition: opacity .18s linear;   /* smorza il passo fra un fotogramma e l'altro */
  will-change: opacity;
}
/* Senza JavaScript le parole non esistono come span e il testo si legge
   normalmente, a piena opacità. */

/* ─── parallasse ────────────────────────────────────────────────────────── */
.moto-parallasse { display: flex; align-items: center; }
.moto-parallasse > * { will-change: transform; }

/* ─── entra ─────────────────────────────────────────────────────────────── */
.moto-entra {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1), filter .7s cubic-bezier(.22,.61,.36,1);
}
.moto-entra.moto-dentro { opacity: 1; transform: none; }
.moto-entra.moto-sfoca { filter: blur(var(--moto-sfoca)); }
.moto-entra.moto-sfoca.moto-dentro { filter: none; }

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .moto-entra { opacity: 1; transform: none; filter: none; transition: none; }
  .moto-zoom, .moto-raddrizza, .moto-parallasse > * { transform: none !important; }
  .moto-parola { opacity: 1 !important; }
}