/* Fazan. Foglio di stile principale.
   La tipografia sta in fonts.css, che va caricato prima di questo. */

:root {
  --nero:    #231F20;   /* nero di marca: 100% K delle etichette */
  --bianco:  #FFFFFF;
  --oro:     #9F8C50;   /* dal fondo pieno dell'esecutivo del Prosecco */
  /* Lo stesso oro su bianco fa 3,3:1 di contrasto, sotto il minimo leggibile
     per il testo piccolo. Su fondo scuro invece fa 4,9:1 e va bene. Quindi
     l'oro chiaro si usa sul nero, questo piu' scuro (4,8:1) sul bianco. */
  --oro-testo: #83713A;
  --fumo:    #6E6A68;   /* testo secondario */
  --filo:    rgba(35, 31, 32, .16);
  --filo-chiaro: rgba(255, 255, 255, .22);

  --sp:      clamp(64px, 9vw, 140px);   /* respiro fra le sezioni */
  --bordo:   clamp(24px, 6vw, 88px);    /* margine laterale */
  --max:     1320px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bianco);
  color: var(--nero);
  font-family: var(--f-testo);
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.contenuto { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--bordo); }

/* ---------- Tipi ricorrenti ---------- */

/* Capitale incisa: e' il carattere del marchio, va sempre maiuscola e larga. */
.incisa {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1.18;
}

/* Occhiello: piccolo, condensato, sopra i titoli. */
.occhiello {
  font-family: var(--f-dati);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--oro-testo);
}
/* Sul nero torna l'oro pieno, che li' ha contrasto sufficiente. */
.metodo .occhiello, .piede .occhiello { color: var(--oro); }

/* Titolo lungo, in tondo con le minuscole vere.
   Cinzel non ha minuscole: al loro posto disegna maiuscoletti, quindi una
   frase intera composta in Cinzel esce comunque tutta maiuscola. Per i titoli
   che sono frasi si usa Spectral, e Cinzel resta ai nomi e alle diciture
   brevi, che e' il suo mestiere. */
.frase {
  font-family: var(--f-testo);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.005em;
}

.testo-lungo { max-width: 60ch; }
.testo-lungo p + p { margin-top: 1.25em; }

/* Collegamento con filo sotto che si estende al passaggio del mouse. */
.filo {
  font-family: var(--f-dati);
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .18em;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  transition: opacity .25s;
}
.filo:hover { opacity: .55; }

/* ---------- Fotografie ---------- */
.scatto {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* Fotografia piena: riempie il riquadro e si lascia tagliare.
   Il punto di taglio si governa con --fuoco, perche' il centro quasi mai e'
   il posto giusto: sulla foto delle autoclavi il calice sta all'85% della
   larghezza e un taglio centrato lo taglia a meta'. */
.scatto--foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--fuoco, 50%) center;
}

/* Bottiglia scontornata: sta dentro, non si taglia mai, e ha sotto il campo
   rigato con un alone che le fa da appoggio. */
.scatto--bottiglia {
  background:
    radial-gradient(46% 30% at 50% 78%, rgba(159,140,80,.13) 0%, rgba(159,140,80,0) 72%),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.030) 0 1.5px, transparent 1.5px 9px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.016) 0 1px, transparent 1px 34px),
    linear-gradient(158deg, #34302F 0%, var(--nero) 58%, #131112 100%);
}
/* Ancorata ai bordi del riquadro invece che dimensionata in percentuale:
   dentro una griglia una altezza in percentuale dipende dalla riga, che a sua
   volta dipende dal contenuto, e il calcolo non si chiude. Cosi' invece il
   riquadro comanda sempre, e object-fit tiene le proporzioni. Le due bottiglie
   sono normalizzate alla stessa altezza in pixel, quindi affiancate risultano
   alte uguali come devono. */
.scatto--bottiglia img {
  position: absolute;
  inset: 7% 0 7% 0;
  width: 100%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.5));
}

