/* ==========================================================================
   BUGLIONE YACHT BUILDER — HOME ANIMATA

   Stesso impianto della scheda 48': una traccia alta, dentro un palco
   fermo, e un progresso 0 -> 1 letto dalla posizione della traccia. Nessuna
   libreria: solo trasformazioni scritte da requestAnimationFrame.

   Due regole ereditate dal manuale e rispettate qui:
     - ogni obliquo e' a 30 gradi (--shear), mai a un angolo inventato;
     - le fotografie non tagliano mai: si dissolvono l'una nell'altra.

   Si appoggia ai token di style.css: va caricato dopo di esso.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. PRIMITIVE CONDIVISE
   -------------------------------------------------------------------------- */

/* La traccia e' alta: il palco resta fermo mentre lei scorre. L'altezza la
   scrive il JS (tante schermate quante sono le tappe), cosi' il numero di
   tappe si cambia nel markup e il passo si adegua da solo. */
.hm-track { position: relative; }

.hm-stage {
  position: sticky; top: 0;
  height: 100svh; min-height: 540px;
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* Sede unica delle fotografie: impilate, una sola visibile.
   La dissolvenza e' lenta (1,1s) e la deriva continua sotto: e' il modo in
   cui la scheda 48' cambia inquadratura senza mai fare uno stacco. */
.hm-shots { position: absolute; inset: 0; z-index: 0; }
.hm-shot { position: absolute; inset: 0; opacity: 0; }
.hm-shot img { width: 100%; height: 100%; object-fit: cover; }
.hm-shot--drift img { animation: o48-drift 22s var(--ease) infinite alternate; }

/* Velo: il testo sta sopra la fotografia, quindi va garantito il contrasto.
   Piu' denso in basso a sinistra, dove stanno scheda e indice. */
.hm-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,58,.94) 0%, rgba(0,0,58,.62) 34%, rgba(0,0,58,.14) 64%, rgba(0,0,58,.34) 100%),
    linear-gradient(to right, rgba(0,0,58,.72) 0%, rgba(0,0,58,.1) 62%);
}

/* Sede unica delle schede: tutte nella stessa cella, solo l'attiva visibile.
   Le transizioni le scrive il JS (0,4s), qui sta solo la forma.
   `align-items: start` e' necessario: in sovrapposizione le schede vengono
   altrimenti stirate all'altezza della riga e la piu' lunga viene tagliata. */
.hm-cards { display: grid; align-items: start; }
.hm-card { grid-area: 1 / 1; max-width: 46ch; }
.hm-card__n {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 1.45rem; line-height: 1; color: var(--rosso);
  margin-bottom: .55rem;
}
.hm-card h3 { margin-bottom: .5rem; }
.hm-card p { color: var(--ink-dim); font-size: var(--fs-small); line-height: 1.55; }
/* Nel «progetto» la scheda e' l'unico testo della scena: va alla misura
   del lead, non a quella di una didascalia. */
.hm-proj .hm-card p {
  font-size: var(--fs-lead); line-height: 1.45; font-weight: 500;
  color: var(--panna); max-width: 38ch;
}

/* Indice: i tratti si allungano sulla tappa attiva. Il JS scrive la
   larghezza del primo figlio, quindi il tratto DEVE essere il primo figlio. */
.hm-index { display: grid; gap: .5rem; }
.hm-index li {
  display: flex; align-items: center; gap: .85rem;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--su-dark-ink-dim);
  transition: color .5s var(--ease-out);
}
.hm-index li > i {
  display: block; flex: none;
  width: 22px; height: 2px; background: currentColor;
  transform: skewX(var(--shear));
}

/* Contatore di tappa: la voce display, come in .anatomia__count */
.hm-count {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem; font-weight: 800; letter-spacing: .04em;
  color: var(--su-dark-ink-dim);
}
.hm-count b { color: var(--rosso); font-weight: 800; }

