/* Fia Family Farms · pagina vetrina per familywineries.it e vinowine.it
   Fondo scuro come pepici.com, foto di famiglia virata seppia,
   Bodoni Moda per i titoli (parente del FIA del logo), Newsreader per il testo. */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../font/bodoni-moda-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../font/jost-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../font/newsreader-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --fondo: #110e0b;
  --fondo-2: #1a1611;
  --carta: #ece4d6;
  --carta-tenue: #b9ae9c;
  --oro: #c9a46a;
  /* Le stesse tinte in componenti, per le trasparenze: rgba(var(--oro-rgb), .4). */
  --fondo-rgb: 17, 14, 11;
  --carta-rgb: 236, 228, 214;
  --carta-tenue-rgb: 185, 174, 156;
  --oro-rgb: 201, 164, 106;
  /* Il bianco del testo sui banner delle fiere. */
  --bianco: #fff;
  --linea: rgba(var(--carta-rgb), 0.38);
  --titolo: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --testo: "Newsreader", Georgia, "Times New Roman", serif;
  /* Solo dentro i banner delle fiere, come il carattere di Vinitaly. */
  --fiere: "Jost", "Century Gothic", system-ui, sans-serif;
  --colonna: 38rem;
  /* Etichetta: il ruolo delle piccole scritte in maiuscolo (sottotitolo,
     titoletti delle colture e dei gruppi, territori, firma del claim).
     Un solo carattere, una misura, uno spessore: prima erano tre famiglie
     e cinque misure fra 11,5 e 15px per lo stesso lavoro. Newsreader 500
     perche' a questa misura sul fondo scuro il Bodoni perde le grazie. */
  --etichetta-misura: 0.78rem;
  --etichetta-spaziatura: 0.22em;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--carta);
  font-family: var(--testo);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.65;
  font-optical-sizing: auto;
  /* Chiaro su scuro: un filo di peso in piu' del regolare, che sul fondo
     nero si assottiglia. */
  font-weight: 420;
}

p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; }

::selection { background: rgba(var(--oro-rgb), 0.85); color: var(--fondo); }

/* Etichetta, vedi --etichetta-misura. */
.sottotitolo,
.colture h3,
.claim figcaption,
.lingue {
  font-family: var(--testo);
  font-weight: 500;
  font-size: var(--etichetta-misura);
  letter-spacing: var(--etichetta-spaziatura);
  text-transform: uppercase;
  line-height: 1.4;
}

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

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--oro); }
a:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
/* Sul terracotta e sul viola delle fiere l'oro non arriva a 3:1. */
.fiera a:focus-visible { outline-color: var(--bianco); }

.salta {
  position: absolute; left: -999px; top: 0;
  background: var(--carta); color: var(--fondo); padding: 0.5rem 1rem;
}
.salta:focus { left: 1rem; top: 1rem; z-index: 10; }
.salta:hover { color: var(--fondo); text-decoration: underline; }

/* --- Testata -------------------------------------------------------- */

.testata {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem var(--gutter) 0;
}
/* Il primo obiettivo della pagina e' la mail a sales@: un rimando ai
   contatti sta sempre in alto, accanto alla lingua. */
.testata__contatto {
  font-weight: 500;
  font-size: var(--etichetta-misura);
  letter-spacing: var(--etichetta-spaziatura);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--oro);
  padding: 0.85rem 0.25rem;
}
.testata__contatto:hover { color: var(--carta); }

.lingue {
  display: flex; gap: 0.6rem; align-items: center;
  margin: 0; padding: 0; list-style: none;
}
.lingue li { display: flex; align-items: center; }
.lingue li + li::before { content: "|" / ""; margin-right: 0.6rem; color: var(--carta-tenue); }
.lingue a { display: inline-block; min-width: 2.75rem; text-align: center; text-decoration: none; color: var(--carta-tenue); padding: 0.85rem 0.35rem; }
.lingue a:hover { color: var(--carta); }
.lingue [aria-current="page"] { color: var(--carta); }
/* Sui telefoni piu' stretti «Wineries» non ci sta: si stringono gli spazi. */
@media (max-width: 24rem) {
  .testata { gap: 0.6rem; }
  .testata__contatto { letter-spacing: 0.12em; }
  .lingue a { min-width: 2.25rem; }
}