/* Seconda foto che si rivela.
   Sta sotto alla bottiglia principale, alla stessa scala, e scivola fuori
   verso destra quando il mouse passa sull'immagine o su "Scopri". Sotto,
   perche' nell'HTML viene prima: chi viene prima sta sotto, senza z-index.

   Il :has() lega l'effetto a quei due soli bersagli. Passare sul testo della
   scheda non lo fa partire, ed e' voluto: si rivela quando stai guardando la
   bottiglia o stai per cliccare, non mentre leggi. */
.bottiglia-fluo {
  opacity: 0;
  transform: translateX(0) scale(.96);
  transition: transform .75s cubic-bezier(.22,.72,.2,1), opacity .45s ease;
  pointer-events: none;
}

@media (hover: hover) {
  /* Il passaggio sull'immagine non ha bisogno di :has(), perche' la foto
     nascosta sta dentro al riquadro: basta la discendenza. Tenuta separata
     apposta, cosi' questo mezzo effetto funziona comunque. */
  .vino--rivelazione .scatto:hover .bottiglia-fluo,
  /* Per "Scopri" serve invece risalire dal collegamento all'articolo. */
  .vino--rivelazione:has(.filo:hover) .bottiglia-fluo,
  .vino--rivelazione:has(.filo:focus-visible) .bottiglia-fluo {
    opacity: 1;
    transform: translateX(27%) scale(1);
  }
}

/* ---------- Segnaposto immagini ----------
   Non usati piu' nella home, servono alle pagine interne ancora da fare.
   Ognuno dichiara cosa ci va e a che proporzione: per sostituirlo basta
   metterci dentro una <img> e cambiare la classe in .scatto. */
.ph {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  background:
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.028) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, #34302F 0%, var(--nero) 62%, #161415 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ph::after {
  content: attr(data-ph);
  font-family: var(--f-dati);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  text-align: center;
  padding: 0 24px;
  max-width: 34ch;
  line-height: 1.9;
}

/* ---------- Testata ---------- */
.testata {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px var(--bordo);
  color: var(--bianco);
  transition: background .35s, color .35s, padding .35s;
}
.testata.compatta {
  background: var(--bianco);
  color: var(--nero);
  padding-block: 12px;
  box-shadow: 0 1px 0 var(--filo);
}
.testata__marchio { width: clamp(104px, 11vw, 148px); color: currentColor; }
.testata__marchio svg { width: 100%; height: auto; }

.navigazione { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
.navigazione a {
  font-family: var(--f-dati);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .18em;
  text-decoration: none;
  opacity: .9;
}
.navigazione a:hover { opacity: .55; }

.lingue { display: flex; gap: 10px; font-family: var(--f-dati); font-size: 13px; letter-spacing: .14em; }
/* La lingua non attiva e' un collegamento vero, quindi cade dentro
   `.navigazione a` che la porterebbe a 14px: qui torna alla misura del
   gruppo lingue, che e' un gradino sotto le voci di menu apposta. */
.lingue a {
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: .5;
}
.lingue a:hover { opacity: 1; }
.lingue [aria-current] { color: var(--oro); }
.lingue [aria-disabled] { opacity: .38; cursor: not-allowed; }

/* ---------- Apertura ----------
   Astratta per scelta: niente fotografia. Il campo nero con il tratteggio
   obliquo e' la firma della pagina. Le fotografie stanno nelle sezioni sotto,
   dove servono a mostrare qualcosa, non a fare da fondale. */
/* Tre strati, in quest'ordine: il muro pieno, la luce, le righe.
   L'ordine e' il punto: con la luce sotto la rigatura le righe restano nitide
   e la luce sembra venire da dietro, come da una finestra con la persiana. */
.apertura {
  position: relative;
  min-height: 100svh;
  display: grid;
  overflow: hidden;
  background: linear-gradient(158deg, #34302F 0%, var(--nero) 58%, #131112 100%);
}

/* L'alone. Il movimento lo guida lo script in fondo alla pagina: segue il
   puntatore con inerzia dove c'e' un mouse, e deriva da solo dove non c'e'.
   Qui sta solo la posizione di riposo, che e' anche quella che resta se lo
   script non parte o se il sistema chiede meno animazioni.

   Si muove per traslazione e non cambiando le coordinate del gradiente: la
   traslazione la fa la scheda grafica, il ricalcolo del gradiente no, e su un
   blocco grande quanto lo schermo la differenza si sente sui portatili. */
.apertura__alone {
  position: absolute;
  left: 50%; top: 44%;
  width: min(96vw, 1180px);
  aspect-ratio: 1.28;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(159,140,80,.22) 0%,
    rgba(159,140,80,.07) 44%,
    rgba(159,140,80,0) 70%);
  will-change: transform;
}

/* Il fluido. Sta sopra l'alone e sotto la rigatura, nello stesso posto della
   luce: cosi' il tratteggio gli resta nitido davanti e il movimento sembra
   venire da dietro la persiana, che e' il racconto di tutta l'apertura.

   In fusione "screen" perche' e' luce che si aggiunge, non vernice che
   copre: sul nero schiarisce, e dove il fluido e' fermo non fa nulla.
   L'opacita' e' bassa apposta. Se lo script non parte (niente WebGL, niente
   virgola mobile, o meno animazioni richieste) la tela resta a zero e non si
   vede: sotto c'e' gia' l'apertura completa. */
.apertura__fluido {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
  mix-blend-mode: screen;
  pointer-events: none;
}
.apertura__fluido.acceso { opacity: .58; }

@media (prefers-reduced-motion: reduce) {
  .apertura__fluido { display: none; }
}

/* Solo le righe, su fondo trasparente, cosi' la luce le passa sotto.
   Due passate a passo diverso: la seconda, piu' rada e piu' chiara, toglie la
   regolarita' meccanica e fa somigliare il campo a una carta rigata invece
   che a una texture ripetuta. */
.apertura__fondo {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.030) 0 1.5px, transparent 1.5px 9px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.016) 0 1px, transparent 1px 34px);
}