/* --------------------------------------------------------------------------
   1. IL PROGETTO — le tre parole

   Riscritta: prima la parola divideva la scena con una fotografia dentro un
   parallelogramma, e finiva per essere meta' schermo. Ora la scena e' UNA
   parola sola, grande quanto la pagina, sopra la fotografia a pieno campo.

   La misura non e' scritta qui: la calcola il JS parola per parola, perche'
   «sicurezza» e «sbarcabilita'» non hanno lo stesso numero di lettere e a
   corpo fisso una delle due arriverebbe corta. Cosi' tutte e tre toccano i
   due margini: e' quello a dare il senso di parola-manifesto.
   -------------------------------------------------------------------------- */
.hm-proj { background: var(--navy); }

/* Velo piu' leggero degli altri: qui la fotografia deve restare mare, non
   fondale. Denso solo in basso, dove passano riga e indice. */
.hm-veil--proj {
  background:
    linear-gradient(to top, rgba(0,0,58,.93) 0%, rgba(0,0,58,.56) 30%, rgba(0,0,58,.16) 62%, rgba(0,0,58,.42) 100%),
    linear-gradient(to right, rgba(0,0,58,.5) 0%, rgba(0,0,58,.1) 58%, rgba(0,0,58,.3) 100%);
}

.hm-proj__grid {
  position: relative; z-index: 2;
  flex: 1;
  width: 100%; max-width: var(--shell-max); margin-inline: auto;
  padding-inline: var(--pad-inline);
  padding-block: calc(var(--nav-h) + var(--s-4)) var(--s-5);
  display: grid; grid-template-rows: auto 1fr auto;
  /* minmax(0,1fr) e non 1fr: la parola in uscita e' piu' larga della pagina,
     e una colonna «auto» si allargherebbe fino a contenerla portandosi
     dietro tutta la sezione. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}
.hm-proj__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.hm-proj__top .eyebrow { margin-bottom: 0; }

/* Le tre tappe, impilate nella stessa cella.

   L'animazione e' il font stesso. L'Archivo variabile ha due assi — peso
   100-900 e larghezza 62-125% — e la voce display del manuale sta all'estremo
   condensato e nero. Quindi ogni parola NASCE dove il brand non parla
   (sottile, larga) e si COMPRIME fino a dove parla: nero, condensato, 62%.
   Lettera per lettera, sfalsate di 35 millesimi.

   overflow-x: clip perche' a 125% la parola e' piu' larga della pagina: e' il
   punto di partenza, e deve poter uscire di scena senza spostare nulla. */
.hm-words { position: relative; min-width: 0; display: grid; align-content: center; overflow-x: clip; }

/* Una tappa = eco + parola + riga. Stanno in un solo elemento, cosi' quando
   le sequenze si spengono (telefono, moto ridotto) restano accoppiate. */
.hm-stop {
  grid-area: 1 / 1;
  min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4);
  align-content: center; justify-items: start;
}
.hm-word, .hm-word__ghost { grid-area: 1 / 1; }

.hm-word {
  position: relative; z-index: 1;
  margin: 0;
  display: flex; flex-wrap: nowrap; align-items: flex-end;
  font-family: var(--font-display);
  font-style: italic; font-weight: 900;
  font-size: var(--fit, clamp(2.3rem, 11vw, 9rem));
  line-height: .88; letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--panna);
  text-shadow: 0 .02em .12em rgba(0, 0, 40, .5);
}

/* L'eco: la stessa parola in solo contorno, un filo piu' grande. Non e'
   decorazione — e' profondita': da' alla parola uno spessore che sul mare
   aperto la tiene staccata dal fondo. Arriva dopo le lettere e si ritira
   su di loro, quindi il movimento ha due tempi invece di uno. */