/* --- Apertura: logo e foto ------------------------------------------ */

.apertura {
  text-align: center;
  padding: clamp(2rem, 6vw, 4.5rem) var(--gutter) 0;
}

.apertura h1 { margin: 0 auto; width: min(19rem, 62vw); }
.apertura h1 img { width: 100%; }

.sottotitolo {
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
  /* Un luogo, non un titolo: piu' arioso delle altre etichette. */
  letter-spacing: 0.32em;
  color: var(--carta-tenue);
  text-wrap: balance;
}

.presentazione {
  max-width: 30ch;
  margin: 1.1rem auto 0;
  font-size: 1.12em;
  line-height: 1.45;
  text-wrap: balance;
}
.apertura__contatto { margin: 1.5rem 0 0; }
.apertura__contatto .bottone { margin-top: 0; max-width: 100%; flex-wrap: wrap; justify-content: center; row-gap: 0.4rem; }
@media (max-width: 22rem) {
  .apertura__contatto .bottone { padding-inline: 1.1rem; column-gap: 0.6rem; }
}

.foto {
  margin: clamp(2.5rem, 7vw, 5rem) auto 0;
  max-width: 72rem;
  padding: 0;
  overflow: hidden;
}
.foto img { width: 100%; aspect-ratio: 2408 / 1333; object-fit: cover; }

/* --- Racconto --------------------------------------------------------- */

.blocco {
  max-width: calc(var(--colonna) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 7rem) var(--gutter) 0;
}

.blocco h2 {
  margin: 0 0 1.5rem;
  font-family: var(--titolo);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.blocco h2 em { font-style: normal; color: var(--oro); }

.blocco p { margin: 0 0 1.2rem; }

.attacco {
  font-size: 1.18em;
  line-height: 1.5;
  text-wrap: balance;
}

/* --- Le tre colture ------------------------------------------------ */

.colture {
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
}
.colture li {
  position: relative;
  padding: 1.75rem 1.5rem 1.75rem 0;
}
/* La riga sopra ogni coltura e' un elemento a parte, cosi' si puo' disegnare. */
.colture li::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--linea);
  transform-origin: left center;
}
.colture h3 {
  margin: 0 0 0.6rem;
  color: var(--oro);
}
.colture p { margin: 0; color: var(--carta-tenue); font-size: 0.95em; line-height: 1.55; }

/* --- Le cantine ------------------------------------------------------------
   Il blocco e' piu' largo della colonna di testo per far posto alla mappa:
   titolo e introduzione stanno al centro. */

.blocco.marchi {
  max-width: calc(58rem + 2 * var(--gutter));
  text-align: center;
}
.marchi > h2,
.marchi > .attacco { max-width: var(--colonna); margin-inline: auto; }

/* --- La mappa delle cantine ----------------------------------------------
   Ricavata dalla pagina 3 della brochure FFF 2026: contorni, ombre e
   scritte a mano sono i suoi (contorni e ombre vettoriali, le quattro
   scritte in PNG perche' in vettoriale pesavano 128 KB). Le linee sono
   le sue curve ridisegnate come tratti, cosi' si possono animare. Le
   cantine stanno dove stanno nel catalogo: --x, --y e --w sono la loro
   posizione in percentuale del disegno, --r il rapporto del riquadro.
   Sotto i 40rem di larghezza le schede escono dal disegno e vanno in
   griglia sotto la mappa, e le linee spariscono. */

/* 48rem: piu' larga la mappa supera l'altezza di uno schermo. */
.mappa { container-type: inline-size; max-width: 48rem; margin: clamp(2.5rem, 6vw, 3.5rem) auto 0; }
.mappa__palco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
.mappa__disegno { display: block; width: 100%; height: auto; overflow: visible; }
/* Su telefono la cornice ritaglia il disegno attorno alle terre (x 74-356,
   y 128-372 del catalogo): il resto e' lo spazio delle schede, che qui
   stanno sotto. */
