/* ==========================================================================
   BUGLIONE BROKER E CHARTER — movimento e homepage
   Dipende da token.css e componenti.css.

   Il sito dei Cantieri e scuro e trattiene lo scroll nell'apertura. Questo e
   chiaro e lo scroll non lo trattiene mai: il movimento accompagna la pagina,
   non la sequestra. Le idee, tutte ricondotte alla geometria del marchio:

     svela       i titoli li scoprono due lastre a 30 gradi, arancio e navy
     fuoco       foto e card entrano sfocate e si mettono a fuoco
     parallasse  le foto del manifesto scorrono a velocita diverse
     nastri      i nomi dei servizi scorrono come una scritta su una fiancata,
                 e accelerano con lo scroll
     fisarmonica i quattro servizi si aprono uno alla volta
     binario     le barche si trascinano in orizzontale
     chiamata    la fascia arancio entra di taglio, sullo stesso angolo

   Tutto e visibile di default: e il JavaScript ad aggiungere .js-movimento.
   Con "riduci movimento" attivo nel sistema non parte niente.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. UTILITA DI MOVIMENTO
   -------------------------------------------------------------------------- */

/* Messa a fuoco: sfocato, un po' piu piccolo e piu in basso, poi nitido. */
.js-movimento .fuoco {
  opacity: 0;
  filter: blur(16px);
  transform: translateY(28px) scale(0.965);
  transition: opacity 0.9s var(--ease),
              filter 1s var(--ease),
              transform 1.2s var(--ease-marca);
  transition-delay: var(--ritardo, 0s);
}
.js-movimento .fuoco.visto { opacity: 1; filter: none; transform: none; }

/* Svela: due lastre inclinate attraversano la riga. La prima e arancio, la
   seconda navy e piu sottile; il testo compare quando la prima lo copre.
   Le lastre stanno fuori dal ritaglio finche non partono, quindi senza
   JavaScript non si vedono e il titolo resta leggibile. */
.svela {
  --lastra-1: var(--arancio);
  --lastra-2: var(--navy);
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
}
.svela::before {
  content: "";
  position: absolute;
  inset: 0.04em -0.3em;
  background: var(--lastra-1);
  transform: skewX(calc(var(--ang) * -1)) scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.js-movimento .svela .svela__testo { opacity: 0; }
.js-movimento .svela.visto .svela__testo {
  animation: svela-testo 0.01s linear forwards;
  animation-delay: calc(var(--svela-ritardo, 0s) + 0.42s);
}
.js-movimento .svela.visto::before {
  animation: svela-lastra 0.95s var(--ease-marca) forwards;
  animation-delay: var(--svela-ritardo, 0s);
}
.svela--2 { --svela-ritardo: 0.16s; }

/* La lastra si allunga da sinistra e si ritira verso destra, senza mai
   uscire dal titolo: una lastra che scorre fuori, anche se ritagliata,
   allargherebbe la pagina e farebbe comparire lo scroll orizzontale. */
@keyframes svela-lastra {
  0%   { transform: skewX(calc(var(--ang) * -1)) scaleX(0); transform-origin: left; }
  45%  { transform: skewX(calc(var(--ang) * -1)) scaleX(1); transform-origin: left; }
  55%  { transform: skewX(calc(var(--ang) * -1)) scaleX(1); transform-origin: right; }
  100% { transform: skewX(calc(var(--ang) * -1)) scaleX(0); transform-origin: right; }
}
@keyframes svela-testo { to { opacity: 1; } }

[data-parallasse] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js-movimento .fuoco { opacity: 1; filter: none; transform: none; }
  .js-movimento .svela .svela__testo { opacity: 1; }
  .svela::before { display: none; }
}


/* --------------------------------------------------------------------------
   1. MANIFESTO
   Il titolo enorme e il gesto ribelle: nella nautica fatta di corsivi sottili
   e blu polvere, un condensato nero alto quanto mezzo schermo.
   -------------------------------------------------------------------------- */