.hm-word__ghost {
  align-self: end; justify-self: start;
  font-family: var(--font-display); font-stretch: 62%;
  font-style: italic; font-weight: 900;
  font-size: var(--fit, clamp(2.3rem, 11vw, 9rem));
  line-height: .88; letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 232, 223, .34);
  transform-origin: 0 100%;
  /* --gx lo muove il JS in senso contrario alla parola piena: da fermo
     l'eco sta quasi sopra il testo, in movimento se ne stacca. E' quello
     che da' la profondita' — un contorno fermo sarebbe solo un doppione. */
  translate: var(--gx, 0) 0;
  opacity: 0; scale: 1.16;
  transition: opacity .9s var(--ease-out) .1s, scale 1.3s var(--ease-out) .1s;
  pointer-events: none;
}
.hm-stop.is-on .hm-word__ghost { opacity: .5; scale: 1; }
.hm-stop.is-out .hm-word__ghost { opacity: 0; scale: .96; transition-duration: .4s, .4s; }

/* Ogni lettera e' una feritoia: il glifo sale da sotto la linea di base.
   Il padding negativo compensato da' aria all'accento di NAVIGABILITÀ, che
   in maiuscolo sta sopra l'altezza delle maiuscole e verrebbe tagliato. */
.hm-word__l {
  display: inline-block;
  /* flex: none, altrimenti le feritoie si stringono per stare nella colonna
     e la parola arriva schiacciata: e' l'asse di larghezza del font a dover
     cambiare la misura, non il layout. */
  flex: 0 0 auto;
  overflow: hidden;
  padding-block: .2em .06em;
  margin-block: -.2em -.06em;
}
.hm-word__l > i {
  display: inline-block;
  font-style: inherit;
  /* stato di riposo = fuori scena, sottile e larga */
  font-variation-settings: "wght" 120, "wdth" 122;
  translate: 0 108%;
  opacity: 0;
  transition:
    font-variation-settings 1s var(--ease-out),
    translate .72s var(--ease-out),
    opacity .4s linear;
}
/* stato acceso = la voce del manuale */
.hm-stop.is-on .hm-word__l > i {
  font-variation-settings: "wght" 900, "wdth" 62;
  translate: 0 0;
  opacity: 1;
}
/* uscita: se ne va verso l'alto, non torna indietro da dove e' venuta */
.hm-stop.is-out .hm-word__l > i {
  translate: 0 -70%;
  opacity: 0;
  font-variation-settings: "wght" 900, "wdth" 62;
  transition-duration: .45s, .45s, .3s;
}
/* Stato di misura: il JS mette la parola al suo arrivo, senza transizione,
   per leggerne la larghezza vera prima di scegliere il corpo. Dura un
   fotogramma e non si vede. */
.hm-words.is-measure .hm-word { width: max-content; }
.hm-words.is-measure .hm-word__l > i {
  font-variation-settings: "wght" 900, "wdth" 62 !important;
  translate: 0 !important; opacity: 1 !important; transition: none !important;
}

/* La riga sotto la parola: una sola, sette-otto parole. Piu' testo di cosi'
   e l'animazione non respira. Il filetto e' un pseudo-elemento e non un
   border-image: a 4,5rem di gradiente il bordo veniva riempito per intero. */
.hm-proj__line {
  max-width: 46ch;
  font-size: var(--fs-lead); line-height: 1.4; font-weight: 500;
  color: var(--panna);
  opacity: 0; translate: 0 12px;
  transition: opacity .5s var(--ease-out) .12s, translate .6s var(--ease-out) .12s;
}
.hm-proj__line::before {
  content: ""; display: block;
  width: 4.5rem; height: 2px; margin-bottom: var(--s-3);
  background: var(--rosso);
  transform: skewX(var(--shear));
}
.hm-stop.is-on .hm-proj__line { opacity: 1; translate: 0 0; }

/* L'indice: qui in riga, non in colonna. Le tre parole restano tutte in
   pagina anche quando una sola e' enorme — chi entra a meta' sequenza vede
   comunque che il progetto sta su tre idee. */