.mappa__cornice { grid-column: 1 / -1; position: relative; aspect-ratio: 282 / 244; overflow: hidden; }
.mappa__cornice .mappa__disegno { position: absolute; width: 127.66%; left: -12.06%; top: -32.79%; }

.mappa__ombra { fill: rgba(var(--oro-rgb), 0.16); }
.mappa__terra { fill: var(--carta); }
.mappa__scritte { opacity: 0.9; }
/* Ritaglio a zero scritto per esteso: da inset() a none il browser non
   anima, salta. */
.mappa__terra, .mappa__scritte { clip-path: inset(0 0 0 0); }
.mappa__punto circle { fill: var(--fondo); stroke: var(--carta); stroke-width: 0.55; }
.mappa__punto .mappa__alone {
  fill: none;
  stroke: var(--oro);
  stroke-width: 0.4;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes alone {
  0%   { transform: scale(1); opacity: 0.9; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}
.mappa__linea {
  fill: none;
  stroke: var(--oro);
  stroke-width: 0.55;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0.75;
  transition: opacity 0.4s, stroke-width 0.4s;
}
.mappa__linee { display: none; }

.mappa__marchio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  text-decoration: none;
  color: var(--carta-tenue);
}
.mappa__riquadro {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3.4;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(var(--oro-rgb), 0.42);
  background: rgba(var(--carta-rgb), 0.035);
  transition: border-color 0.4s, background-color 0.4s;
}
.mappa__riquadro { height: 4.5rem; }
.mappa__riquadro img { width: auto; height: auto; max-width: 82%; max-height: 2.9rem; }
/* Cinque schede in due colonne: l'ultima va al centro. */
.mappa__marchio--brancacci { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.625rem); }
.mappa__motto { font-size: 0.88rem; line-height: 1.3; }
/* Cosa fa ogni cantina, dai testi della brochure 2026: per un buyer conta
   piu' del motto. */
.mappa__vini { color: var(--carta); font-size: 0.82rem; line-height: 1.3; }
.mappa__sito .fiera__freccia { display: inline-block; width: 1em; margin-left: 0.4em; vertical-align: middle; }
.mappa__sito {
  overflow-wrap: anywhere;
  font-size: max(0.75rem, 0.86em);
  letter-spacing: 0.04em;
  color: var(--oro);
}
a.mappa__marchio:hover .mappa__riquadro,
a.mappa__marchio:focus-visible .mappa__riquadro { border-color: var(--oro); background: rgba(var(--oro-rgb), 0.1); }
a.mappa__marchio:hover { color: var(--carta); }

/* Disegno largo: le schede tornano al loro posto sulla mappa. */
@container (min-width: 40rem) {
  .mappa__palco { display: block; position: relative; }
  .mappa__cornice { aspect-ratio: auto; overflow: visible; }
  .mappa__cornice .mappa__disegno { position: static; width: 100%; }
  .mappa__marchio--brancacci { width: var(--w); }
  .mappa__linee { display: inline; }
  .mappa__marchio {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    gap: 0.4em;
    font-size: clamp(0.75rem, 1.75cqi, 0.95rem);
  }
  .mappa__riquadro { height: auto; aspect-ratio: var(--r); padding: 0.4em; }
  .mappa__riquadro img { max-height: 74%; }
  .mappa__motto { font-size: 1em; white-space: nowrap; }
  .mappa__vini { font-size: max(0.78rem, 0.92em); white-space: nowrap; margin-top: -0.15em; }
  /* Le linee arrivano sotto i riquadri: i testi le coprono invece di
     esserne tagliati. */
  .mappa__motto, .mappa__vini, .mappa__sito { background: var(--fondo); padding-inline: 0.35em; }
  /* Passando su una cantina si accende la sua linea. */
  .mappa:has(.mappa__marchio--clos:hover) .mappa__linea--clos,
  .mappa:has(.mappa__marchio--clos:focus-visible) .mappa__linea--clos,
  .mappa:has(.mappa__marchio--lanoire:hover) .mappa__linea--lanoire,
  .mappa:has(.mappa__marchio--lanoire:focus-visible) .mappa__linea--lanoire,
  .mappa:has(.mappa__marchio--smeraldi:hover) .mappa__linea--smeraldi,
  .mappa:has(.mappa__marchio--smeraldi:focus-visible) .mappa__linea--smeraldi,
  .mappa:has(.mappa__marchio--ciabot:hover) .mappa__linea--ciabot,
  .mappa:has(.mappa__marchio--ciabot:focus-visible) .mappa__linea--ciabot,
  .mappa:has(.mappa__marchio--brancacci:hover) .mappa__linea--brancacci,
  .mappa:has(.mappa__marchio--brancacci:focus-visible) .mappa__linea--brancacci { opacity: 1; stroke-width: 0.9; }
}