.manifesto {
  position: relative;
  display: flex;
  min-height: 100svh;
  padding-block: calc(var(--testata-h) + clamp(1.5rem, 5vh, 4rem)) clamp(2rem, 6vh, 4rem);
  background: var(--panna);
  overflow: hidden;
}
.manifesto__interno {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vh, 3rem);
}

/* La rotta: da Napoli al mondo, con una lastra che naviga sulla linea. */
.rotta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
}
.rotta__linea {
  position: relative;
  flex: 0 1 clamp(4rem, 14vw, 13rem);
  height: 2px;
  background: var(--navy-30);
  transform-origin: left;
}
.rotta__barca {
  position: absolute;
  top: -4px; left: 0;
  width: 22px; height: 10px;
  background: var(--arancio);
  transform: skewX(calc(var(--ang) * -1));
}
.js-movimento .rotta__linea { transform: scaleX(0); transition: transform 1.2s var(--ease-marca) 0.2s; }
.js-movimento .rotta.visto .rotta__linea { transform: none; }
.js-movimento .rotta.visto .rotta__barca { animation: naviga 4.5s var(--ease) 1.2s infinite; }
@keyframes naviga {
  0%   { left: 0; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: calc(100% - 22px); opacity: 0; }
}

.manifesto__titolo {
  position: relative;
  z-index: 2;
  margin: 0;
  /* legato anche all'altezza: su un portatile basso il titolo non deve
     finire sotto la fotografia */
  font-size: min(var(--t-mega), 19svh);
  line-height: var(--lh-mega);
  font-weight: 900;
  color: var(--navy);
}
.manifesto__titolo .svela { padding-block: 0.02em; }
@media (max-width: 40rem) {
  .manifesto__titolo { font-size: 17.5vw; }
  .rotta { font-size: 0.625rem; letter-spacing: 0.14em; gap: var(--sp-3); }
  .rotta__linea { flex-basis: 3rem; }
}

/* L'anno nella voce serif, come prescrive il manuale: "1979" e il segno della
   storia, e l'unico punto arancio del titolo. */
.serif-anno {
  font-family: var(--f-serif);
  font-variation-settings: normal;
  font-weight: 800;
  font-size: 0.9em;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--arancio);
}

.manifesto__piede { position: relative; z-index: 2; display: grid; gap: var(--sp-8); }
.manifesto__azione { order: -1; }
.manifesto__claim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--sp-5) var(--sp-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
.manifesto__claim li {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--navy);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
  max-width: 24ch;
}
.manifesto__n {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--f-serif);
  font-variation-settings: normal;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--arancio);
}

.manifesto__foto { margin: 0; overflow: hidden; background: var(--navy-12); }
.manifesto__foto img { width: 100%; height: 100%; object-fit: cover; }
.manifesto__foto--a { aspect-ratio: 16 / 10; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 23.1px) 100%, 0 100%); }
.manifesto__foto--b { aspect-ratio: 1; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 16.2px) 100%, 0 100%); }

@media (min-width: 60rem) {
  .manifesto__foto { position: absolute; z-index: 1; }
  /* Le due foto fanno collage in alto a destra, nello spazio che la prima
     riga del titolo ("Dal 1979") lascia libero: la seconda riga e larga
     quanto la pagina e non deve mai passarci sotto. */
  .manifesto__interno { --fa: clamp(18rem, min(33vw, 50svh), 34rem); }
  .manifesto__foto--a { top: 6%; right: 0; width: var(--fa); }
  .manifesto__foto--b { top: 0; right: calc(var(--fa) - 3.5rem); width: clamp(7.5rem, 10vw, 10rem); z-index: 3; }
}
@media (max-width: 59.99rem) {
  .manifesto { min-height: 0; }
  .manifesto__foto--a { width: 88%; margin-top: var(--sp-6); }
  .manifesto__foto--b { width: 44%; margin: -18% 0 0 auto; position: relative; z-index: 2; }
  .manifesto__foto[data-parallasse] { transform: none !important; }
}