.hm-index--row {
  grid-auto-flow: column; justify-content: start;
  gap: clamp(1.25rem, 4vw, 3.5rem);
}

/* La vecchia «sei ragioni» — schede sopra una fotografia a pieno campo —
   e' diventata la sezione anatomia: disegno tecnico e camera che ci gira
   attorno. Vive in anatomia.css, che serve anche alla scheda 48'. */

/* --------------------------------------------------------------------------
   3. DAL 1979 — il film che si apre
   Il filmato del cantiere parte come una scheda piccola e cresce fino alla
   larghezza della pagina; sopra, tre tappe di quasi mezzo secolo.
   -------------------------------------------------------------------------- */
.hm-film { background: var(--teal); }

.hm-film__stage { display: grid; place-items: center; }

/* Il riquadro: 16/9 fisso, cresce solo in larghezza. La banda sopra e sotto
   non e' un difetto — e' il formato del film, e tiene il testo leggibile. */
.hm-film__box {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 42%; aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #06253c;
  box-shadow: 0 30px 90px rgba(0, 0, 20, .5);
  /* La feritoia. Il riquadro non si limita ad allargarsi: si APRE, da una
     fessura orizzontale alta un ottavo. E' il gesto che il cantiere fa da
     cinquant'anni — un capannone che si apre sul mare — ed e' anche il modo
     piu' onesto di far entrare un filmato in una pagina: prima la luce,
     poi l'immagine. --slit va da 44 (fessura) a 0 (aperto). */
  clip-path: inset(calc(var(--slit, 0) * 1%) 0 calc(var(--slit, 0) * 1%) 0);
  will-change: width, clip-path;
}
.hm-film__box iframe,
.hm-film__box video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; display: block;
  object-fit: cover;
  /* Il filmato arriva un po' piu' vicino di quanto resti: mentre il riquadro
     si apre l'inquadratura si allarga. Due movimenti contrari nello stesso
     istante — e' quello che fa sembrare la scena girata, non impaginata. */
  transform: scale(var(--fz, 1));
  transform-origin: 50% 50%;
}
/* Anteprima al posto del player quando la pagina e' aperta da file (vedi JS) */
.hm-film__poster { position: absolute; inset: 0; display: block; }
.hm-film__poster img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.hm-film__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
  padding: .95em 1.7em; white-space: nowrap;
  background: var(--rosso); color: var(--bianco);
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  transform: skewX(var(--shear));
  /* compare mentre il riquadro cresce (--tint scende da .58 a .16), cosi' non
     finisce sotto il titolo; senza sequenza (telefono) --tint manca e resta visibile */
  opacity: clamp(0, calc((.5 - var(--tint, 0)) * 3), 1);
}
.hm-film__play > span { display: inline-block; transform: skewX(var(--shear-inv)); }
.hm-film__poster:hover .hm-film__play { background: var(--navy); }

/* Velo sul filmato: si alleggerisce mentre il riquadro cresce (--tint dal JS) */
.hm-film__box::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(6, 30, 40, var(--tint, .55));
  transition: background .2s linear;
}

.hm-film__grid {
  position: relative; z-index: 3;
  flex: 1;
  width: 100%; max-width: var(--shell-max); margin-inline: auto;
  padding-inline: var(--pad-inline);
  padding-block: calc(var(--nav-h) + var(--s-4)) var(--s-5);
  display: grid; grid-template-rows: auto 1fr auto;
  gap: var(--s-4);
  pointer-events: none;
}
.hm-film__grid a, .hm-film__grid button { pointer-events: auto; }

.hm-film__title { will-change: transform, opacity; }
/* Il titolo passa sopra il riquadro del filmato mentre questo cresce: l'ombra
   e' quello che tiene la riga leggibile nei fotogrammi di passaggio. */
