/* Alba Moto — foglio di stile della pagina di presentazione.
 *
 * Scritto a mano, senza Tailwind e senza passo di compilazione: la pagina è una
 * sola e questo file si carica sul server così com'è.
 *
 * L'impianto è una scena notturna in prospettiva: una strada che fugge verso
 * l'orizzonte, dentro la prima schermata. Da qui discende il resto — fondo
 * scuro, pannelli quasi opachi, testo chiaro — perché su una strada notturna un
 * riquadro bianco pieno sarebbe un buco nello schermo. Finita l'apertura non
 * resta niente di fisso né di animato: si scorre e basta.
 */

:root {
  /* Dichiarare che la pagina è GIÀ scura. Senza questa riga Chrome su Android,
     quando l'utente attiva il tema scuro per i siti, decide da sé di
     «scurire» la pagina — e siccome il suo algoritmo inverte le luminosità, su
     una pagina già notturna fa il contrario: fondo chiarissimo e testo bianco
     su bianco, cioè invisibile. Con `color-scheme: dark` il browser sa che non
     c'è niente da convertire e lascia stare. */
  color-scheme: dark;

  --accento: #c8102e;
  --accento-chiaro: #ff2f4c;
  --fondo: #0b0c0f;
  --pannello: rgba(22, 25, 31, .88);
  --bordo: rgba(255, 255, 255, .11);
  --bordo-vivo: rgba(255, 255, 255, .2);
  --testo: #eef0f3;
  --testo-tenue: rgba(238, 240, 243, .6);
  --raggio: 14px;
  --carattere: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --colonna: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--carattere);
  font-size: 17px;
  line-height: 1.6;
  color: var(--testo);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* le inclinazioni 3D sbordano di qualche pixel */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.contenitore { width: min(100% - 44px, var(--colonna)); margin-inline: auto; }

/* Collegamento per chi naviga da tastiera: invisibile finché non riceve il fuoco. */
.salta {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accento); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.salta:focus { left: 0; }


/* ==========================================================================
   La scena: strada in prospettiva e moto che ci corre dentro
   ========================================================================== */

/* La scena vive dentro l'apertura e scorre via con lei.
 *
 * Prima era `position: fixed` dietro tutta la pagina, con le sezioni
 * semitrasparenti sopra: bella da vedere, e carissima. Un livello fisso a tutto
 * schermo sotto superfici traslucide obbliga il browser a ricomporre l'intera
 * finestra a ogni fotogramma di scorrimento, per tutta la lunghezza della
 * pagina — non solo dove la scena si vede. Su un telefono è la differenza fra
 * scorrere e trascinare.
 *
 * Adesso: finita l'apertura, non c'è più niente di fisso, niente di traslucido
 * e niente in movimento. Scorrere il resto della pagina non costa nulla. */
.mondo {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(120% 70% at 50% 34%, #24272f 0%, #101218 42%, var(--fondo) 100%);

  /* Le quattro misure della scena. Stanno qui e non sparse nelle regole perché
     movimento.js le rilegge da questo elemento per calcolare dove disegnare la
     moto: se cambiano, cambiano per tutti e due. Sono numeri puri, senza unità,
     così il JS può usarli senza doverli ripulire.

       --occhio        distanza fra l'occhio e lo schermo, in px. Più è piccola,
                       più la prospettiva è violenta.
       --inclinazione  di quanto è ribaltato all'indietro il piano stradale.
       --orizzonte     altezza del punto di fuga, in % della scena.
       --sporgenza     di quanto il bordo vicino della strada esce sotto la
                       scena, in % — serve perché la strada non finisca con un
                       taglio netto proprio dove si guarda. */
  --occhio: 620;
  --inclinazione: 79;
  --orizzonte: 40;
  --sporgenza: 6;

  perspective: calc(var(--occhio) * 1px);
  perspective-origin: 50% calc(var(--orizzonte) * 1%);
}

/* Bagliore rosso sull'orizzonte: fa da fondale caldo senza usare immagini. */
.mondo__cielo {
  position: absolute; left: 50%; top: 40%;
  width: min(1100px, 130vw); height: 460px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(200,16,46,.34), rgba(200,16,46,.08) 48%, transparent 72%);
  animation: respiro 6s ease-in-out infinite;
}
@keyframes respiro { 0%, 100% { opacity: .75 } 50% { opacity: 1 } }