/* Comparsa: le terre si disegnano da sinistra, l'ombra scivola sotto,
   i punti si accendono, le linee partono dai punti e arrivano alle
   cantine, che compaiono per ultime. Tutto sotto .anima, che mette
   anima.js: senza script la mappa e' gia' completa. */
.anima .mappa:not(.visto) .mappa__terra,
.anima .mappa:not(.visto) .mappa__scritte { clip-path: inset(0 100% 0 0); }
.anima .mappa:not(.visto) .mappa__ombra { opacity: 0; transform: translate(-6px, -6px); }
.anima .mappa:not(.visto) .mappa__punto { opacity: 0; }
.anima .mappa:not(.visto) .mappa__linea { stroke-dashoffset: 1; }
.anima .mappa:not(.visto) .mappa__marchio { opacity: 0; transform: translateY(10px); }

/* Tempi stretti: le cantine devono esserci entro un secondo e mezzo,
   chi scorre in fretta non aspetta che la mappa finisca. */
.mappa.visto .mappa__terra,
.mappa.visto .mappa__scritte { transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1); }
.mappa.visto .mappa__ombra { transition: opacity 1s ease 0.5s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s; }
.mappa.visto .mappa__alone { animation: alone 3.2s cubic-bezier(0.22, 1, 0.36, 1) calc(1s + var(--i) * 0.3s) 1; }
.mappa.visto .mappa__punto { transition: opacity 0.5s ease calc(0.8s + var(--i) * 0.1s); }
.mappa.visto .mappa__linea { transition: stroke-dashoffset 0.8s cubic-bezier(0.65, 0, 0.35, 1) calc(0.9s + var(--i) * 0.12s), opacity 0.4s, stroke-width 0.4s; }
.mappa.visto .mappa__marchio { transition: opacity 0.7s ease calc(0.6s + var(--i) * 0.12s), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(0.6s + var(--i) * 0.12s); }

@media (prefers-reduced-motion: reduce) {
  .mappa__punto .mappa__alone { animation: none; opacity: 0; }
}


/* --- Claim -------------------------------------------------------------- */

.claim {
  margin: clamp(5rem, 12vw, 9rem) 0 0;
  padding: clamp(4rem, 10vw, 7rem) var(--gutter);
  background: var(--fondo-2);
  text-align: center;
}
.claim p {
  margin: 0 auto;
  max-width: 22ch;
  text-wrap: balance;
  font-family: var(--titolo);
  font-size: clamp(2.2rem, 1.2rem + 4.5vw, 4.8rem);
  line-height: 1.05;
}
.claim blockquote { margin: 0; }
.claim figcaption { display: block; margin-top: 1.5rem; color: var(--carta-tenue); }

/* --- Contatti -----------------------------------------------------------
   L'obiettivo della pagina, subito dopo il claim: la mail grande e i
   telefoni. Il piede resta per indirizzo e dati legali. */
.contatti { text-align: center; }
.contatti > p { margin-inline: auto; max-width: 34rem; }
.contatti > .contatti__mail { margin-top: 1.75rem; }
.contatti__mail a {
  font-family: var(--titolo);
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem);
  line-height: 1.1;
  text-decoration: underline;
  text-decoration-color: rgba(var(--oro-rgb), 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
.contatti__mail a:hover { color: var(--oro); text-decoration-color: currentColor; }
.contatti__telefoni { color: var(--carta-tenue); }
.contatti__telefoni a { display: inline-block; padding: 0.5rem 0.1rem; color: var(--carta); }

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

.piede {
  padding: clamp(3.5rem, 8vw, 5rem) var(--gutter) 2.5rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--carta-tenue);
}
.piede img { width: 7.5rem; margin: 0 auto 2rem; opacity: 0.9; }
.piede address { font-style: normal; }
.piede p { margin: 0; }
.piede .legale { margin-top: 1.5rem; font-size: 0.8rem; letter-spacing: 0.04em; }
.piede a { display: inline-block; padding: 0.55rem 0.1rem; text-decoration: underline; text-decoration-color: rgba(var(--carta-tenue-rgb), 0.45); }
.piede a:hover { color: var(--carta); text-decoration-color: currentColor; }