.hm-film__title .h1, .hm-film__title .eyebrow { text-shadow: 0 2px 24px rgba(4, 24, 32, .8); }
.hm-film__title .h1 { max-width: 22ch; }
.hm-film__title .mark--tri { margin-bottom: var(--s-3); }

.hm-film__foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5); align-items: end;
}
.hm-film .hm-card { max-width: 40ch; }
.hm-film .hm-card p { color: var(--panna); opacity: .86; }
.hm-film .hm-card__n { color: var(--mint); }
.hm-film .hm-index li { color: rgba(203, 220, 214, .7); }

/* Comando audio: il filmato parte muto, come deve. */
.hm-film__audio {
  align-self: start; justify-self: end;
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 44px; padding-inline: 1.5em;
  background: rgba(255, 232, 223, .1);
  border: 1px solid rgba(255, 232, 223, .32);
  color: var(--panna);
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  transform: skewX(var(--shear));
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hm-film__audio > span { transform: skewX(var(--shear-inv)); }
.hm-film__audio:hover { background: rgba(255, 232, 223, .2); border-color: var(--mint); }

/* --------------------------------------------------------------------------
   4. TECNOLOGIE A BORDO — la striscia che scorre di lato
   Lo scroll verticale muove la striscia in orizzontale: e' la sezione
   «a bordo» della scheda 48'.
   -------------------------------------------------------------------------- */
/* Lo stacco sopra e sotto: senza, la sezione arrivava attaccata al film
   (sopra) e ai partner (sotto). Il margine sta sulla traccia, fuori dal
   palco fermo, quindi si vede solo entrando e uscendo. Il JS lo somma
   all'altezza della traccia. */
.hm-tec { background: var(--panna); padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.hm-tec__stage { justify-content: center; gap: var(--s-5); }

.hm-tec__head {
  width: 100%; max-width: var(--shell-max); margin-inline: auto;
  padding-inline: var(--pad-inline);
}
/* Niente limite in caratteri: il <br> nel titolo decide gia' le due righe,
   e il tetto a 26ch faceva andare a capo anche la prima.
   Via anche il bilanciamento ereditato da .h2: `text-wrap: balance` cerca
   righe di lunghezza simile e in Safari spezzava «Quattro impianti,» in due
   pur avendo spazio, portando il titolo a tre righe invece di due. */
.hm-tec__head .h2 { max-width: none; text-wrap: initial; }
.hm-tec__head .lead { margin-top: var(--s-3); }

.hm-tec__rail {
  display: flex; align-items: stretch;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-inline: var(--pad-inline);
  will-change: transform;
}
.hm-tec__card {
  flex: 0 0 min(78vw, 470px);
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  background: var(--bianco);
  border-radius: var(--r-lg);
}
.hm-tec__card h3 {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800;
  text-transform: uppercase; line-height: 1;
}
.hm-tec__list { display: grid; gap: 0; }
.hm-tec__list li {
  padding-block: .75rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small); line-height: 1.5;
}
.hm-tec__list li:first-child { border-top: 0; padding-top: 0; }
.hm-tec__by {
  margin-top: auto; padding-top: var(--s-3);
  border-top: 2px solid var(--navy);
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   5. PARTNER — una fascia, un nastro, un pezzo alla volta

   Prima era una tabella di otto righe: due schermate per dire otto nomi.
   Ora e' una fascia bassa. I nomi scorrono in un nastro continuo verso
   sinistra; al traguardo — la tacca rossa allineata al margine del testo —
   ogni nome consegna il pezzo che firma, scritto in grande sopra di lui.

   Cosi' il legame marchio-pezzo e' un fatto temporale: lo si vede accadere
   una volta per nome, senza tabelle e senza loghi altrui.
   -------------------------------------------------------------------------- */
.hm-part {
  background: var(--navy);
  padding-block: var(--s-6);
  overflow: hidden;
}
.hm-part__top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4) var(--s-5); flex-wrap: wrap;
}
.hm-part__top .eyebrow { margin-bottom: 0; }
.hm-part__intro {
  max-width: 40ch;
  font-size: var(--fs-small); line-height: 1.5;
  color: var(--su-dark-ink-dim);
}