/* Il bordo basso della scena: senza, la strada finirebbe con un taglio netto
   contro la sezione che segue. */
.mondo::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(to bottom, transparent, var(--fondo));
}

/* Il piano stradale. È largo e lungo migliaia di pixel: ribaltato di 79° quasi
   tutta quella lunghezza si schiaccia in poche decine di pixel verso
   l'orizzonte, ed è esattamente l'effetto che serve. Il perno sta sul bordo
   vicino (`transform-origin` in basso), così quel bordo resta a fondo schermo
   e il resto se ne va all'indietro. */
.pista {
  position: absolute;
  left: 50%; bottom: calc(var(--sporgenza) * -1%);
  /* Le misure del piano non entrano nel calcolo della prospettiva: contano solo
     per quanta superficie il browser deve disegnare. 4600×3400 sono già ~16
     milioni di pixel da comporre a ogni fotogramma — più in là non si va, e sul
     telefono si scende ancora (vedi la regola per gli schermi stretti). */
  width: var(--larghezza-strada, 4600px);
  margin-left: calc(var(--larghezza-strada, 4600px) / -2);
  height: var(--lunghezza-strada, 3400px);
  transform-origin: 50% 100%;
  transform: rotateX(calc(var(--inclinazione) * 1deg));
  /* Su iOS le trasformazioni 3D tendono a sfarfallare durante lo scorrimento:
     queste due righe tengono il piano su un livello di composizione suo. */
  backface-visibility: hidden;
  will-change: transform;
  /* In coordinate del piano l'alto è il lontano: lì la strada si dissolve
     invece di finire con un bordo netto in mezzo allo schermo. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
}

/* Asfalto: la carreggiata scura, le due strisce laterali, la mezzeria
   tratteggiata e le traversine. Scorre con una `translateY` — spostare un
   elemento costa al browser molto meno che ridisegnare uno sfondo, e a
   4600×3400 px la differenza si sente. Il passo dell'animazione è esattamente
   un modulo del tratteggio, così l'anello non si vede. La durata la regola
   --velocita, che il JS accorcia mentre si scorre. */
.pista__asfalto {
  position: absolute; left: 0; right: 0; top: -260px; bottom: 0;
  background:
    /* mezzeria tratteggiata */
    repeating-linear-gradient(to bottom, rgba(255,86,110,.95) 0 130px, transparent 130px 260px) 50% 0 / var(--mezzeria, 18px) 260px repeat-y,
    /* traversine dell'asfalto, appena accennate */
    repeating-linear-gradient(to bottom, rgba(255,255,255,.07) 0 3px, transparent 3px 260px),
    /* strisce laterali e carreggiata */
    /* In percentuale e non in pixel: la carreggiata resta la stessa frazione del
       piano qualunque larghezza gli si dia, e la larghezza del piano diventa un
       parametro libero — che è quello che serve per stringere la strada sul
       telefono senza ridisegnare la segnaletica. */
    linear-gradient(to right,
      transparent 0 25%,
      rgba(255,255,255,.6) 25.4% 25.9%,
      rgba(38,42,52,.96) 26.4% 73.6%,
      rgba(255,255,255,.6) 74.1% 74.6%,
      transparent 75%);
  animation: scorri var(--velocita, 1.5s) linear infinite;
}
@keyframes scorri { to { transform: translateY(260px); } }

/* La foschia sull'orizzonte. Sta davanti alla strada ma FUORI dal piano 3D, in
   coordinate di schermo: così può essere un velo semplice senza rimettere una
   proprietà di gruppo dentro `.pista`. Copre il bordo lontano della strada, che
   altrimenti finirebbe con una riga netta a metà schermo, e lascia passare solo
   i fari della moto quando è ancora in fondo. */
.mondo__foschia {
  position: absolute; inset: 0;
  /* Le soglie sono misurate: il bordo lontano della strada cade intorno al 31%
     dell'altezza, e da lì in giù la foschia deve schiarirsi in fretta, altrimenti
     si mangia anche la moto proprio mentre arriva. */
  background: linear-gradient(to bottom,
    var(--fondo) 0,
    var(--fondo) 29%,
    rgba(11,12,15,.93) 32.5%,
    rgba(11,12,15,.55) 38%,
    rgba(11,12,15,.2) 45%,
    transparent 55%);
}

/* Il veicolo NON sta dentro il piano stradale.
 *
 * Ci stava, all'inizio: bastava raddrizzarlo con una rotazione contraria e la
 * prospettiva del browser faceva tutto il resto. Solo che il piano dell'asfalto
 * è enorme, animato e quindi su un livello di composizione suo, e l'ordine con
 * cui il browser decide chi sta davanti a chi fra due superfici che si
 * incrociano non è affidabile: la moto veniva tagliata a metà dall'asfalto.
 *
 * Quindi la moto è un'immagine piatta, e dove disegnarla lo calcola
 * movimento.js con la stessa formula che userebbe il browser. Il risultato a
 * schermo è identico — verificato sui numeri — e non dipende più da come il
 * browser ordina i piani. */
.veicolo {
  position: absolute; left: 0; top: 0;
  width: 330px;
  opacity: var(--presenza, 0);
  will-change: transform, opacity;
}
.veicolo__moto { width: 100%; height: auto; display: block; overflow: visible; }

/* Gli aloni sfocati SOLO da vicino.
 *
 * Una sfocatura va ricalcolata a ogni fotogramma, perché la moto cambia scala
 * di continuo. Quando è in fondo alla strada è alta una trentina di pixel: a
 * quella misura il browser a volte non fa in tempo e salta il disegno per un
 * fotogramma — e a occhio la moto lampeggia. Da lontano quindi niente filtri;
 * tanto un alone su una sagoma di trenta pixel non si vedrebbe comunque.
 * La classe la mette movimento.js quando la scala supera la soglia. */
.veicolo--vicino .veicolo__moto {
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(200,16,46,.4));
}
/* Stesso motivo per il bagliore dei fari, che è una sfocatura dentro il disegno:
   `filter` come proprietà CSS ha la meglio sull'attributo di presentazione. */
