/* ==========================================================================
   BUGLIONE YACHT BUILDER — ANATOMIA

   La sezione «sei ragioni» era una sequenza di schede sopra una fotografia a
   pieno campo: leggibile, ma uguale a tutte le altre sequenze della pagina —
   e su una barca non diceva DOVE. Qui il soggetto diventa il disegno tecnico
   del profilo, e lo scroll fa la macchina da presa: la linea si disegna, poi
   la camera va zona per zona, e a ogni zona corrispondono una scheda e una
   fotografia.

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

   La stessa sezione sta in home e nella scheda 48': un solo componente,
   due contenuti. Si appoggia ai token di style.css e va caricato dopo.
   ========================================================================== */

.ana { position: relative; background: var(--navy); }

.ana__stage {
  position: sticky; top: 0;
  height: 100svh; min-height: 540px;
  overflow: hidden;
  display: grid;
}

/* --------------------------------------------------------------------------
   1. IL DISEGNO E LA CAMERA

   .ana__view e' l'obiettivo: sta fermo e taglia. .ana__cam e' quello che si
   muove — ha la stessa misura della vista, cosi' le percentuali di traslazione
   e il punto d'origine parlano la stessa lingua e il conto resta leggibile:

     origine = il punto della zona (--cx, --cy, in centesimi di vista)
     scala   = --k, che tiene fermo quel punto
     sposta  = da (--cx, --cy) a (--tx, --ty), il centro d'inquadratura

   --cx e --cy li calcola il JS partendo dalle coordinate del disegno: la
   conversione dipende dalle proporzioni della finestra, quindi non puo'
   stare qui.
   -------------------------------------------------------------------------- */
.ana__view {
  grid-area: 1 / 1;
  position: relative; overflow: hidden;
  display: grid; align-content: center;
}
.ana__cam {
  position: absolute; inset: 0;
  transform-origin: calc(var(--cx, 50) * 1%) calc(var(--cy, 50) * 1%);
  transform:
    translate(calc((var(--tx, 50) - var(--cx, 50)) * 1%), calc((var(--ty, 50) - var(--cy, 50)) * 1%))
    scale(var(--k, 1));
  transition: transform 1.15s var(--ease-out);
}
/* Il disegno: largo quanto la vista, centrato in altezza. Le proporzioni sono
   quelle del file (842 x 148), quindi le coordinate del tracciato e la
   posizione sullo schermo restano legate da una sola moltiplicazione. */
.ana__art {
  position: absolute; left: 0; top: 50%;
  width: 100%; aspect-ratio: 842 / 148;
  translate: 0 -50%;
  color: var(--panna);
}
.ana__svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* La linea si disegna: pathLength="1000" nel tracciato rende il conto
   indipendente dalla lunghezza vera, quindi 1000 = tutta la barca e il JS
   scrive un numero fra 1000 (niente) e 0 (tutta). */
#ana-hull {
  stroke-dasharray: 1000;
  stroke-dashoffset: var(--draw, 0);
}

/* Il disegno fermo: e' quello che si vede su telefono, con moto ridotto e
   senza JS. E' lo stesso file, ma caricato come immagine: dentro un <img> il
   `currentColor` del tracciato non eredita niente dalla pagina e ricade sul
   nero, che su questo blu non si vede. L'inversione lo riporta chiaro senza
   dover tenere due copie del disegno. */
.ana__still { display: none; width: 100%; height: auto; filter: invert(1); opacity: .45; }

/* La finestra di mira. Sta ferma: e' il disegno che le scorre sotto, come i
   nomi sotto la tacca rossa della fascia partner. Il parallelogramma e' il
   solito 30 gradi, e l'ombra sparata all'esterno (spread enorme, nessuna
   sfocatura) spegne tutto quello che non e' la zona: un foro di luce, non un
   riquadro appoggiato sopra.

   Fissa e non incollata alla zona per una ragione pratica: la geometria di un
   riquadro SVG non si anima, la trasformazione di una camera si'. Cosi' il
   movimento e' uno solo e non ci sono due cose che inseguono la stessa meta'
   a velocita' diverse. */