/* --------------------------------------------------------------------------
   2. ROTTA: IL MOSAICO SUI NASTRI
   Fondo navy, e dietro i riquadri scorrono i nomi dei servizi. Man mano che
   il mosaico si apre i nastri si spengono e resta il video.
   -------------------------------------------------------------------------- */

.soglia .zoom { background: var(--navy); }

.zoom__nastri {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  align-content: center;
  gap: clamp(0.5rem, 2vh, 1.5rem);
  opacity: calc(1 - var(--p) * 1.6);
  transform: rotate(-4deg) scale(1.1);
}
/* I nastri sono l'ultimo figlio della vista: i riquadri tengono cosi la
   loro posizione nth-child, e stanno sopra per via dello z-index. */
.zoom__strato { z-index: 1; }

.nastro { overflow: hidden; white-space: nowrap; }
.nastro__traccia {
  display: inline-flex;
  align-items: center;
  transform: translate3d(var(--x, 0px), 0, 0);
  will-change: transform;
}
.nastro__voce {
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-size: clamp(3.5rem, 12vw, 12rem);
  font-style: italic;
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 232, 223, .45);
  padding-inline: 0.12em;
}
.nastro--pieno .nastro__voce { color: var(--panna); -webkit-text-stroke: 0; }
.nastro__segno { width: auto; height: clamp(1.5rem, 4vw, 4rem); margin-inline: clamp(1rem, 2vw, 2rem); flex: none; }


/* --------------------------------------------------------------------------
   3. SERVIZI A FISARMONICA
   Quattro pannelli, uno per divisione, ognuno col suo colore della tavolozza.
   Aperto uno, gli altri restano linguette verticali col nome. Su telefono
   diventano un elenco che si apre in verticale.
   -------------------------------------------------------------------------- */

.servizi-home { padding-block: var(--sezione); background: var(--bianco); }
.servizi-home__testa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
.servizi-home__testa .etichetta { margin: 0; }
.servizi-home__conto {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--navy-30);
}
.servizi-home__conto span { color: var(--navy); }

