/* ==========================================================================
   BUGLIONE 1979 — token di design
   --------------------------------------------------------------------------
   Sorgente unica di colore, tipografia, ritmo, forma e movimento.
   Da riusare identico su orayacht.it e agenziabuglione.it.

   Allineato al rebrand 2026 ("NUOVA BRAND IDENTITY"):
     colore      i nove campioni della tavolozza ufficiale
     tipografia  Zuume (titoli), Corsario (serif), Config (testo)
     forma       l'angolo di 30 gradi, che e la firma geometrica del marchio
     archetipo   ribelle: il carattere lo fanno peso, larghezza e colore,
                 non la dimensione. Vale anche qui.
   ========================================================================== */

/* --- CARATTERI ------------------------------------------------------------
   Zuume, Corsario e Config sono caratteri a licenza (Zetafonts). Finche i
   file non arrivano, il sito monta gli stessi sostituti del sito dei Cantieri:
   Archivo variabile (condensato al posto di Zuume, pieno al posto di Config)
   e Playfair Display al posto di Corsario.
   Le dichiarazioni @font-face stanno in caratteri.css, con i file incorporati
   come data URI: cosi le pagine si aprono identiche anche con doppio clic
   (Chrome blocca i font letti da file://) e senza rete.
   -------------------------------------------------------------------------- */