.ana__frame {
  position: absolute; z-index: 2; pointer-events: none;
  left: calc(var(--tx, 50) * 1%); top: calc(var(--ty, 50) * 1%);
  width: clamp(240px, 32vw, 540px); aspect-ratio: 16 / 7;
  translate: -50% -50%;
  transform: skewX(var(--shear));
  border: 2px solid var(--rosso);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 26, .72);
  opacity: 0; transition: opacity .7s var(--ease-out);
}
.ana.is-drawn .ana__frame { opacity: 1; }

/* I quattro angoli, appena piu' marcati: e' il segno che distingue una
   finestra di mira da una cornice. */
.ana__frame::before, .ana__frame::after {
  content: ""; position: absolute; left: -2px; right: -2px; height: 2px;
  background: var(--panna);
}
.ana__frame::before { top: -2px; }
.ana__frame::after { bottom: -2px; }

/* --------------------------------------------------------------------------
   2. LA FOTOGRAFIA DELLA ZONA
   Il disegno dice dove, la fotografia dice com'e'. Sta nel parallelogramma
   a 30 gradi, contro-inclinata e ingrandita di 1,36 — il valore esatto per
   coprire gli angoli su un rapporto 16/10 (1 + tan30 / 1,6).
   -------------------------------------------------------------------------- */
.ana__photo {
  grid-area: 1 / 1; z-index: 3;
  align-self: start; justify-self: end;
  width: min(30vw, 420px); aspect-ratio: 16 / 10;
  margin: calc(var(--nav-h) + var(--s-4)) var(--pad-inline) 0 0;
  position: relative; overflow: hidden;
  transform: skewX(var(--shear));
  background: var(--su-dark-panel);
  box-shadow: 0 24px 60px rgba(0, 0, 20, .45);
  opacity: 0; translate: 0 -12px;
  transition: opacity .7s var(--ease-out), translate .7s var(--ease-out);
}
.ana.is-drawn .ana__photo { opacity: 1; translate: 0 0; }
.ana__shot { position: absolute; inset: 0; opacity: 0; transition: opacity 1s cubic-bezier(.4,0,.2,1); }
.ana__shot img {
  width: 100%; height: 100%; object-fit: cover;
  transform: skewX(var(--shear-inv)) scale(1.36);
}
.ana__shot.is-on { opacity: 1; }

/* --------------------------------------------------------------------------
   3. IL TESTO
   -------------------------------------------------------------------------- */
.ana__veil {
  grid-area: 1 / 1; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,58,.96) 0%, rgba(0,0,58,.7) 26%, rgba(0,0,58,0) 58%),
    linear-gradient(to right, rgba(0,0,58,.8) 0%, rgba(0,0,58,0) 52%);
}

.ana__grid {
  grid-area: 1 / 1; z-index: 4;
  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;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  pointer-events: none;
}
.ana__grid a, .ana__grid button { pointer-events: auto; }

.ana__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.ana__head .eyebrow { margin-bottom: 0; }
.ana__head .h2 { max-width: 22ch; }
/* Nella scheda 48' la testata non ripete il titolo della sezione:
   la pagina lo ha gia' detto. Resta una riga di servizio. */
.ana__kicker {
  margin: 0; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--panna);
}
.ana__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);
}
.ana__count b { color: var(--rosso); font-weight: 800; }

/* Le schede stanno tutte nella stessa cella: una sola accesa per volta.
   `align-items: end` le tiene ancorate in basso, dove le cerca l'occhio dopo
   aver seguito il disegno. */
.ana__foot {
  align-self: end;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5); align-items: end;
}
.ana__cards { display: grid; align-items: end; }
.ana__card { grid-area: 1 / 1; max-width: 44ch; opacity: 0; translate: 0 16px; }
.ana__card.is-on { opacity: 1; translate: 0 0; }
.ana__card {
  transition: opacity .45s var(--ease-out), translate .45s var(--ease-out);
}
.ana__n {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 1.45rem; line-height: 1; color: var(--rosso);
  margin-bottom: .55rem;
}
.ana__t {
  margin: 0 0 var(--s-3);
  max-width: 14ch;
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-style: italic; font-weight: 900;
  font-size: clamp(2rem, 5vw, 4.2rem); line-height: .88;
  letter-spacing: -.02em; text-transform: uppercase;
  color: var(--panna); text-wrap: balance;
}
.ana__p { margin: 0; max-width: 46ch; font-size: var(--fs-small); line-height: 1.55; color: var(--panna); opacity: .84; }