.fisa--broker     { --fisa-fondo: var(--navy);    --fisa-testo: var(--panna); --fisa-tenue: #B9B9DA;              --fisa-accento: var(--arancio);      --btn-fondo: var(--arancio); --btn-testo: var(--navy);  --btn-lastra: var(--panna); --btn-testo-hover: var(--navy); }
.fisa--charter    { --fisa-fondo: var(--arancio); --fisa-testo: var(--navy);  --fisa-tenue: rgba(0, 0, 102, .82);  --fisa-accento: var(--navy);         --btn-fondo: var(--navy);    --btn-testo: var(--panna); --btn-lastra: var(--panna); --btn-testo-hover: var(--navy); }
.fisa--refit      { --fisa-fondo: var(--verde);   --fisa-testo: var(--panna); --fisa-tenue: #D6E6E0;              --fisa-accento: var(--verde-chiaro); --btn-fondo: var(--panna);   --btn-testo: var(--navy);  --btn-lastra: var(--navy);  --btn-testo-hover: var(--panna); }
.fisa--management { --fisa-fondo: var(--mattone); --fisa-testo: var(--panna); --fisa-tenue: #FFE8DF;              --fisa-accento: var(--giallo);       --btn-fondo: var(--panna);   --btn-testo: var(--navy);  --btn-lastra: var(--navy);  --btn-testo-hover: var(--panna); }

.fisarmonica {
  --ling: clamp(4.25rem, 5.5vw, 5.75rem);
  --spazio: 6px;
  display: flex;
  gap: var(--spazio);
  height: clamp(36rem, 82svh, 52rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fisa {
  position: relative;
  display: flex;
  flex: 0 0 var(--ling);
  min-width: 0;
  overflow: hidden;
  background: var(--fisa-fondo);
  color: var(--fisa-testo);
  transition: flex-grow 0.9s var(--ease-marca);
}
.fisa[data-aperto="true"] { flex-grow: 1; }

.fisa__linguetta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: var(--ling);
  padding: var(--sp-6) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.fisa__n {
  font-family: var(--f-serif);
  font-variation-settings: normal;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fisa-accento);
}
.fisa__nome {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.4s var(--ease);
}
.fisa[data-aperto="true"] .fisa__nome { opacity: 0.35; }
.fisa:not([data-aperto="true"]) .fisa__linguetta:hover .fisa__nome { color: var(--fisa-accento); }

.fisa__corpo { flex: 1 1 auto; min-width: 0; overflow: hidden; }

/* Il contenuto e largo quanto il pannello aperto fin dall'inizio: mentre la
   fisarmonica si apre non si ricompone, viene scoperto. La larghezza la
   scrive il JavaScript; il valore di riserva e quello del contenitore. */
.fisa__interno {
  width: calc(var(--larghezza-fisa, min(100vw - var(--bordo-pagina) * 2, var(--misura-largo))) - var(--ling) * 4 - var(--spazio) * 3);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.fisa__foto { margin: 0; height: 100%; overflow: hidden; }
.fisa__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  filter: blur(10px);
  transition: transform 1.4s var(--ease-marca), filter 1s var(--ease);
}
.fisa[data-aperto="true"] .fisa__foto img { transform: none; filter: none; }

.fisa__testo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: clamp(1.5rem, 3vw, 3rem);
  overflow-y: auto;
}
.fisa__grande {
  margin: 0 0 auto;
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-size: clamp(5rem, 11vw, 10rem);
  font-style: italic;
  font-weight: 900;
  line-height: 0.8;
  color: var(--fisa-accento);
}
.fisa__titolo {
  margin-top: auto;
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3.5rem);
  font-weight: 900;
  line-height: 0.92;
  color: var(--fisa-testo);
}
@media (max-height: 820px) and (min-width: 60rem) {
  .fisarmonica { height: clamp(34rem, 92svh, 44rem); }
  .fisa__grande { font-size: clamp(4rem, 7vw, 6rem); }
  .fisa__titolo { font-size: clamp(1.75rem, 1rem + 1.8vw, 2.75rem); }
}
.fisa__prosa p { font-size: 0.975rem; line-height: 1.55; color: var(--fisa-tenue); max-width: 54ch; margin-bottom: var(--sp-4); }
.fisa__azione { align-self: flex-start; margin-top: var(--sp-3); margin-left: -5px; }

/* Il testo entra dopo che il pannello ha cominciato ad aprirsi. */
.fisa__testo > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease), transform 0.8s var(--ease-marca);
}
.fisa[data-aperto="true"] .fisa__testo > * { opacity: 1; transform: none; }
.fisa[data-aperto="true"] .fisa__testo > :nth-child(1) { transition-delay: 0.25s; }
.fisa[data-aperto="true"] .fisa__testo > :nth-child(2) { transition-delay: 0.33s; }
.fisa[data-aperto="true"] .fisa__testo > :nth-child(3) { transition-delay: 0.41s; }
.fisa[data-aperto="true"] .fisa__testo > :nth-child(4) { transition-delay: 0.49s; }

@media (max-width: 59.99rem) {
  .fisarmonica { flex-direction: column; height: auto; }
  .fisa { flex: none; flex-direction: column; }
  .fisa__linguetta { flex-direction: row; width: 100%; height: 4.5rem; padding: 0 var(--sp-6); justify-content: flex-start; gap: var(--sp-5); }
  .fisa__nome { writing-mode: horizontal-tb; transform: none; font-size: 1.75rem; }
  .fisa[data-aperto="true"] .fisa__nome { opacity: 1; }
  .fisa__corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease-marca); }
  .fisa[data-aperto="true"] .fisa__corpo { grid-template-rows: 1fr; }
  .fisa__interno { width: auto; height: auto; min-height: 0; overflow: hidden; grid-template-columns: 1fr; }
  .fisa__foto { aspect-ratio: 16 / 10; height: auto; }
  .fisa__grande { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fisa__testo > * { opacity: 1; transform: none; }
  .fisa__foto img { transform: none; filter: none; }
}


/* --------------------------------------------------------------------------
   4. ULTIMI ARRIVI SUL BINARIO
   -------------------------------------------------------------------------- */