:root {

  /* --- COLORE ------------------------------------------------------------
     La tavolozza del rebrand ha nove campioni, ma non hanno tutti lo stesso
     rango. Due colori reggono il sito: navy dominante e arancio unica azione.
     Tre neutri: panna, sabbia, bianco.
     Gli altri quattro non sono decorazione libera: ognuno ha un solo impiego
     e non compare altrove. Il lime sta sui dati in monospaziato su fondo navy,
     e da nessun'altra parte: sono la scheda tecnica e le ore della pagina di
     richiamo. Verde e mattone marcano rispettivamente Refit e Management, un
     filetto a 30 gradi per pagina e nulla piu.
     E questa disciplina a produrre il "costoso", non il numero di colori. */

  --navy:         #000066;
  --arancio:      #FF3300;
  --panna:        #FFE8DF;
  --sabbia:       #EADFD3;
  --bianco:       #FFFFFF;
  --inchiostro:   #1C1C1A;

  --verde:        #336666;   /* solo Yacht Refit */
  --verde-chiaro: #99CC99;   /* solo il segno tricolore */
  --mattone:      #BC3737;   /* solo Yacht Management */
  --rosa:         #CC6666;   /* solo il segno tricolore */
  --lime:         #DEF853;   /* solo i dati in mono su fondo navy */
  --giallo:       #FFFF99;   /* solo il monogramma */

  /* Gradazioni del navy, ricavate per miscela col bianco. */
  --navy-80:      #333385;
  --navy-60:      #6666A3;
  --navy-30:      #B3B3D1;
  --navy-12:      #E0E0EF;
  --navy-06:      #F0F0F8;

  --sfondo:            var(--bianco);
  --sfondo-alt:        var(--panna);
  --sfondo-sabbia:     var(--sabbia);
  --sfondo-scuro:      var(--navy);
  --testo:             var(--navy);
  --testo-corpo:       #26264F;
  --testo-tenue:       #5C5C9D;   /* AA su bianco, panna e sabbia */
  --testo-inverso:     var(--panna);
  --filetto:           var(--navy-12);
  --filetto-scuro:     rgba(255, 232, 223, .20);
  --azione:            var(--arancio);
  --azione-hover:      #D92B00;
  --dato:              var(--lime);

  /* --- TIPOGRAFIA --------------------------------------------------------
     Tre voci, tre compiti distinti:
       display  Zuume, condensato e pesante. Titoli di pagina e numeri grandi.
       serif    Corsario. L'anno, i richiami editoriali, le firme. Poco e mirato.
       testo    Config. Navigazione, corpo, dati, interfaccia. La voce normale.
     Il salto di gerarchia lo fanno peso e larghezza, non solo il corpo. */

  --f-display: "Zuume", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-serif:   "Corsario", "Playfair Display", Georgia, "Times New Roman", serif;
  --f-testo:   "Config", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-dato:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Larghezza dei sostituti variabili: Archivo stretto imita Zuume, Archivo a
     larghezza piena imita Config. Se arrivano i font veri queste due righe si
     azzerano e basta. */
  --wdth-display: 62;
  --wdth-testo:   100;

  /* Scala.
     Il corpo e le sezioni restano dove la committente li ha voluti: sezione a
     32px, corpo a 17px, rapporto 2:1, come Burgess. Sale solo l'apertura di
     pagina, che si usa una volta sola e in condensato: 64px di Zuume occupano
     in larghezza quanto ~44px di un carattere normale, quindi la pagina resta
     composta e prende comunque il tono del rebrand. */
  --t-mega:      clamp(3.5rem, 1rem + 10.5vw, 11.5rem);    /* il manifesto, solo in homepage */
  --t-apertura:  clamp(2.75rem, 1.2rem + 6vw, 6.5rem);     /* 44 → 104 */
  --t-display:   clamp(1.875rem, 1.4rem + 1.9vw, 3rem);    /* 30 → 48 */
  --t-titolo-l:  clamp(1.5rem, 1.3rem + 0.85vw, 2rem);     /* 24 → 32 */
  --t-titolo:    1.5rem;                                   /* 24 */
  --t-titolo-s:  1.25rem;                                  /* 20 */
  --t-corpo-l:   1.0625rem;                                /* 17 */
  --t-corpo:     1rem;                                     /* 16 */
  --t-piccolo:   0.9375rem;                                /* 15 */
  --t-micro:     0.875rem;                                 /* 14 */

  --lh-mega:     0.86;
  --lh-apertura: 0.9;
  --lh-display:  1.06;
  --lh-titolo:   1.2;
  --lh-corpo:    1.6;
  --lh-dato:     1.5;

  --tr:           -0.02em;
  --tr-stretto:   -0.03em;
  --tr-etichetta:  0.08em;

  --peso-testo:  400;
  --peso-medio:  500;
  --peso-forte:  600;
  --peso-nero:   800;

  /* --- RITMO ------------------------------------------------------------- */

  --sp-1:  0.125rem;
  --sp-2:  0.25rem;
  --sp-3:  0.5rem;
  --sp-4:  0.75rem;
  --sp-5:  1rem;
  --sp-6:  1.5rem;
  --sp-7:  2rem;
  --sp-8:  2.5rem;
  --sp-9:  3rem;
  --sp-10: 4rem;
  --sp-11: 4.5rem;
  --sp-12: 6.5rem;

  --sezione:   clamp(var(--sp-9), 5vw + 1rem, var(--sp-12));
  --sezione-s: clamp(var(--sp-8), 4vw + 1rem, var(--sp-11));

  /* --- MISURE ------------------------------------------------------------
     Le fotografie disponibili hanno una larghezza mediana di 1064 px in
     locale e un quarto del catalogo online non arriva a 1440 px. Nessuna
     immagine viene stesa a piena larghezza: il tetto e --misura-foto. */

  --misura-prosa: 65ch;
  --misura-foto:  800px;
  --misura-dati:  1180px;
  --misura-largo: 1320px;
  --bordo-pagina: clamp(var(--sp-5), 4vw, var(--sp-9));

  /* --- FORMA -------------------------------------------------------------
     L'angolo di 30 gradi e la firma del marchio: sta nel segno tricolore,
     nel parallelogramma della targa e nella corsa dello script. Sul sito
     ricompare in tre punti soli, sempre lo stesso angolo:
       - il pulsante d'azione
       - il taglio d'angolo dei riquadri fotografici
       - i filetti che separano le fasce
     --scarto e lo spostamento orizzontale che 30 gradi producono su una data
     altezza: tan(30) = 0,577. Serve a compensare la spaziatura dopo lo skew. */

  --ang:        30deg;
  --ang-tan:    0.5774;
  --raggio:     2px;
  --filetto-sp: 1px;

  /* --- MOVIMENTO ---------------------------------------------------------
     Le curve sono quelle misurate sulle reference: Camper & Nicholsons usa
     .38,.005,.215,1 su 450ms per gli ingressi, Burgess sta su 300ms lineari
     per i cambi di colore. Due durate, due curve, nient'altro. */

  --t-micro-dur: 0.22s;
  --t-macro-dur: 0.6s;
  --t-foto-dur:  0.7s;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-marca:  cubic-bezier(0.38, 0.005, 0.215, 1);

  --z-sticky:   10;
  --z-testata:  100;
  --z-pannello: 200;
}