/* Vignettatura, sempre ferma: serve a chiudere i bordi e a tenere il testo
   leggibile mentre la luce sotto si sposta. */
.apertura__luce {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.62) 100%);
}
.apertura__dentro {
  position: relative;
  align-self: center;
  text-align: center;
  color: var(--bianco);
  padding: 140px var(--bordo) 90px;
  width: 100%;
}
.apertura__marchio { width: clamp(230px, 30vw, 400px); margin: 0 auto 40px; }
.apertura h1 {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(15px, 1.7vw, 22px);
  text-transform: uppercase;
  letter-spacing: .2em;
  line-height: 1.6;
}
/* Filo d'oro fra la tagline e la riga italiana: separa le due lingue senza
   metterci in mezzo un altro pezzo di testo. */
.apertura__filo {
  display: block;
  width: 54px; height: 1px;
  margin: 30px auto;
  background: linear-gradient(90deg, transparent, var(--oro) 22%, var(--oro) 78%, transparent);
}

.apertura__sotto {
  font-size: clamp(17px, 1.5vw, 21px);
  color: rgba(255,255,255,.82);
}
.apertura__giu {
  position: absolute;
  bottom: 34px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.6);
  font-family: var(--f-dati);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ---------- Manifesto ---------- */
.manifesto { padding-block: var(--sp); text-align: center; }
/* Niente font-family qui: la decide la classe sul titolo, .frase o .incisa. */
.manifesto h2 {
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 50px);
  max-width: 21ch;
  margin-inline: auto;
}
.manifesto .testo-lungo { margin: 40px auto 0; }
.manifesto__firma {
  margin-top: 48px;
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: clamp(14px, 1.5vw, 19px);
}

/* ---------- Metodo ---------- */
.metodo { background: var(--nero); color: var(--bianco); }
.metodo__griglia { display: grid; gap: 0; }
/* La foto delle autoclavi e' orizzontale, 1536x1024. Prima la sezione era
   alta quanto il testo e la foto veniva forzata in un riquadro verticale:
   perdeva meta' inquadratura e, per riempirlo su schermi a doppia densita',
   veniva ingrandita e sgranava. Ora e' l'immagine a dare l'altezza, in 4:3,
   e il testo le si centra accanto. Si taglia poco e non si ingrandisce mai. */