.veicolo__fari { filter: none; }
.veicolo--vicino .veicolo__fari { filter: url(#faro); }

/* L'alone dei fari sull'aria davanti alla moto: è quello che si vede per primo
   quando è ancora in fondo alla strada. */
.veicolo__alone {
  position: absolute; left: 50%; top: 44%;
  width: 520px; height: 380px; margin: -190px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,238,200,.3), rgba(255,200,150,.1) 42%, transparent 70%);
  pointer-events: none;
}

/* L'ombra a terra sta dentro il disegno, non qui: così si scala insieme alla
   moto senza doverla riposizionare a ogni fotogramma. */


/* Con l'apertura fuori dallo schermo non c'è niente da guardare: si ferma tutto.
   La classe la mette movimento.js. Fermare un'animazione costa zero e toglie di
   mezzo tre cicli che altrimenti girerebbero anche mentre si legge il piè di
   pagina. */
.mondo--ferma .pista__asfalto,
.mondo--ferma .mondo__cielo,
.eroe--fuori .eroe__giu span { animation-play-state: paused; }


/* ==========================================================================
   Contenuto
   ========================================================================== */

/* Tutto quello che si legge sta davanti alla scena. */
.barra, main, .piede { position: relative; z-index: 1; }

/* ---------- Titoli: l'inclinazione è la firma «moto» di tutta la pagina ---------- */

.titolo-sezione {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-style: italic;
  margin: 0 0 12px;
  text-align: center;
  text-shadow: 0 6px 26px rgba(0,0,0,.7);
}
.titolo-sezione--sinistra { text-align: left; }

.titolo-sezione::after {
  content: "";
  display: block;
  width: 74px; height: 5px;
  margin: 16px auto 0;
  background: var(--accento);
  transform: skewX(-24deg);
  box-shadow: 0 0 22px rgba(200,16,46,.9);
}
.titolo-sezione--sinistra::after { margin-inline: 0; }

.sommario {
  text-align: center;
  max-width: 62ch;
  margin: 20px auto 46px;
  color: var(--testo-tenue);
  font-size: 18px;
  text-shadow: 0 2px 14px rgba(0,0,0,.9);
}

/* ---------- Bottoni ---------- */