/* Il pezzo: la riga grande. Cambia una volta per nome, e cambia salendo. */
.hm-part__slot {
  margin-top: var(--s-4);
  overflow: hidden;
  padding-block: .16em .12em;
}
.hm-part__part {
  display: block; margin: 0;
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: italic; font-weight: 900;
  font-size: clamp(2rem, 5.4vw, 4.25rem);
  line-height: 1; letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--panna);
}
.hm-part__part.is-swap { animation: hm-part-swap .58s var(--ease-out); }
@keyframes hm-part-swap {
  0%   { translate: 0 100%; opacity: 0; }
  100% { translate: 0 0;    opacity: 1; }
}

/* Il nastro. Due copie identiche dei nomi, e l'animazione trasla di meta':
   al giro successivo la seconda copia sta dove stava la prima, quindi il
   punto di ricongiunzione non si vede. */
.hm-part__belt {
  position: relative;
  margin-top: var(--s-4);
  padding-block: clamp(.9rem, 1.8vw, 1.4rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 88%, transparent 100%);
}
.hm-part__strip {
  display: flex; width: max-content;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-left: var(--pad-inline);
  animation: hm-part-belt var(--hm-belt-dur, 52s) linear infinite;
}
@keyframes hm-part-belt { to { transform: translate3d(-50%, 0, 0); } }
.hm-part__belt:hover .hm-part__strip,
.hm-part__belt:focus-within .hm-part__strip { animation-play-state: paused; }

.hm-part__name {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-size: clamp(1.35rem, 2.6vw, 2.1rem); font-weight: 800;
  text-transform: uppercase; line-height: 1; letter-spacing: -.005em;
  white-space: nowrap;
  color: rgba(255, 232, 223, .38);
  transition: color .35s var(--ease), opacity .35s var(--ease);
}
/* Il nome al traguardo: acceso. Uno solo per volta. */
.hm-part__name.is-read { color: var(--panna); }

/* La tacca: 2px di rosso a 30 gradi. Sta sul margine del testo — non su un
   punto qualsiasi — perche' e' la stessa colonna su cui si allinea la riga
   grande: il pezzo appare esattamente sopra il nome che lo firma.
   Il max() ricalcola quel margine quando il contenitore e' centrato. */