/* Nessun tema scuro automatico: Sea Service e il sito chiaro del gruppo,
   il navy pieno resta ai Cantieri. */


/* ==========================================================================
   AZZERAMENTO E BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo-corpo);
  font-family: var(--f-testo);
  font-variation-settings: "wdth" var(--wdth-testo);
  font-size: var(--t-corpo-l);
  font-weight: var(--peso-testo);
  line-height: var(--lh-corpo);
  letter-spacing: var(--tr);
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-weight: var(--peso-nero);
  line-height: var(--lh-titolo);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--testo);
  text-wrap: balance;
}
/* L'inclinato e la variante da manifesto, come sul sito dei Cantieri: una o
   due parole dentro un titolo, mai un paragrafo. */
h1 em, h2 em, h3 em { font-style: italic; font-synthesis: none; }

h1 { font-size: var(--t-display); line-height: var(--lh-display); }
h2 { font-size: var(--t-titolo-l); }
h3 { font-size: var(--t-titolo); }
h4 { font-size: var(--t-titolo-s); }

/* L'apertura si usa una volta per pagina, non a ogni sezione. */
.apertura-titolo {
  font-size: var(--t-apertura);
  line-height: var(--lh-apertura);
  letter-spacing: -0.035em;
}

/* La voce serif: l'anno, i numeri che contano, i richiami editoriali.
   Non e mai un titolo di sezione, e sempre un accento. */
.serif {
  font-family: var(--f-serif);
  font-variation-settings: normal;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

p { margin: 0 0 var(--sp-5); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--navy-30); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--azione); }

:focus-visible { outline: 2px solid var(--azione); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--lime); color: var(--navy); }


/* ==========================================================================
   UTILITA DI IMPAGINAZIONE
   ========================================================================== */

.contenitore { width: min(100% - var(--bordo-pagina) * 2, var(--misura-dati)); margin-inline: auto; }
.contenitore--largo { width: min(100% - var(--bordo-pagina) * 2, var(--misura-largo)); margin-inline: auto; }
.contenitore--prosa { width: min(100% - var(--bordo-pagina) * 2, var(--misura-prosa)); margin-inline: auto; }

.sezione { padding-block: var(--sezione); }
.sezione--stretta { padding-block: var(--sezione-s); }
.sezione--panna  { background: var(--sfondo-alt); }
.sezione--sabbia { background: var(--sfondo-sabbia); }
.sezione--navy   { background: var(--sfondo-scuro); color: var(--panna); }
.sezione--navy h1, .sezione--navy h2, .sezione--navy h3, .sezione--navy h4 { color: var(--panna); }
.sezione--navy a { text-decoration-color: var(--filetto-scuro); }

.prosa { max-width: var(--misura-prosa); font-size: var(--t-corpo-l); }
.prosa--larga { max-width: 78ch; }

/* Etichetta di sezione. Unico ornamento concesso, e porta il filetto a 30
   gradi che e la firma della marca. */
.etichetta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--f-testo);
  font-variation-settings: "wdth" 100;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--testo);
  margin: 0 0 var(--sp-5);
}
/* Come l'occhiello dei Cantieri, ma con la lastra arancio davanti: su fondo
   chiaro il testo arancio non regge il contrasto, la lastra si. */
.etichetta::before {
  content: "";
  flex: none;
  width: 16px;
  height: 11px;
  background: var(--arancio);
  transform: skewX(calc(var(--ang) * -1));
}
.etichetta--accento { color: var(--azione); }
.etichetta--nuda::before { display: none; }
.sezione--navy .etichetta { color: var(--panna); }

/* Il colore di reparto: un solo filetto per pagina, mai altrove. */
.reparto--refit      .etichetta::before { background: var(--verde); }
.reparto--management .etichetta::before { background: var(--mattone); }

.solo-lettori {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}