.arrivi { padding-block: var(--sezione); background: var(--sabbia); overflow: hidden; }
.arrivi__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-9);
}
.arrivi__titolo {
  font-size: clamp(2.75rem, 1.5rem + 5vw, 6.5rem);
  font-weight: 900;
  line-height: 0.88;
}
.arrivi__comandi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }

.freccia-binario {
  position: relative;
  width: 3.25rem; height: 2.875rem;
  border: 0; background: none; cursor: pointer;
  color: var(--navy);
  font-size: 1.125rem;
  isolation: isolate;
}
.freccia-binario::before {
  content: ""; position: absolute; inset: 0 6px; z-index: -1;
  border: 1.5px solid var(--navy);
  transform: skewX(calc(var(--ang) * -1));
  transition: background var(--t-micro-dur) var(--ease);
}
.freccia-binario:hover { color: var(--panna); }
.freccia-binario:hover::before { background: var(--navy); }
.freccia-binario:disabled { opacity: 0.3; cursor: default; }
.freccia-binario:disabled:hover { color: var(--navy); }
.freccia-binario:disabled:hover::before { background: none; }

.binario {
  --margine: max(var(--bordo-pagina), (100vw - var(--misura-largo)) / 2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margine);
  scrollbar-width: none;
  cursor: grab;
}
.binario::-webkit-scrollbar { display: none; }
.binario[data-trascina="true"] { cursor: grabbing; scroll-snap-type: none; }
.binario[data-trascina="true"] a { pointer-events: none; }
.binario .binario__traccia {
  display: flex;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
  width: max-content;
  padding-inline: var(--margine);
}
.binario .card { flex: none; width: clamp(17rem, 27vw, 25rem); scroll-snap-align: start; }
.binario img { -webkit-user-drag: none; user-select: none; }

.binario__avanzamento { height: 3px; margin-top: var(--sp-9); background: rgba(0, 0, 102, .14); overflow: hidden; }
.binario__avanzamento span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--navy);
  transform-origin: left;
  transform: scaleX(var(--av, 0.2));
  transition: transform 0.25s var(--ease);
}


/* --------------------------------------------------------------------------
   5. CHIAMATA
   La fascia arancio entra di taglio mentre la si raggiunge: il bordo sinistro
   e inclinato a 30 gradi esatti, perche lo scarto lo calcola il JavaScript
   dall'altezza reale della sezione.
   -------------------------------------------------------------------------- */

.chiamata {
  --p: 1;
  --sl: 30vw;
  position: relative;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  background: var(--sabbia);
  color: var(--navy);
  overflow: hidden;
  isolation: isolate;
}
.chiamata__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--arancio);
  clip-path: polygon(
    calc((1 - var(--p)) * (100% + var(--sl)) - var(--sl) + var(--sl)) 0,
    100% 0,
    100% 100%,
    calc((1 - var(--p)) * (100% + var(--sl)) - var(--sl)) 100%
  );
}
.chiamata__interno { display: grid; gap: var(--sp-7); }
.chiamata .etichetta { margin: 0; }
.chiamata .etichetta::before { background: var(--navy); }
/* Su una riga sola: le due parti restano due lastre, ma affiancate. */
.chiamata__titolo {
  font-size: clamp(2.75rem, 0.5rem + 6.4vw, 7.25rem);
  font-weight: 900;
  line-height: 0.86;
  color: var(--navy);
}
.chiamata__titolo .svela { --lastra-1: var(--navy); --lastra-2: var(--panna); display: inline-block; vertical-align: top; }
.chiamata__titolo .svela + .svela { margin-left: 0.22em; }
.chiamata__righe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 2px solid var(--navy);
}
.chiamata__recapito {
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--navy);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.chiamata__recapito small {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--f-testo);
  font-variation-settings: "wdth" 100;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.chiamata__recapito:hover { color: var(--panna); }
.chiamata .btn { justify-self: start; margin-left: -5px; }

@media (prefers-reduced-motion: reduce) { .chiamata { --p: 1 !important; } }