.bottone {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 700; font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.bottone svg { width: 18px; height: 18px; fill: currentColor; }
.bottone--pieno { background: var(--accento); color: #fff; box-shadow: 0 10px 30px -8px rgba(200,16,46,.95); }
.bottone--pieno:hover { background: var(--accento-chiaro); transform: translateY(-2px); }
.bottone--vuoto { border-color: currentColor; color: inherit; background: rgba(11,12,15,.4); }
.bottone--vuoto:hover { background: currentColor; color: var(--fondo); transform: translateY(-2px); }
.bottone--grande { padding: 16px 30px; font-size: 17px; }

/* ---------- Barra in alto ---------- */

.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 26px;
  padding: 14px clamp(16px, 4vw, 40px);
  color: #fff;
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
/* Piena solo dopo l'apertura: sul titolo coprirebbe la scena per niente. */
/* Niente `backdrop-filter`: sfocare quello che passa sotto una barra fissa vuol
   dire rifare la sfocatura a ogni fotogramma di scorrimento, ed è una delle voci
   più care che ci siano su un telefono. Un fondo quasi opaco fa la stessa
   figura e non costa niente. */
.barra.compatta {
  background: rgba(11,12,15,.94);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
  padding-block: 9px;
}
.barra__marchio { display: flex; align-items: center; text-decoration: none; }
/* Il logo è un JPG di 262×163: oltre quella misura si vede la sgranatura,
   quindi non lo si ingrandisce mai troppo. L'altezza fissa evita che la barra
   sobbalzi mentre l'immagine si carica. */
.barra__marchio img { height: 56px; width: auto; border-radius: 8px; transition: height .3s ease; }
.barra.compatta .barra__marchio img { height: 44px; }
.barra__voci { margin-left: auto; display: flex; gap: 26px; }
.barra__voci a { text-decoration: none; font-weight: 600; font-size: 15px; opacity: .82; position: relative; padding-block: 4px; }
.barra__voci a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--accento); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.barra__voci a:hover { opacity: 1; }
.barra__voci a:hover::after { transform: scaleX(1); }

/* ---------- Apertura ---------- */

/* Nessuno sfondo: qui la scena si vede per intero, ed è il punto. */
.eroe {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 130px 22px 90px;
  perspective: 900px;
  perspective-origin: 50% 34%;
}

.eroe__scena {
  position: relative;
  text-align: center;
  max-width: 900px;
  transform-style: preserve-3d;
  /* --bx e --by li aggiorna movimento.js seguendo il puntatore: la scena si
     inclina verso il mouse come se fosse dietro un vetro. */
  transform: rotateX(calc(var(--by, 0) * -5deg)) rotateY(calc(var(--bx, 0) * 6deg));
  transition: transform .25s ease-out;
}

/* Le parti dell'apertura entrano una dopo l'altra, ruotando da sotto: dà
   l'avvio alla scena invece di presentarla già ferma. Ognuna resta poi sul
   proprio piano di profondità, che è --piano. */
@keyframes entra {
  from { opacity: 0; transform: translateZ(var(--piano, 0px)) translateY(34px) rotateX(34deg); }
  to   { opacity: 1; transform: translateZ(var(--piano, 0px)); }
}

/* Il logo su un piano più avanzato del titolo: ruotando la scena si stacca dal
   fondo invece di restarci appiccicato. */
.eroe__targa {
  --piano: 95px;
  display: inline-block;
  margin: 0 0 30px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--bordo-vivo);
  box-shadow: 0 34px 70px -26px #000;
  transform: translateZ(95px);
}
.eroe__targa img { width: 232px; height: auto; border-radius: 9px; display: block; }

.eroe__occhiello {
  --piano: 30px;
  margin: 0 0 18px;
  text-transform: uppercase; letter-spacing: .26em; font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.55);
  transform: translateZ(30px);
}

.eroe__titolo {
  margin: 0;
  font-size: clamp(28px, 8.6vw, 92px);
  line-height: .96;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transform: translateZ(70px);
  text-shadow: 0 26px 70px rgba(0,0,0,.85);
}
.eroe__titolo .riga { display: block; }
.eroe__titolo .riga--accento { color: var(--accento-chiaro); text-shadow: 0 0 44px rgba(200,16,46,.85); }