@media (min-width: 40rem) {
  .colture { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  .colture li { padding-right: 0; }
  .sottotitolo { font-size: 0.72rem; letter-spacing: 0.15em; }
}

/* --- Banner delle fiere ---------------------------------------------------
   Wine Paris e Vinitaly 2027, in ordine di calendario. Struttura ricreata
   dal banner di pepici.com: fascia colorata con cornice sottile, onde di
   luce che derivano piano e un riflesso che passa ogni nove secondi.
   Ogni fiera cambia solo le variabili dei colori. Le misure del testo
   seguono la larghezza del banner (unita' cqi), non quella della finestra,
   cosi' reggono sia affiancati sia uno sopra l'altro.

   Ogni fascia ha il colore della sua fiera e il logo in bianco.
   Vinitaly: PNG bianco del kit espositori su MarketingC, senza payoff.
   Wine Paris: SVG dato da Eliana il 21/10, ripassato in bianco; il fondo
   parte dal terracotta del logo (#b04c30). */

.fiere {
  display: grid;
  gap: 2.5rem;
  max-width: 72rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
}
/* Senza bottoni la foto arriverebbe a ridosso dei banner: almeno lo
   stesso respiro che c'e' fra un banner e l'altro. */
.fiere + .foto { margin-top: clamp(3.5rem, 8vw, 5rem); }
/* Affiancati da tablet in su: uno sopra l'altro occupano piu' di uno
   schermo e spingono la foto troppo in basso. */
@media (min-width: 40rem) {
  .fiere { grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2rem); }
}

.fiera {
  --fiera-fondo: linear-gradient(118deg, #4e1656 0%, #6e2173 45%, #842a83 100%);
  --fiera-luce: rgba(214, 120, 200, 0.35);
  --fiera-pieno: linear-gradient(118deg, #6e2173, #8f2d8c);
  --fiera-filo-hover: #a94aa5;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fiera { --fiera-testo: var(--bianco); }
.fiera--wineparis {
  --fiera-fondo: linear-gradient(118deg, #5e2213 0%, #84341f 48%, #a8472c 100%);
  --fiera-luce: rgba(240, 170, 130, 0.32);
  --fiera-pieno: linear-gradient(118deg, #84341f, #b04c30);
  --fiera-filo-hover: #c9603f;
}

.fiera__fascia {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  align-self: stretch;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(12rem, 40cqi, 17rem);
  padding: clamp(2rem, 7cqi, 3.5rem) clamp(1.75rem, 5cqi, 3rem);
  background:
    radial-gradient(120% 140% at 85% -20%, var(--fiera-luce), transparent 60%),
    var(--fiera-fondo);
  color: var(--bianco);
  font-family: var(--fiere);
  font-weight: 300;
  text-transform: uppercase;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
/* Cornice a filo, staccata dal bordo come un passe-partout. */
.fiera__fascia::before {
  content: "";
  position: absolute;
  inset: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
  z-index: 1;
}
.fiera__onda {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: rgba(255, 255, 255, 0.055);
}
.fiera__onda--1 { width: 140%; height: 200%; left: -80%; top: 22%; animation: deriva 4.5s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 1 both; }
.fiera__onda--2 { width: 120%; height: 170%; right: -62%; top: -132%; animation: deriva 4.5s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 1 reverse both; }
/* Ogni movimento automatico dura meno di 5 secondi (WCAG 2.2.2): le onde
   si assestano una volta in 4,5 s, il riflesso passa una volta sola in
   2,5 s, gli aloni della mappa battono solo quando la mappa compare.
   Il riflesso passa una volta sola sulla fascia. Sul secondo banner
   parte dopo, cosi' i due non lampeggiano insieme. */
.fiera__fascia::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.13) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-18deg);
  animation: riflesso 2.5s cubic-bezier(0.45, 0, 0.25, 1) 2.6s 1 both;
  pointer-events: none;
}
.fiera--vinitaly .fiera__fascia::after { animation-delay: 3.4s; }
.fiera__fascia > p { position: relative; z-index: 2; }

@keyframes deriva {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(6%, -4%) rotate(4deg); }
}
@keyframes riflesso {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(330%) skewX(-18deg); }
}

.fiera__invito {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35em 1em;
  flex-wrap: wrap;
  margin: 0;
  font-size: clamp(0.95rem, 3.6cqi, 1.7rem);
  letter-spacing: 0.24em;
  line-height: 1;
}
.fiera__invito span { flex-basis: 100%; }
.fiera__invito img {
  height: clamp(4.2rem, 15cqi, 5.6rem);
  width: min(100%, clamp(9.5rem, 34cqi, 16rem));
  object-fit: contain;
  margin-top: 0.2em;
}

/* Il logo Wine Paris e' lungo e basso: piu' largo di Vinitaly, con un
   po' d'aria sopra e sotto perche' le due fasce abbiano lo stesso peso. */
.fiera__invito img.fiera__logo-wp { width: min(100%, clamp(13rem, 56cqi, 21rem)); }

.fiera__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 1.4rem 0 0;
  font-size: clamp(0.78rem, 2.6cqi, 1.08rem);
  letter-spacing: 0.24em;
  line-height: 1.4;
}
.fiera__date span { white-space: nowrap; }
/* Finche' non ci sono i link per prenotare, l'incontro si chiede per mail:
   e' l'unica azione vera del banner. */