.hm-part__mark {
  position: absolute; z-index: 2;
  top: -1px; bottom: -1px;
  left: max(var(--pad-inline), calc((100% - var(--shell-max)) / 2 + var(--pad-inline)));
  width: 2px; background: var(--rosso);
  transform: skewX(var(--shear));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. CATALOGO — le due schede entrano di lato
   La tendina e' la stessa della pianta del ponte nella scheda 48':
   clip-path inset che si apre da sinistra.
   -------------------------------------------------------------------------- */
.hm-cat { background: var(--sabbia); }
/* Nessun clip-path di partenza: lo scrive il JS al primo fotogramma, cosi'
   senza JS le schede restano semplicemente visibili invece di sparire. */
.hm-wipe { will-change: clip-path; }

/* La scheda del modello in costruzione non ha fotografie: al loro posto la
   tessitura di linee a 30 gradi del manuale e la misura in grande. */
.hm-cat__draw {
  position: relative; aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: var(--navy); color: var(--panna);
  overflow: hidden;
}
.hm-cat__draw .stripes-30 { color: var(--panna); }
.hm-cat__feet {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: italic; font-weight: 900;
  font-size: clamp(3.5rem, 9vw, 7rem); line-height: .82;
  letter-spacing: -.02em; text-transform: uppercase;
  color: rgba(255, 232, 223, .5);
}

/* --------------------------------------------------------------------------
   6bis. FINESTRE BASSE

   Un palco alto 100svh in una finestra da 540px non ha spazio per un titolo,
   una scheda e un indice: `overflow: hidden` taglierebbe in silenzio, e un
   taglio silenzioso e' il peggiore dei difetti.

   Le tre sequenze restano — sono la pagina — ma si stringono. La striscia
   delle tecnologie invece esce dall'impianto appiccicoso: e' la sola che
   chiede un'altezza minima vera (testata + scheda alta), e si scorre col
   dito, che qui e' la lettura piu' onesta.
   -------------------------------------------------------------------------- */
@media (max-height: 760px) and (min-width: 861px) {
  .hm-proj__grid, .hm-film__grid {
    padding-block: calc(var(--nav-h) + var(--s-2)) var(--s-4);
    gap: var(--s-3);
  }
  .hm-proj__body { gap: var(--s-3); }
  .hm-proj__line { font-size: var(--fs-body); line-height: 1.5; }
  /* Il corpo della parola lo sceglie il JS (--fit) e tiene gia' conto
     dell'altezza della finestra: qui resta solo il ripiego senza JS. */
  .hm-word, .hm-word__ghost { font-size: var(--fit, clamp(2rem, 4.6vw, 3.6rem)); }
  .hm-film .hm-card p { font-size: var(--fs-small); line-height: 1.45; }
  .hm-film .hm-card__n { font-size: 1.15rem; margin-bottom: .3rem; }
  .hm-index { gap: .35rem; }

  #hm-tec-track { min-height: 0 !important; padding-block: 0; }
  #hm-tec-track .hm-stage {
    position: static; height: auto; min-height: 0; overflow: visible;
    padding-block: var(--pad-section);
  }
  .hm-tec__rail {
    transform: none !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-block: .5rem;
  }
  .hm-tec__card { scroll-snap-align: center; }
}

/* --------------------------------------------------------------------------
   7. RIPIEGO: SCHERMI STRETTI E MOTO RIDOTTO

   Le sequenze appiccicose vivono di altezza e di puntamento fine: su un
   telefono non funzionano e vanno sostituite, non ridotte. Il JS non parte
   nemmeno; queste regole rimettono tutto in colonna.
   -------------------------------------------------------------------------- */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .hm-track { min-height: 0 !important; }
  .hm-stage { position: static; height: auto; min-height: 0; overflow: visible; }

  /* Una sola fotografia, statica: le altre cinque sono la sequenza, e la
     sequenza qui non c'e'. */
  .hm-shots { position: relative; inset: auto; aspect-ratio: 3 / 2; }
  .hm-shot { opacity: 1 !important; }
  .hm-shot:not(:first-child) { display: none; }
  .hm-shot--drift img { animation: none; }
  .hm-veil { display: none; }

  /* Le schede diventano un elenco: tutte leggibili, con il filetto. */
  .hm-cards { gap: var(--s-4); }
  .hm-card {
    grid-area: auto; max-width: none;
    opacity: 1 !important; translate: none !important;
    padding-top: var(--s-3); border-top: 1px solid var(--rule);
  }
  .hm-index, .hm-count { display: none; }

  .hm-proj__grid, .hm-film__grid {
    grid-template-columns: 1fr; grid-template-rows: auto;
    padding-block: var(--pad-section);
    gap: var(--s-5);
  }
  .hm-film__foot { grid-template-columns: 1fr; }
  /* Le tre parole diventano un elenco: tutte e tre in pagina, ognuna con la
     sua riga. Le lettere restano lettere, ferme al loro posto d'arrivo, e
     l'eco sparisce: senza sequenza sarebbe solo una parola doppia. */
  .hm-words { display: grid; gap: var(--s-5); align-content: start; }
  .hm-stop { grid-area: auto; gap: var(--s-3); align-content: start; }
  .hm-word__ghost { display: none; }
  .hm-word { grid-area: auto; font-size: clamp(2.2rem, 11vw, 3.6rem); flex-wrap: wrap; }
  .hm-word__l > i {
    font-variation-settings: "wght" 900, "wdth" 62 !important;
    translate: 0 0 !important; opacity: 1 !important; transition: none !important;
  }
  .hm-proj__line {
    max-width: none; font-size: var(--fs-body);
    opacity: 1 !important; translate: none !important;
  }

  /* Il film: statico, a piena larghezza, sopra il testo. */
  .hm-film__stage { display: block; }
  .hm-film__box {
    position: relative; left: auto; top: auto; translate: none;
    width: 100%; margin-inline: auto;
    max-width: calc(var(--shell-max) - 2 * var(--pad-inline));
  }
  .hm-film__box::after { background: transparent; }
  .hm-film__grid { pointer-events: auto; }
  .hm-film__audio { display: none; }

  /* La striscia si scorre col dito, non con la pagina. */
  .hm-tec__rail {
    transform: none !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-block: .5rem;
  }
  .hm-tec__card { scroll-snap-align: center; flex-basis: min(86vw, 470px); }

  .hm-part { padding-block: var(--pad-section); }
  .hm-part__strip { gap: clamp(1.75rem, 8vw, 3rem); }
  .hm-part__top { flex-direction: column; align-items: flex-start; }

  .hm-wipe { clip-path: none !important; }
}

