/* ==========================================================================
   PUMP — landing, direzione EDITORIALE E TIPOGRAFICA.

   ⚠️ Stava in linea dentro `index.html` fino al 2026-08-16: da quel giorno la
   landing esiste in due lingue (`index.html` e `en/index.html`) e in linea
   sarebbero due copie di 280 righe. Due copie divergono.

   ⚠️ Qui dentro sta SOLO ciò che è della landing: il conto alla rovescia, gli
   scatti, i cinque tipi, il movimento. Token, griglia, testata, negozi e
   listino stanno in `stile.css`, che vale per tutte le pagine — un colore
   scritto due volte diverge, ed è il modo in cui un sito si spacca in due.

   🔴 UN SOLO ACCENTO, IN UN PUNTO SOLO: il verde di `Accenti.palestra`
   (#4C7A5A) sta sulla parola VIA del conto alla rovescia, e in nessun altro
   posto del sito — nemmeno sul prezzo del Gold, che è tipografia e non
   colore. È il segnale di partenza, non un colore d'arredo.
   ========================================================================== */

/* 🔴 Sulla lastra l'inchiostro è scuro su scuro: il contorno di fuoco
   sparirebbe proprio sul comando più grande della pagina. */
.lastra :focus-visible { outline-color: var(--su-lastra); }

/* --------------------------------------------------------------------------
   APERTURA — la testata gigante, poi la lastra del conto alla rovescia
   -------------------------------------------------------------------------- */
.apertura { padding-top: clamp(1.5rem, 4vw, 3rem); }

.occhiello { display: block; margin-bottom: clamp(.75rem, 2vw, 1.5rem); }

.testata-gigante { overflow-x: clip; line-height: .78; }
.testata-gigante h1 {
  font-size: var(--t-testata);
  font-weight: 800;
  letter-spacing: -.055em;
  text-transform: uppercase;
  margin: 0;
  /* Il taglio ottico: una grottesca a questo corpo lascia aria a sinistra. */
  margin-left: -.045em;
}

.striscia {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--l);
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
  padding-top: var(--m);
  border-top: 2px solid var(--inchiostro);
}
.striscia li { display: flex; align-items: center; gap: var(--l); }
.striscia li + li::before {
  content: "";
  width: 1px;
  height: 1em;
  background: var(--riga);
}
/* ⚠️ Quando la striscia va a capo il divisorio resta appeso a inizio riga,
   e sembra un errore di stampa. Sotto i 34rem le tre voci si impilano e i
   divisori spariscono: non separano più niente. */
@media (max-width: 34rem) {
  .striscia { display: grid; gap: 2px; }
  .striscia li + li::before { display: none; }
}

/* La lastra: il conto alla rovescia sta su un fondo suo e a tutta larghezza,
   perché nell'app sta su tutto lo schermo. È l'unico blocco invertito. */
.lastra {
  background: var(--lastra);
  color: var(--su-lastra);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.lastra .pagina { padding-block: clamp(2rem, 6vw, 4rem); }

.conto {
  appearance: none;
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-align: center;
}
.conto .cifre {
  display: grid;
  place-items: center;
  font-size: var(--t-conto);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
}
.conto .cifre span {
  grid-area: 1 / 1;
  opacity: 0;
  /* I numeri sono vuoti, la partenza è piena: il contorno si riempie solo
     quando si parte davvero.
     🔴 Il colore del filetto è esplicito e NON `currentColor`: `currentColor`
     è il `color` di questo stesso elemento, cioè `transparent` — con quello
     il 3, il 2 e l'1 non si vedevano affatto. */
  color: transparent;
  -webkit-text-stroke: clamp(2px, .45vw, 6px) var(--su-lastra);
}
.conto .cifre .s-via {
  color: var(--via);
  -webkit-text-stroke: 0;
  letter-spacing: -.02em;
}
.conto[data-stato="tre"] .s-tre,
.conto[data-stato="due"] .s-due,
.conto[data-stato="uno"] .s-uno,
.conto[data-stato="via"] .s-via { opacity: 1; }

.conto .suggerimento { display: block; margin-top: var(--l); color: inherit; opacity: .55; }
.conto:hover .suggerimento { opacity: 1; }
.lastra .didascalia { text-align: center; color: inherit; opacity: .7; margin-bottom: var(--l); }

/* Il blocco che segue la lastra: la frase e i due negozi. */
.tesi h2 {
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  max-width: 14em;
  margin-bottom: var(--l);
}
.linea { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }

/* --------------------------------------------------------------------------
   GLI SCATTI — grandi, mai deformati: il rapporto è quello vero del telefono
   -------------------------------------------------------------------------- */
.telefono { margin: 0; }
.telefono img {
  width: 100%;
  /* 🔴 `height: auto` non è pignoleria: gli attributi `width`/`height`
     dell'`<img>` valgono come regole di presentazione, e senza questa riga
     l'altezza resta 2868px — `aspect-ratio` si applica solo quando una delle
     due misure è `auto`. Ogni scatto veniva alto quanto sei schermi. */
  height: auto;
  aspect-ratio: 1320 / 2868;
  /* `contain` e non `cover`: se un giorno arriva uno scatto di un telefono
     diverso si vede intero con una fascia, invece di essere tagliato. */
  object-fit: contain;
  object-position: top;
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  background: var(--pannello);
}
.telefono figcaption { margin-top: var(--m); }

/* Testo a sinistra, telefono a destra. Sotto i 62rem si impilano e lo scatto
   prende tutta la larghezza: è lì che si vede meglio. */
@media (min-width: 62rem) {
  .affianco { grid-template-columns: 9rem minmax(0, 1fr) var(--telefono); align-items: start; }
  /* A specchio, per rompere il ritmo: lo scatto passa a sinistra del testo. */
  .affianco.rovescia { grid-template-columns: 9rem var(--telefono) minmax(0, 1fr); }
  .affianco.rovescia .telefono { grid-column: 2; grid-row: 1; }
  .affianco.rovescia .testo { grid-column: 3; grid-row: 1; }
}

/* Tre scatti in fila raccontano una sequenza. Su schermo stretto la fila
   scorre di lato invece di allungare la pagina di tre schermate. */
.sequenza {
  display: flex;
  gap: var(--l);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s);
  margin-top: var(--xl);
  /* Lo scorrimento laterale è di questa fila, mai del corpo della pagina. */
  overscroll-behavior-x: contain;
}
.sequenza .telefono { flex: 0 0 min(70vw, 300px); scroll-snap-align: start; }