/* ==========================================================================
   BOTTONI
   L'azione e un parallelogramma a 30 gradi: e la targa del marchio, ridotta a
   comando. Lo skew sta sul contenitore, il testo viene raddrizzato dentro,
   cosi le lettere restano dritte e leggibili.
   Al passaggio il fondo non cambia tinta di colpo: una seconda lastra entra
   da sinistra sullo stesso angolo.
   ========================================================================== */

.btn {
  --alt: 46px;
  /* Lo strapiombo dello skew: mezza altezza per la tangente di 30 gradi.
     Il fondo viene rientrato di questa misura, cosi il parallelogramma
     finisce esattamente sui bordi del pulsante e non sporge dal contenitore.
     Senza, ogni pulsante regalava 13px di traboccamento orizzontale alla
     pagina, e su telefono si vedeva. */
  --sbieco: calc(var(--alt) * var(--ang-tan) / 2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alt);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
}

.btn__fondo {
  position: absolute;
  inset: 0 var(--sbieco);
  z-index: -1;
  overflow: hidden;
  background: var(--btn-fondo, var(--azione));
  transform: skewX(calc(var(--ang) * -1));
  border-radius: var(--raggio);
  transition: background var(--t-micro-dur) var(--ease);
}
.btn__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn-lastra, var(--navy));
  transform: translateX(-101%);
  transition: transform 0.32s var(--ease-marca);
}
.btn:hover .btn__fondo::after,
.btn:focus-visible .btn__fondo::after { transform: none; }

.btn__testo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  /* la meta dell'altezza per la tangente: compensa lo strapiombo dello skew */
  padding: var(--sp-4) calc(var(--sp-7) + var(--sbieco));
  color: var(--btn-testo, var(--navy));
  font-family: var(--f-testo);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t-micro-dur) var(--ease);
}

.btn:hover .btn__testo,
.btn:focus-visible .btn__testo { color: var(--btn-testo-hover, var(--panna)); }

/* Navy pieno: per il fondo arancio della fascia di chiamata. */
.btn--navy { --btn-fondo: var(--navy); --btn-testo: var(--panna); --btn-lastra: var(--panna); --btn-testo-hover: var(--navy); }

.btn__freccia {
  flex: none;
  width: 14px;
  transition: transform 0.32s var(--ease-marca);
}
.btn:hover .btn__freccia { transform: translateX(4px); }

/* Fantasma: solo il contorno, si riempie di navy entrando. */
.btn--fantasma .btn__fondo { background: none; box-shadow: inset 0 0 0 1px var(--navy-30); }
.btn--fantasma .btn__testo { color: var(--testo); }
.btn--fantasma:hover .btn__testo { color: var(--panna); }

.sezione--navy .btn--fantasma .btn__fondo { box-shadow: inset 0 0 0 1px var(--filetto-scuro); }
.sezione--navy .btn--fantasma .btn__fondo::after { background: var(--panna); }
.sezione--navy .btn--fantasma .btn__testo { color: var(--panna); }
.sezione--navy .btn--fantasma:hover .btn__testo { color: var(--navy); }

.sezione--navy .btn .btn__fondo::after { background: var(--panna); }
.sezione--navy .btn:hover .btn__testo,
.sezione--navy .btn:focus-visible .btn__testo { color: var(--navy); }

/* La misura per la testata: la lastra piena da 46px era la cosa piu pesante
   della barra, piu alta del blocco di navigazione che le sta accanto. */
.btn--piccolo { --alt: 36px; }
.btn--piccolo .btn__testo {
  padding: var(--sp-3) calc(var(--sp-5) + var(--sbieco));
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.btn--largo { width: 100%; }
.btn--largo .btn__testo { width: 100%; justify-content: center; }


/* ==========================================================================
   MOVIMENTO
   Il contenuto e visibile di default: e il JavaScript ad aggiungere
   .js-movimento e quindi a scegliere di animare. Se lo script non parte,
   manca l'animazione, non il contenuto.
   ========================================================================== */

.js-movimento .rivela {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-macro-dur) var(--ease),
              transform var(--t-macro-dur) var(--ease-marca);
}
.js-movimento .rivela.visto { opacity: 1; transform: none; }

/* Ritardo a cascata dentro una griglia: lo assegna il JavaScript. */
.js-movimento .rivela[style*="--ritardo"] { transition-delay: var(--ritardo); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}