/* Moto ridotto: il nastro non scorre, quindi nessun nome arriva al traguardo
   e la riga grande non avrebbe piu' senso. Al suo posto ogni nome porta
   scritto sotto il proprio pezzo: la stessa informazione, ferma. */
@media (prefers-reduced-motion: reduce) {
  .hm-part__slot, .hm-part__mark { display: none; }
  .hm-part__belt {
    -webkit-mask-image: none; mask-image: none;
    padding-block: var(--s-4);
  }
  .hm-part__strip {
    animation: none;
    width: auto; flex-wrap: wrap;
    gap: var(--s-4) clamp(2rem, 5vw, 3.5rem);
  }
  .hm-part__name { color: var(--panna); }
  .hm-part__name[data-part]::after {
    content: attr(data-part);
    display: block; margin-top: .4em;
    font-family: var(--font-text); font-stretch: normal;
    font-size: var(--fs-micro); font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--su-dark-ink-dim);
  }
}

/* --------------------------------------------------------------------------
   7. FASCIA DEI NUMERI
   Stessa tessitura della fascia «Impianto elettrico» nella scheda 48'.
   Con le righe sotto, i filetti obliqui fra un numero e l'altro erano un
   secondo motivo a 30 gradi che faceva a pugni col primo: spariscono.
   -------------------------------------------------------------------------- */
.hm-numeri { position: relative; overflow: hidden; }
.hm-numeri > .container { position: relative; z-index: 1; }
.stats--plain > .stat { padding-inline-start: 0; }
.stats--plain > .stat::before { content: none; }

/* --------------------------------------------------------------------------
   8. CATALOGO IN UNA SCHERMATA
   Resta solo la parola «Catalogo», a corpo di titolo, e subito le schede.
   Su desktop la sezione sta tutta in una schermata: le fotografie delle
   schede prendono l'altezza che avanza invece di un 4:3 fisso, che a
   mezza pagina le faceva alte il doppio dello spazio disponibile.
   -------------------------------------------------------------------------- */
.hm-cat__title { margin: 0 0 var(--s-5); }

@media (min-width: 861px) and (min-height: 640px) {
  .hm-cat {
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: calc(var(--nav-h) + var(--s-4)) var(--s-5);
  }
  .hm-cat > .container { width: 100%; }
  .hm-cat__title { margin-bottom: var(--s-4); }
  .hm-cat__grid .card__media,
  .hm-cat__grid .hm-cat__draw {
    aspect-ratio: auto;
    height: clamp(200px, calc(100svh - var(--nav-h) - 26rem), 520px);
  }
  .hm-cat__grid .card__media img { height: 100%; }
}