/* --------------------------------------------------------------------------
   ESECUZIONE — quattro momenti, chiave a sinistra e conseguenza a destra
   -------------------------------------------------------------------------- */
/* Le spaziature fra blocchi vengono dalla scala, e stanno in un posto solo:
   i margini si dichiarano qui invece che a spanne dentro ogni sezione. */
.momenti { margin-top: var(--xl); }
.guida + .guida { margin-top: var(--l); }
p + .dittico { margin-top: var(--xl); }

.momenti div {
  display: grid;
  gap: var(--xs);
  padding-block: var(--l);
  border-top: 1px solid var(--riga);
}
.momenti div:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 44rem) {
  .momenti div { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--xl); align-items: baseline; }
}
.momenti dt {
  font: 500 var(--t-mono)/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inchiostro);
}
.momenti dd { margin: 0; color: var(--fumo); }

/* --------------------------------------------------------------------------
   PROCLAMA — la seconda battuta tipografica della pagina
   -------------------------------------------------------------------------- */
/* ⚠️ La classe è esplicita di proposito: `.proclama p:first-child` pescava
   anche il marcatore della colonna di sinistra — che è un `<p>` e sta per
   primo — e lo stampava a corpo 80 sopra il testo. */
.grido {
  font-size: var(--t-proclama);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .98;
  text-transform: uppercase;
  max-width: 11em;
  margin-bottom: var(--l);
}
.proclama .guida { max-width: 30em; }

/* --------------------------------------------------------------------------
   I CINQUE TIPI — una tabella di righe, il nome a corpo pieno
   -------------------------------------------------------------------------- */
.tipi li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s) var(--l);
  padding-block: clamp(.35rem, 1.2vw, .8rem);
  border-top: 1px solid var(--riga);
}
.tipi li:first-child { border-top: 0; }
.tipi b {
  font-size: var(--t-tipo);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-transform: uppercase;
  transition: transform var(--breve) cubic-bezier(.2, .8, .2, 1);
}
.tipi li:hover b { transform: translateX(.12em); }
.tipi .coda { flex: 0 1 auto; }
.chiusa { margin-top: var(--l); }

/* --------------------------------------------------------------------------
   CHIUSURA
   -------------------------------------------------------------------------- */
.chiusura h2 {
  font-size: var(--t-h1);
  letter-spacing: -.035em;
  line-height: 1.02;
  margin-bottom: var(--l);
}

/* --------------------------------------------------------------------------
   MOVIMENTO — c'è, e serve a qualcosa. Con `prefers-reduced-motion` non
   esiste per niente: la pagina è già nel suo stato finale.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rivela {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 620ms cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 70ms),
      transform 620ms cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 70ms);
  }
  .js .rivela.presente { opacity: 1; transform: none; }

  /* L'apertura: la testata gigante si scopre da sinistra, come una scritta
     che esce dalla macchina da stampa. */
  .js .testata-gigante h1 { clip-path: inset(0 100% -0.2em 0); }
  .js.pronta .testata-gigante h1 {
    clip-path: inset(0 0 -0.2em 0);
    transition: clip-path 1000ms cubic-bezier(.16, .84, .24, 1) 120ms;
  }
  .js .linea > span { display: block; transform: translateY(105%); }
  .js .rivela.presente .linea > span {
    transform: none;
    transition: transform var(--scena) cubic-bezier(.16, .84, .24, 1) calc(var(--i, 0) * 90ms);
  }
  .conto .cifre span { transition: opacity 90ms linear; }
  .conto[data-stato="via"] .s-via { animation: batti 320ms cubic-bezier(.2, .8, .2, 1); }
  @keyframes batti {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
  }
}