.fiera__incontro {
  margin: 0.6rem 0 -0.5rem;
  font-size: clamp(0.82rem, 2.6cqi, 1.02rem);
  letter-spacing: 0.04em;
  text-transform: none;
}
.fiera__incontro a {
  display: inline-block;
  padding: 0.7rem 0.25rem;
  color: var(--bianco);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  text-underline-offset: 0.25em;
}
.fiera__incontro a:hover { text-decoration-color: var(--bianco); }
.fiera__incontro .fiera__freccia { display: inline-block; width: 1.3em; margin-left: 0.55em; vertical-align: middle; }
.fiera__incontro a:hover .fiera__freccia { width: 1.9em; }
.fiera__date::before,
.fiera__date::after {
  content: "";
  flex: 0 1 3.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}

/* Bottone: filo dorato su fondo scuro, maiuscoletto spaziato e freccia.
   Al passaggio il colore della fiera riempie da sinistra. Da quando
   serve anche fuori dai banner (la mail a sales@ in apertura) e' .bottone:
   fuori dalle fiere usa il ruolo etichetta e si riempie d'oro tenue, dentro
   un banner torna in Jost e prende il colore della fiera. */
.bottone {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 1.05rem 1.9rem 1.05rem 2.1rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(var(--oro-rgb), 0.7);
  background: rgba(var(--fondo-rgb), 0.6);
  color: var(--carta);
  font-family: var(--testo);
  font-size: var(--etichetta-misura);
  font-weight: 500;
  letter-spacing: var(--etichetta-spaziatura);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s;
}
.fiera .bottone { font-family: var(--fiere); font-weight: 400; }
.bottone__mail { text-transform: none; letter-spacing: 0.06em; font-size: 1.12em; }
.bottone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fiera-pieno, rgba(var(--oro-rgb), 0.2));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.fiera__freccia {
  position: relative;
  flex: none;
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fiera__freccia::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.bottone:hover,
.bottone:focus-visible { color: var(--fiera-testo, var(--carta)); border-color: var(--fiera-filo-hover, var(--oro)); }
.bottone:hover::before,
.bottone:focus-visible::before { transform: scaleX(1); }
.bottone:hover .fiera__freccia,
.bottone:focus-visible .fiera__freccia { width: 2.4rem; }
a.bottone:not([href]) { cursor: default; }

/* Banner stretto (telefono, o tablet con i banner affiancati): fili via,
   citta' a capo, spaziature piu' corte. */
@container (max-width: 26rem) {
  .fiera__invito { letter-spacing: 0.18em; }
  .fiera__date { letter-spacing: 0.16em; }
  .fiera__date::before, .fiera__date::after { display: none; }
  .fiera__date span { white-space: normal; }
  .fiera__luogo { display: block; margin-top: 0.3em; }
  .fiera__sep { display: none; }
}
/* Il bottone ha tre misure, decise dalla larghezza del banner: piena
   sopra 32rem, compatta sotto, e senza freccia sotto 20.5rem perche' il
   testo italiano di Wine Paris stia comunque su una riga. */
@container (max-width: 32rem) {
  .fiera .bottone { font-size: 0.7rem; letter-spacing: 0.06em; padding-inline: 1rem 0.95rem; gap: 0.6rem; }
  .fiera__freccia { width: 1.2rem; }
}
@container (max-width: 20.5rem) {
  .fiera .bottone { padding-inline: 0.9rem; }
  .fiera__freccia { display: none; }
}

/* --- Movimento ------------------------------------------------------------
   Due livelli. L'apertura (logo, sottotitolo, foto) e' solo CSS: parte al
   caricamento e non dipende da nessuno script. Le comparse allo scorrimento
   invece nascondono il testo, quindi valgono solo sotto .anima, che mette
   assets/js/anima.js dopo aver acceso l'osservatore. Senza script, o con
   uno script vecchio dalla cache, la pagina resta tutta visibile. */

@keyframes affiora {
  from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes spazia {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes avvicina {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}

.apertura h1 img { animation: affiora 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.sottotitolo { animation: spazia 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both; }
.fiere { animation: affiora 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both; }
.foto img { animation: avvicina 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both; }

/* La transizione sta solo sulla comparsa: se stesse anche sulla
   scomparsa, mettere .anima farebbe sfumare via il testo gia' disegnato. */
.anima .rivela.visto {
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--ritardo, 0s),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--ritardo, 0s);
}
.anima .rivela:not(.visto) { opacity: 0; transform: translateY(18px); }

.anima .colture li.visto::before {
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1) var(--ritardo, 0s);
}
.anima .colture li:not(.visto)::before { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  .apertura h1 img, .sottotitolo, .fiere, .foto img, .fiera__onda { animation: none; }
  .fiera__fascia::after { display: none; }
  .bottone, .bottone::before, .fiera__freccia { transition: none; }
  .anima .rivela.visto, .anima .colture li.visto::before { transition: none; }
  .anima .rivela:not(.visto) { opacity: 1; transform: none; }
  .anima .colture li:not(.visto)::before { transform: none; }
}

/* --- Pagina 404 ------------------------------------------------------------ */

.errore {
  min-height: 78vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 4rem var(--gutter) 2rem;
  text-align: center;
}
.errore__logo { width: min(12rem, 48vw); margin-bottom: 3rem; }
.errore__logo img { width: 100%; animation: affiora 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.errore h1 {
  margin: 0 0 1.25rem;
  max-width: 18ch;
  font-family: var(--titolo);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  line-height: 1.1;
  text-wrap: balance;
}
.errore p { margin: 0 0 0.6rem; max-width: 34rem; color: var(--carta-tenue); }
.errore p.errore__link { margin-top: 1.5rem; color: var(--carta); letter-spacing: 0.04em; }
.errore__link a { display: inline-block; padding: 0.7rem 0.25rem; }
.piede .legale:only-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .errore__logo img { animation: none; }
}

/* Stampa: quello che non era ancora comparso esce comunque. */
@media print {
  .anima .rivela:not(.visto),
  .anima .mappa:not(.visto) .mappa__marchio { opacity: 1; transform: none; }
  .anima .mappa:not(.visto) .mappa__terra,
  .anima .mappa:not(.visto) .mappa__scritte { clip-path: none; }
  .anima .mappa:not(.visto) .mappa__linea { stroke-dashoffset: 0; }
  .anima .mappa:not(.visto) .mappa__ombra,
  .anima .mappa:not(.visto) .mappa__punto { opacity: 1; transform: none; }
  .fiera__fascia::after { display: none; }
}