/* ── sito.css — "rivista di territorio" ───────────────────────────────────
   Base grafica comune a tutte le pagine: crema dominante, fotografia
   edge-to-edge, tipografia grande, quasi nessun ornamento. La palette e i
   font restano quelli del piano; cambia la composizione.

   Nata per le quattro pagine delle porte, promossa a base del sito il
   13 agosto 2026 quando anche la home è passata a questo linguaggio.    */

:root { --bronzo:#9A7B4F; --nero:#141210; --crema:#F7F0E3; --vinaccia:#5E1F2B; }
html { scroll-behavior: smooth; }
body { font-family:'Fira Sans',system-ui,sans-serif; font-weight:300; background:var(--crema); color:var(--nero); }
::selection { background:#5E1F2B; color:#F7F0E3; }
picture { display:contents; }

.eyebrow { letter-spacing:.3em; font-size:.62rem; text-transform:uppercase; font-weight:500; }
.eyebrow a { color:inherit; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.1em;
  opacity:.75; transition:opacity .3s; }
.eyebrow a:hover { opacity:1; }

/* ── reveal: le foto si aprono, il testo sale appena ─────────────────── */
.reveal { opacity:0; transform:translateY(22px); transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity:1; transform:none; }
.reveal-d1 { transition-delay:.1s } .reveal-d2 { transition-delay:.2s } .reveal-d3 { transition-delay:.3s }

.foto { overflow:hidden; }
.foto img { display:block; width:100%; height:100%; object-fit:cover; }
@media (prefers-reduced-motion: no-preference) {
  .foto.reveal img { transform:scale(1.06); transition:transform 1.6s cubic-bezier(.22,.61,.36,1); }
  .foto.reveal.in img { transform:none; }
}

/* didascalia da rivista: fuori dalla foto, piccola, con il filo bronzo */
.dida { display:flex; align-items:baseline; gap:.8rem; margin-top:.9rem;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:#1412108c; }
.dida::before { content:''; width:2rem; height:1px; background:var(--bronzo); align-self:center; flex:none; }

/* ── nav ──────────────────────────────────────────────────────────────
   Era in mix-blend-mode:difference, che si inverte da sé sui fondi netti ma
   sul fogliame chiaro dell'hero dava un grigio contro un altro grigio: le
   voci sparivano. E stando fissa e trasparente si sovrapponeva ai testi che
   le scorrevano sotto. Ora: trasparente solo in cima, dove c'è il velo
   dell'hero a reggerla; appena si scorre prende un fondo pieno. E si ritrae
   scorrendo in giù, così non copre mai quello che si sta leggendo. */
.nav-porta { position:fixed; top:0; left:0; right:0; z-index:50; color:#F7F0E3;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), background-color .4s, border-color .4s; }
.nav-porta a { color:inherit; text-decoration:none; }
.nav-porta .voci a { opacity:.78; transition:opacity .3s; }
.nav-porta .voci a:hover { opacity:1; }
.nav-porta .voci a[aria-current="page"] { opacity:1; border-bottom:1px solid currentColor; padding-bottom:.25em; }

/* in cima: nuda sopra l'hero, con l'ombra a staccarla dalla fotografia */
.nav-porta[data-stato="cima"] { background:transparent; border-bottom:1px solid transparent; }
.nav-porta[data-stato="cima"] a,
.nav-porta[data-stato="cima"] .menu-bottone { text-shadow:0 1px 14px rgba(20,18,16,.75); }
.nav-porta[data-stato="cima"] .barre i { box-shadow:0 1px 10px rgba(20,18,16,.75); }

/* scorrendo: fondo pieno, leggibile su qualunque sezione ci passi sotto */
.nav-porta[data-stato="fissa"] {
  background:rgba(16,13,12,.94); backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid rgba(247,240,227,.1);
}

/* si ritrae mentre si scende, torna appena si risale */
.nav-porta[data-nascosta="true"] { transform:translateY(-100%); }
body.menu-aperto .nav-porta { transform:none; }

/* ── hero: la clip della zona, il titolo, nient'altro ────────────────── */
.hero-porta { position:relative; height:100svh; min-height:560px; overflow:hidden; background:var(--nero); color:var(--crema); }
.hero-porta video, .hero-porta > img.still { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* La fascia alta è più densa di prima: su una scena chiara — la sala del
   ristorante, il fogliame del pergolato — con .3 la nav e l'occhiello
   sparivano dentro la fotografia. */
.hero-porta .velo { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(20,18,16,.74) 0%, rgba(20,18,16,.14) 46%, rgba(20,18,16,.58) 100%); }
.hero-titolo { font-family:'Fraunces',Georgia,serif; font-weight:300; letter-spacing:-.015em; line-height:.98;
  font-size:clamp(3rem,10vw,8.2rem); }
.hero-titolo em { font-style:italic; }
/* entrata orchestrata al caricamento */
.alza { opacity:0; transform:translateY(30px); animation:alza 1.1s cubic-bezier(.22,.61,.36,1) forwards; }
.alza-2 { animation-delay:.15s } .alza-3 { animation-delay:.3s } .alza-4 { animation-delay:.45s }
@keyframes alza { to { opacity:1; transform:none } }

.link-quieto { display:inline-flex; align-items:center; gap:.9rem; text-decoration:none;
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; font-weight:500; color:inherit; }
.link-quieto::after { content:'→'; font-size:1rem; letter-spacing:0; transition:transform .35s; }
.link-quieto:hover::after { transform:translateX(7px); }

.btn-pieno { display:inline-block; background:var(--nero); color:var(--crema); padding:1.05rem 2.4rem;
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; font-weight:500; text-decoration:none;
  transition:background .3s, color .3s; border:0; cursor:pointer; }
.btn-pieno:hover { background:var(--bronzo); }
.btn-pieno.chiaro { background:var(--crema); color:var(--nero); }
.btn-pieno.chiaro:hover { background:var(--bronzo); color:var(--crema); }

/* ── interludio: il testo respira da solo ────────────────────────────── */
.interludio { padding:clamp(6rem,14vh,10rem) 1.5rem; }
.interludio-testo { font-family:'Fraunces',Georgia,serif; font-weight:300; line-height:1.28;
  font-size:clamp(1.5rem,3vw,2.4rem); letter-spacing:-.01em; }
.interludio-testo em { font-style:italic; color:var(--bronzo); }

/* ── barra doppia mobile ─────────────────────────────────────────────── */
.barra-doppia { position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:1fr 1fr;
  transform:translateY(100%); transition:transform .45s cubic-bezier(.22,.61,.36,1); }
.barra-doppia.su { transform:none; }
.barra-doppia a { display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05rem .5rem; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; text-decoration:none; }
.barra-doppia .b-prenota { background:#9A7B4F; color:#F7F0E3; }
.barra-doppia .b-shop { background:#141210; color:#F7F0E3; border-left:1px solid #F7F0E31f; }
@media (min-width:1024px) { .barra-doppia { display:none; } }

/* ── le altre porte: trittico pieno, senza cornici ───────────────────── */
.trittico { display:grid; grid-template-columns:1fr; }
@media (min-width:640px){ .trittico { grid-template-columns:repeat(3,1fr); } }
.trittico a { position:relative; display:block; overflow:hidden; height:min(46vh,420px); color:#F7F0E3; text-decoration:none; }
.trittico img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.22,.61,.36,1); }
.trittico a:hover img { transform:scale(1.045); }
.trittico .velo { position:absolute; inset:0; background:rgba(15,12,10,.34); transition:background .5s; }
.trittico a:hover .velo { background:rgba(15,12,10,.16); }
.trittico .testo { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; text-align:center; }
.trittico h3 { font-family:'Fraunces',Georgia,serif; font-weight:300; font-size:clamp(1.7rem,2.6vw,2.3rem); line-height:1; }
.trittico .eyebrow { color:#F7F0E3b3; font-size:.56rem; }

/* pannello che entra dal basso: schede regione, riepiloghi, passi del modulo */
.fade-in-panel { animation:fadeUp .55s cubic-bezier(.22,.61,.36,1) both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }

/* ── menu a tutto schermo ─────────────────────────────────────────────────
   Costruito da js/menu.js e condiviso da tutte le pagine: prima viveva solo
   nella home, e dalle altre pagine su telefono non si navigava più.
   Rispetto al menu del sito attuale: niente accordion (tutte le sotto-voci
   in chiaro), le due azioni sempre in fondo allo schermo, e la metà destra
   che lavora — mostra la scena della voce puntata e tiene i recapiti. */
.menu-bottone { display:inline-flex; align-items:center; gap:.7rem; cursor:pointer;
  background:none; border:0; color:inherit; font:inherit; padding:0; }
.menu-bottone .barre { position:relative; width:22px; height:9px; }
.menu-bottone .barre i { position:absolute; left:0; width:100%; height:1px; background:currentColor;
  transition:transform .4s cubic-bezier(.22,.61,.36,1); }
.menu-bottone .barre i:first-child { top:0 } .menu-bottone .barre i:last-child { bottom:0 }
body.menu-aperto .menu-bottone .barre i:first-child { transform:translateY(4px) rotate(45deg); }
body.menu-aperto .menu-bottone .barre i:last-child { transform:translateY(-4px) rotate(-45deg); }

.menu-schermo { position:fixed; inset:0; z-index:70; background:#100d0c; color:#F7F0E3;
  visibility:hidden; opacity:0; transition:opacity .45s ease, visibility .45s;
  display:flex; flex-direction:column; overflow-y:auto; }
body.menu-aperto .menu-schermo { visibility:visible; opacity:1; }
body.menu-aperto { overflow:hidden; }

.menu-voce { display:block; padding:.55rem 0; text-decoration:none; color:inherit;
  transition:padding-left .45s cubic-bezier(.22,.61,.36,1); }
.menu-voce h3 { font-family:'Fraunces',Georgia,serif; font-weight:300; line-height:1.02;
  font-size:clamp(2rem,4.4vw,3.1rem); transition:color .35s; }
.menu-voce h3 em { font-style:italic; color:#9A7B4F; }
.menu-voce .sotto { display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; margin-top:.35rem; }
.menu-voce .sotto span { font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:#F7F0E355;
  transition:color .35s; }
.menu-voce:hover { padding-left:1rem; }
.menu-voce:hover h3, .menu-voce:focus-visible h3 { color:#D8B889; }
.menu-voce:hover .sotto span { color:#F7F0E38c; }
.menu-voce[aria-current="page"] h3 { color:#D8B889; }
.menu-voce[data-presto] h3 { color:#F7F0E359; }
.menu-voce[data-presto]:hover h3 { color:#F7F0E38c; }

/* le voci salgono in sequenza, ma solo all'apertura */
.menu-riga { opacity:0; transform:translateY(16px); transition:opacity .5s, transform .5s cubic-bezier(.22,.61,.36,1); }
body.menu-aperto .menu-riga { opacity:1; transform:none; }
body.menu-aperto .menu-riga:nth-child(1) { transition-delay:.08s }
body.menu-aperto .menu-riga:nth-child(2) { transition-delay:.13s }
body.menu-aperto .menu-riga:nth-child(3) { transition-delay:.18s }
body.menu-aperto .menu-riga:nth-child(4) { transition-delay:.23s }
body.menu-aperto .menu-riga:nth-child(5) { transition-delay:.28s }
body.menu-aperto .menu-riga:nth-child(6) { transition-delay:.33s }
body.menu-aperto .menu-riga:nth-child(7) { transition-delay:.38s }

.menu-scena { position:relative; overflow:hidden; background:#0d0b0a; }
.menu-scena img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.05); transition:opacity .7s ease, transform 1.4s cubic-bezier(.22,.61,.36,1); }
.menu-scena img.viva { opacity:.8; transform:none; }
.menu-scena::after { content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(16,13,12,.92), rgba(16,13,12,.1) 65%); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .alza { opacity:1; transform:none; transition:none; animation:none; }
  .foto.reveal img { transform:none; transition:none; }
  .trittico img { transition:none; }
  .menu-schermo, .menu-riga, .menu-scena img, .menu-bottone .barre i { transition:none; }
  .menu-riga { opacity:1; transform:none; }
  .fade-in-panel { animation:none; }
}