@media (min-width: 900px) {
  .metodo__griglia { grid-template-columns: 1fr 1fr; align-items: center; }
}
.metodo .scatto { --ratio: 4 / 3; }
.metodo__testo { padding: clamp(44px, 5vw, 76px) var(--bordo); }
.metodo h2 { font-size: clamp(28px, 3.2vw, 44px); margin: 18px 0 26px; }
.metodo p { color: rgba(255,255,255,.78); }
.metodo .filo { margin-top: 38px; color: var(--oro); }

/* ---------- I vini ---------- */
.vini { padding-block: var(--sp); }
.vini__intro { text-align: center; max-width: 46ch; margin: 0 auto clamp(48px, 6vw, 84px); }
.vini__intro h2 { font-size: clamp(24px, 2.8vw, 38px); margin: 16px 0 20px; }
.vini__intro p { color: var(--fumo); }

.vini__coppia { display: grid; gap: clamp(40px, 5vw, 72px); }
@media (min-width: 800px) { .vini__coppia { grid-template-columns: 1fr 1fr; } }

.vino { text-align: center; }

.vino__nome { font-size: clamp(21px, 2.3vw, 31px); margin-top: 34px; }
.vino__denominazione {
  font-family: var(--f-dati);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--oro);
  margin-top: 12px;
}
.vino p { margin: 20px auto 0; max-width: 40ch; color: var(--fumo); }
.vino .filo { margin-top: 28px; }

/* ---------- Piede ---------- */
.piede { background: var(--nero); color: rgba(255,255,255,.72); padding-block: clamp(56px, 6vw, 88px); }
.piede__alto { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start; }
.piede__marchio { width: 150px; color: var(--bianco); }
.piede a { color: inherit; }
.piede__contatti { font-size: 16px; line-height: 2; }
.piede__contatti a:hover { color: var(--oro); }
.piede__legale {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--filo-chiaro);
  font-family: var(--f-sans);
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(255,255,255,.5);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  justify-content: space-between;
}

/* ---------- Pagine interne ----------
   Non hanno l'apertura a tutto schermo, quindi il contenuto deve partire
   sotto la testata, che e' fissa. E la testata parte gia' chiara: non c'e'
   nessun fondo scuro sotto cui restare trasparente. */
.pagina { padding-top: clamp(92px, 10vw, 124px); }

/* Quando la pagina apre con una fascia scura, lo stacco bianco sotto la
   testata non serve: la fascia sale fino in cima e si prende lei l'aria che
   serve a stare sotto la testata fissa. Cosi' l'apertura e' un blocco pieno
   invece di un riquadro che galleggia. */
.pagina--apre-scuro { padding-top: 0; }
.pagina--apre-scuro > .fluorescente:first-child {
  padding-top: calc(clamp(92px, 10vw, 124px) + clamp(16px, 2.5vw, 36px));
}

.sezione { padding-block: clamp(48px, 6vw, 84px); }
.sezione--stretta { max-width: 940px; }
.intestazione { padding-bottom: clamp(28px, 3vw, 44px); }
.titolo-pagina { font-size: clamp(30px, 4.6vw, 62px); margin-top: 14px; }

/* Fascia a tutta larghezza: esce dal contenitore e tocca i bordi. */
.fascia { width: 100%; }

/* Testa di una pagina prodotto: bottiglia a sinistra, testo a destra. */
.vino-testa {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--bordo) clamp(40px, 5vw, 72px);
}
@media (min-width: 860px) { .vino-testa { grid-template-columns: 5fr 6fr; } }
/* Quando la testa della pagina segue una fascia scura non ha piu' lo stacco
   che le dava .pagina, e il testo partiva incollato al bordo della fascia.
   Il respiro glielo mette il contatto fra le due, non la sezione da sola. */
.fluorescente + .vino-testa { padding-top: clamp(54px, 6.5vw, 98px); }

.vino-testa__testo .vino__denominazione { margin: 14px 0 26px; }
.vino-testa__testo .filo { margin-top: 34px; }
/* La colonna della bottiglia e' piu' alta di quella del testo, quindi sotto
   resta gia' aria: sommarci anche il respiro pieno della sezione seguente
   spezzava la pagina in due. */