.eroe__sottotitolo {
  --piano: 40px;
  margin: 26px auto 0;
  max-width: 60ch;
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255,255,255,.78);
  transform: translateZ(40px);
  text-shadow: 0 4px 18px rgba(0,0,0,.9);
}
.eroe__sottotitolo b { color: #fff; font-weight: 700; }

.eroe__azioni {
  --piano: 55px;
  margin-top: 36px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  transform: translateZ(55px);
}
.eroe__azioni .bottone--vuoto { color: #fff; }

.eroe__stato {
  margin: 26px 0 0;
  font-size: 15px; font-weight: 600;
  color: rgba(255,255,255,.75);
  transform: translateZ(25px);
  text-shadow: 0 3px 14px rgba(0,0,0,.9);
}
.eroe__stato b { color: #fff; }
.eroe__stato .pallino {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #34c759; margin-right: 8px; vertical-align: 1px;
  box-shadow: 0 0 12px #34c759;
}
.eroe__stato .pallino--spento { background: #8a919e; box-shadow: none; }

.eroe__giu { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); }
.eroe__giu span {
  display: block; width: 13px; height: 13px;
  border-right: 2px solid rgba(255,255,255,.5); border-bottom: 2px solid rgba(255,255,255,.5);
  transform: rotate(45deg);
  animation: scendi 1.7s ease-in-out infinite;
}
@keyframes scendi { 0%,100% { transform: rotate(45deg) translate(0,0); opacity: .35 } 50% { transform: rotate(45deg) translate(5px,5px); opacity: 1 } }

/* Le comparse dell'apertura entrano in scena SOLO con la classe `entrata`, che
 * movimento.js mette e poi toglie.
 *
 * Prima l'animazione stava sulle regole di sempre, con `animation-fill-mode:
 * both` e un primo fotogramma a opacità zero. Vuol dire che se per un qualsiasi
 * motivo l'animazione non parte — la pagina aperta in una scheda di fondo, il
 * risparmio energetico, il browser che rimanda — logo, titolo, sottotitolo e
 * bottoni restano fermi su quel fotogramma: invisibili, per sempre. È successo
 * davvero, su Android.
 *
 * Adesso lo stato di riposo è «visibile» e il movimento è quello che si
 * aggiunge quando si può: se la classe non arriva mai, la pagina si vede
 * comunque. */
@media (prefers-reduced-motion: no-preference) {
  .entrata .eroe__targa      { animation: entra .8s cubic-bezier(.2,.8,.25,1) both; }
  .entrata .eroe__occhiello  { animation: entra .8s cubic-bezier(.2,.8,.25,1) .1s both; }
  .entrata .eroe__sottotitolo{ animation: entra .8s cubic-bezier(.2,.8,.25,1) .46s both; }
  .entrata .eroe__azioni     { animation: entra .8s cubic-bezier(.2,.8,.25,1) .56s both; }
  .entrata .eroe__titolo .riga { animation: entra .85s cubic-bezier(.2,.8,.25,1) both; }
  .entrata .eroe__titolo .riga:nth-child(1) { animation-delay: .16s; }
  .entrata .eroe__titolo .riga:nth-child(2) { animation-delay: .26s; }
  .entrata .eroe__titolo .riga:nth-child(3) { animation-delay: .36s; }
}

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

/* Nessuno sfondo: dietro le sezioni non c'è più niente da velare, e il colore
   del corpo pagina basta. Serviva un velo semitrasparente quando la strada
   passava anche qui sotto — ed era proprio quel velo, moltiplicato per l'altezza
   della pagina, a rendere lo scorrimento faticoso. */
.sezione { padding: clamp(64px, 9vw, 110px) 0; }

/* ---------- Marchi: tre livelli, in ordine di importanza ---------- */

/* Ogni livello è un blocco a sé, e il primo pesa di più: tessere più alte.
   La gerarchia si legge senza doverla spiegare a parole. */
.livello + .livello { margin-top: 54px; }

.livello__ruolo {
  margin: 0 0 6px;
  text-shadow: 0 2px 14px rgba(0,0,0,.9);
  display: flex; align-items: center; gap: 16px;
  text-transform: uppercase; letter-spacing: .18em; font-size: 13px; font-weight: 800;
  color: var(--accento-chiaro);
}
/* La riga che continua dopo l'etichetta: chiude il titolo senza un bordo pieno. */
.livello__ruolo::after { content: ""; flex: 1; height: 1px; background: var(--bordo); }
.livello__spiega { margin: 0 0 22px; color: var(--testo-tenue); font-size: 16px; max-width: 60ch; text-shadow: 0 2px 14px rgba(0,0,0,.9); }

.marchi__fila {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px;
}

/* Le tessere sono bianche perché i loghi delle case sono nati per il fondo
   chiaro: ricolorarli per farli stare sullo scuro li avrebbe alterati. Su
   questa pagina notturna diventano anche il punto più luminoso, ed è giusto
   che lo siano. */
.marchio {
  position: relative;
  display: grid; place-items: center;
  min-height: 124px;
  padding: 26px 30px;
  background: #fff;
  border-radius: var(--raggio);
  overflow: hidden;
  transform: perspective(760px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 22px 44px -20px #000, 0 0 0 1px rgba(255,255,255,.06);
}
.marchio:hover { box-shadow: 0 34px 60px -20px #000, 0 0 34px -6px rgba(200,16,46,.55); }
.marchi__fila--primo .marchio { min-height: 168px; padding: 34px 40px; }

.marchio__luce {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(300px circle at var(--lx, 50%) var(--ly, 50%), rgba(200,16,46,.14), transparent 62%);
  transition: opacity .3s ease;
}
.marchio:hover .marchio__luce { opacity: 1; }

/* Riquadro di misura fissa con `object-fit: contain`: i marchi hanno proporzioni
   diversissime — Kymco è una scritta lunga e bassa, Piaggio uno scudo più alto
   che largo — e senza un riquadro comune uno finirebbe grande il doppio
   dell'altro. Così ognuno riempie lo spazio che può e nessuno viene deformato. */
.marchio__logo {
  width: 100%; max-width: 190px;
  height: 62px;
  object-fit: contain;
  transform: translateZ(30px);
}
.marchi__fila--primo .marchio__logo { max-width: 240px; height: 78px; }

/* Terzo livello: nessun logo, perché l'officina non guarda la marca. */
.tutte {
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--accento);
  border-radius: var(--raggio);
  background: var(--pannello);
  padding: 30px 34px;
}
.tutte__titolo {
  margin: 0 0 8px;
  font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: -0.02em;
}
.tutte__testo { margin: 0; color: var(--testo-tenue); max-width: 62ch; }

/* ---------- Servizi: schede che si inclinano sotto il puntatore ---------- */

/* Tre colonne alla larghezza piena: le schede sono sei e riempiono due righe
   esatte. Con una misura minore ne entrerebbero quattro e le ultime due
   resterebbero spaiate. */
.griglia-schede {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 22px;
}
.scheda {
  position: relative;
  padding: 32px 26px;
  background: var(--pannello);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
  /* Le due rotazioni le scrive movimento.js in --rx / --ry. Il valore di riposo
     è zero, quindi senza JS la scheda resta semplicemente piatta. */
  transform: perspective(760px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.scheda:hover {
  border-color: var(--bordo-vivo);
  box-shadow: 0 30px 54px -26px #000, 0 0 30px -10px rgba(200,16,46,.5);
}
/* Riflesso che segue il puntatore: --lx/--ly sono la sua posizione in percentuale. */
.scheda__luce {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(360px circle at var(--lx, 50%) var(--ly, 50%), rgba(200,16,46,.22), transparent 62%);
  transition: opacity .3s ease;
}
.scheda:hover .scheda__luce { opacity: 1; }

.scheda__icona {
  width: 44px; height: 44px;
  fill: var(--accento-chiaro); color: var(--accento-chiaro);
  margin-bottom: 18px;
  transform: translateZ(34px);
  filter: drop-shadow(0 0 14px rgba(200,16,46,.55));
}
.scheda h3 {
  margin: 0 0 10px;
  font-size: 20px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -0.01em;
  transform: translateZ(24px);
}
.scheda p { margin: 0; color: var(--testo-tenue); font-size: 16px; transform: translateZ(14px); }

/* ---------- Orari, contatti, mappa ---------- */

.dove__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.riquadro {
  background: var(--pannello);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 30px 28px;
}
.riquadro .titolo-sezione { font-size: clamp(24px, 3vw, 30px); margin-bottom: 6px; }
.riquadro .titolo-sezione::after { margin-top: 12px; }

.orari { width: 100%; border-collapse: collapse; margin-top: 22px; }
.orari th, .orari td { padding: 10px 12px; text-align: left; font-weight: 500; }
.orari th { color: var(--testo-tenue); font-weight: 500; }
.orari td { text-align: right; font-variant-numeric: tabular-nums; }
.orari tr + tr { border-top: 1px solid var(--bordo); }
.orari .chiuso { color: var(--testo-tenue); }
.orari tr.oggi { background: rgba(200,16,46,.16); }
.orari tr.oggi th, .orari tr.oggi td { font-weight: 700; color: var(--accento-chiaro); }

.contatti { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 18px; }
.contatti li { display: grid; gap: 2px; }
.contatti__voce { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--testo-tenue); font-weight: 700; }
.contatti a { font-size: 19px; font-weight: 700; text-decoration: none; color: var(--accento-chiaro); }
.contatti a:hover { text-decoration: underline; }
.contatti address { font-style: normal; font-size: 17px; }

.mappa {
  grid-column: 1 / -1;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  overflow: hidden;
  background: var(--pannello);
}
/* La mappa è chiara e la pagina è notturna: abbassata di luce si posa nel resto
   invece di aprirci un buco. Non invertita — i nomi delle strade diventerebbero
   illeggibili, e una mappa che non si legge non serve a niente. */
.mappa iframe {
  width: 100%; height: 380px; border: 0; display: block;
  filter: grayscale(.25) brightness(.84) contrast(1.06);
}
.mappa__firma {
  grid-column: 1 / -1;
  margin: -8px 0 0; font-size: 12px; color: rgba(255,255,255,.42);
}
.mappa__firma a { color: inherit; }

/* ---------- Piede ---------- */

.piede {
  background: linear-gradient(to bottom, rgba(11,12,15,0), rgba(11,12,15,.94) 14%, #08090c);
  color: var(--testo-tenue);
  padding: 74px 0 40px;
  font-size: 15px;
}
.piede__griglia { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 34px; }
.piede__logo { width: 200px; height: auto; border-radius: 10px; margin-bottom: 18px; }
.piede p { margin: 0 0 6px; }
.piede__voce { color: #fff; font-weight: 700; margin-bottom: 10px; }
.piede a { color: rgba(255,255,255,.78); text-decoration: none; }
.piede a:hover { color: #fff; text-decoration: underline; }
/* `.piede p` azzera i margini laterali con la scorciatoia e vince su
   `.contenitore`: la nota va ricentrata a mano. */
.piede__nota {
  margin-top: 40px; margin-inline: auto;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09);
  font-size: 13px; color: rgba(255,255,255,.4);
}

/* ---------- Comparsa allo scorrimento ---------- */

.anima { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.25,1); }
.anima.vista { opacity: 1; transform: none; }

/* ---------- Schermi stretti ---------- */

@media (max-width: 900px) {
  .barra__voci { display: none; }
  .barra__chiama { margin-left: auto; }
  .dove__griglia, .piede__griglia { grid-template-columns: 1fr; }
  .eroe { min-height: auto; padding-top: 112px; }
  /* Meno prospettiva: su uno schermo alto e stretto una strada a 620px di
     distanza diventa un imbuto. Si cambia la costante, così il JS la rilegge e
     ricalcola con lo stesso numero. */
  /* Sul telefono la strada larga 2300 px di carreggiata mandava le strisce
     laterali fuori campo: restava solo la mezzeria, che si leggeva come una
     sbarra rossa in mezzo ai bottoni. Stretta così le due strisce rientrano e
     la strada torna a sembrare una strada. Il piano più piccolo è anche l'unica
     misura che conti per la fluidità: da 15,6 a 2,6 milioni di pixel. */
  .mondo {
    --occhio: 900;
    --larghezza-strada: 1200px;
    --lunghezza-strada: 2200px;
    /* La mezzeria è larga in pixel di strada, non in percentuale: su un piano
       quattro volte più stretto va rimpicciolita insieme a tutto il resto. */
    --mezzeria: 6px;
  }
  .veicolo { width: 230px; }
  /* Gli aloni sfocati sono la voce più cara su una GPU da telefono, e a questa
     misura non si vedrebbero comunque. */
  .veicolo--vicino .veicolo__moto { filter: none; }
}

@media (max-width: 460px) {
  body { font-size: 16px; }
  .eroe__targa img { width: 180px; }
  .eroe__azioni .bottone { width: 100%; justify-content: center; }
}

/* ---------- Chi ha chiesto meno movimento ---------- */

/* Il sistema operativo lo dichiara per chi soffre di chinetosi o vertigini:
   qui vuol dire strada ferma, niente moto, niente inclinazioni, niente
   comparse. La scena resta, ma come un fondale dipinto. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .anima { opacity: 1; transform: none; }
  .veicolo { display: none; }
  .eroe__scena, .scheda, .marchio, .eroe__targa { transform: none !important; }
}