.ana__index { display: grid; gap: .5rem; justify-items: end; margin: 0; padding: 0; list-style: none; }
.ana__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);
}
.ana__index li > i {
  display: block; flex: none;
  width: 22px; height: 2px; background: currentColor;
  transform: skewX(var(--shear));
  transition: width .5s var(--ease-out);
}
.ana__index li.is-on { color: var(--accent); }
.ana__index li.is-on > i { width: 42px; }

/* --------------------------------------------------------------------------
   4. FINESTRE BASSE
   Il disegno e' largo e basso: su una finestra schiacciata la fotografia in
   alto a destra e il titolo si contendono la stessa fascia. Vince il testo.
   -------------------------------------------------------------------------- */
@media (max-height: 760px) and (min-width: 861px) {
  .ana__photo { width: min(24vw, 320px); margin-top: calc(var(--nav-h) + var(--s-2)); }
  .ana__grid { padding-block: calc(var(--nav-h) + var(--s-2)) var(--s-3); gap: var(--s-3); }
  .ana__t { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
  .ana__p { font-size: var(--fs-micro); line-height: 1.5; }
  .ana__cross::before { left: -40px; width: 80px; }
  .ana__cross::after { top: -24px; height: 48px; }
}

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

   Una camera che insegue un disegno largo 842 unita' dentro un telefono non
   e' una versione ridotta: e' illeggibile. Qui la sezione torna a essere
   quello che deve essere — il disegno fermo in alto, e sotto le sei voci in
   elenco, ognuna con la sua fotografia.
   -------------------------------------------------------------------------- */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .ana { min-height: 0 !important; }
  .ana__stage {
    position: static; height: auto; min-height: 0; overflow: visible;
    display: block; padding-block: var(--pad-section);
  }
  .ana__view {
    position: relative; display: block;
    width: 100%; max-width: var(--shell-max); margin-inline: auto;
    padding-inline: var(--pad-inline);
    overflow: visible;
  }
  .ana__cam { position: static; transform: none; }
  .ana__art { display: none; }
  .ana__still { display: block; }
  .ana__frame { display: none; }
  .ana__veil { display: none; }

  /* La fotografia non e' piu' in sovrapposizione, quindi l'altezza gliela
     deve dare l'immagine: le inquadrature tornano nel flusso e il
     parallelogramma sparisce. */
  .ana__photo {
    position: relative;
    /* larghezza scritta per esteso, non `auto`: l'elemento porta con se' le
       proprieta' di griglia della versione a schermo intero e in flusso
       normale finirebbe per adattarsi al contenuto */
    width: calc(100% - 2 * var(--pad-inline));
    margin: var(--s-5) auto 0;
    transform: none; aspect-ratio: auto;
    opacity: 1; translate: none;
  }
  .ana__shot { display: none; }
  .ana__shot:first-child { display: block; position: relative; inset: auto; opacity: 1; }
  .ana__shot img { transform: none; height: auto; aspect-ratio: 3 / 2; }

  .ana__grid {
    padding-block: var(--s-5) 0;
    grid-template-rows: auto; gap: var(--s-5);
    pointer-events: auto;
  }
  .ana__foot { grid-template-columns: 1fr; }
  .ana__cards { gap: var(--s-4); }
  .ana__card {
    grid-area: auto; max-width: none;
    opacity: 1 !important; translate: none !important;
    padding-top: var(--s-3); border-top: 1px solid var(--rule);
  }
  .ana__t { font-size: clamp(1.8rem, 8vw, 2.6rem); max-width: none; }
  .ana__index, .ana__count { display: none; }
}

/* --------------------------------------------------------------------------
   6. HOME — schede senza numero, indice e contatore
   Nella home l'anatomia non ha piu' contatore, numeri sopra i titoli ne'
   elenco laterale: resta la sola scheda. I titoli vanno a capo con un <br>
   scelto a mano, cosi' stanno tutti su due righe; il limite in caratteri
   (14ch) mandava a tre righe i tre titoli piu' lunghi.
   -------------------------------------------------------------------------- */
#hm-ana .ana__foot { grid-template-columns: minmax(0, 1fr); }
#hm-ana .ana__t { max-width: none; white-space: nowrap; }
@media (max-width: 860px) {
  #hm-ana .ana__t { white-space: normal; }
}