.vino-testa + .sezione { padding-top: clamp(18px, 2.2vw, 34px); }

/* Scheda tecnica. E' la griglia del catalogo, e va tenuta: etichette dei campi
   in condensato maiuscolo allineate a DESTRA, valori a sinistra. Quella
   colonna allineata a destra crea la linea verticale netta al centro, ed e'
   la scelta di carattere di tutto il layout originale. */
.scheda { display: grid; gap: 0; border-top: 1px solid var(--filo); }
@media (min-width: 680px) {
  .scheda { grid-template-columns: minmax(150px, 26%) 1fr; column-gap: clamp(24px, 3vw, 52px); }
}
.scheda dt {
  font-family: var(--f-dati);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fumo);
  padding-top: 18px;
}
.scheda dd { padding-bottom: 18px; border-bottom: 1px solid var(--filo); }
@media (min-width: 680px) {
  .scheda dt { text-align: right; padding: 18px 0; border-bottom: 1px solid var(--filo); }
  .scheda dd { padding: 18px 0; }
}

/* ---------- Etichetta fluorescente ----------
   Il ciano non e' scelto: e' campionato dalla banda che brilla nella foto al
   buio, #08FDFB, tinta 179 gradi. Per le lettere serve piu' chiaro, perche'
   un ciano puro a corpo grande su nero vibra e si legge peggio; il colore
   pieno resta nell'alone. */
.fluorescente {
  --fluo: #08FDFB;
  background:
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.030) 0 1.5px, transparent 1.5px 9px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.016) 0 1px, transparent 1px 34px),
    linear-gradient(158deg, #2C2827 0%, #171516 60%, #0E0D0D 100%);
  color: var(--bianco);
  padding-block: clamp(52px, 6.5vw, 92px);
}
.fluorescente__dentro {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--bordo);
  text-align: center;
}
.fluorescente__coppia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 3vw, 44px);
  align-items: end;
}
.fluorescente__scatto img {
  height: clamp(230px, 30vw, 420px);
  width: auto;
  margin-inline: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.6));
}
/* L'alone sotto la bottiglia al buio: e' la luce della banda che si posa. */
.fluorescente__scatto:last-child img {
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.6))
          drop-shadow(0 0 26px rgba(8,253,251,.20));
}
.fluorescente__scatto figcaption {
  font-family: var(--f-dati);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: rgba(255,255,255,.5);
  margin-top: 20px;
}

.brilla {
  color: #B6FCFA;
  font-size: clamp(22px, 3vw, 40px);
  margin-top: clamp(38px, 4.5vw, 62px);
  text-shadow:
    0 0 7px rgba(8,253,251,.55),
    0 0 24px rgba(8,253,251,.34),
    0 0 56px rgba(8,253,251,.20);
  animation: respiro 4.2s ease-in-out infinite alternate;
}
/* Un respiro appena percepibile: una luce fosforescente non sta ferma del
   tutto, ma non lampeggia nemmeno. */
@keyframes respiro {
  from { opacity: .82; }
  to   { opacity: 1; }
}

.fluorescente__riga {
  margin-top: 18px;
  color: rgba(255,255,255,.72);
}

.altro-vino { text-align: center; border-top: 1px solid var(--filo); }
.altro-vino h2 { font-size: clamp(22px, 2.6vw, 34px); margin: 14px 0 26px; }

/* ---------- Schermi stretti ----------
   Con quattro voci sole la barra sta ancora su una riga, basta stringerla e
   impedire che vada a capo. Se un giorno le voci diventano sei, qui serve un
   menu a scomparsa vero: questo e' il limite di questa soluzione. */
@media (max-width: 720px) {
  .testata { padding-inline: 20px; gap: 12px; }
  .testata__marchio { width: 84px; }
  .navigazione { gap: 14px; }
  .navigazione a { font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
  .lingue { font-size: 11px; gap: 6px; }
  .apertura__dentro { padding-top: 110px; }
  .piede__alto { gap: 30px; }
  .piede__legale { flex-direction: column; gap: 4px; }
}

/* ---------- Preferenze di sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}