/* ── porta.css — base condivisa delle pagine delle porte ──────────────────
   Le quattro pagine (esterno, ristorante, enoteca, shop) nascono dallo zoom
   sulla mappa del casale: stessa lingua grafica della home, ma header video
   di zona e componenti propri. Tailwind CDN porta la gabbia, qui vive tutto
   ciò che Tailwind non esprime. */

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

.eyebrow { letter-spacing:.32em; font-size:.68rem; text-transform:uppercase; font-weight:500; }
.eyebrow-hero { color:#D8B889; text-shadow:0 1px 14px rgba(20,18,16,.75); }
.eyebrow-hero a { color:inherit; text-decoration:none; border-bottom:1px solid #D8B88955; transition:border-color .3s; }
.eyebrow-hero a:hover { border-color:#D8B889; }

/* texture carta sui fondi chiari, come in home */
.paper::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.04'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* reveal allo scroll */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity:1; transform:none; }
.reveal-d1 { transition-delay:.12s } .reveal-d2 { transition-delay:.24s } .reveal-d3 { transition-delay:.36s }

@media (prefers-reduced-motion: no-preference) {
  .kenburns img { transform:scale(1.02); transition:transform 14s ease-out; }
  .kenburns.in img { transform:scale(1.085); }
}

.btn-bronzo { background:#9A7B4F; color:#F7F0E3; transition:background .3s; }
.btn-bronzo:hover { background:#87683e; }
.btn-ghost-crema { border:1px solid #F7F0E3B3; color:#F7F0E3; transition:all .3s; }
.btn-ghost-crema:hover { background:#F7F0E3; color:#141210; }
.btn-ghost-nero { border:1px solid #14121066; color:#141210; transition:all .3s; }
.btn-ghost-nero:hover { background:#141210; color:#F7F0E3; }
.link-arrow::after { content:'→'; display:inline-block; margin-left:.5em; transition:transform .3s; }
.link-arrow:hover::after { transform:translateX(6px); }

.watermark { font-family:'Fraunces',serif; font-weight:300; line-height:.8; color:transparent; -webkit-text-stroke:1px #9A7B4F2e; user-select:none; }
picture { display:contents; }

/* ── header di zona: la clip drone della porta ───────────────────────── */
.hero-porta { position:relative; height:88svh; min-height:520px; 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; }
.hero-porta .velo {
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(20,18,16,.9) 0%, rgba(20,18,16,.28) 46%, rgba(20,18,16,.55) 100%),
    linear-gradient(to right, rgba(20,18,16,.5) 0%, rgba(20,18,16,0) 58%);
}

/* ── navigazione alta, come in home ma con le porte ──────────────────── */
.nav-porta { position:absolute; top:0; left:0; right:0; z-index:20; }
.nav-porta .voci a { opacity:.9; transition:opacity .3s, color .3s; }
.nav-porta .voci a:hover { opacity:1; }
.nav-porta .voci a[aria-current="page"] { color:#D8B889; opacity:1; }

/* ── barra doppia mobile, da Signorvino come in home ─────────────────── */
.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;
}
.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: la mappa continua a fondo pagina ────────────────── */
.altre-porte { background:var(--nero); color:var(--crema); }
.porta-card { position:relative; display:block; overflow:hidden; aspect-ratio:4/3; background:#0d0b0a; }
.porta-card img { width:100%; height:100%; object-fit:cover; opacity:.82; transition:transform 1.1s cubic-bezier(.22,.61,.36,1), opacity .5s; }
.porta-card:hover img { transform:scale(1.05); opacity:1; }
.porta-card .velo { position:absolute; inset:0; background:linear-gradient(to top, rgba(20,18,16,.85), rgba(20,18,16,.05) 55%); }
.porta-card .testo { position:absolute; left:1.3rem; right:1.3rem; bottom:1.15rem; }
.porta-card h3 { font-family:'Fraunces',serif; font-weight:300; font-size:1.6rem; line-height:1.05; margin:.35rem 0 0; }
.porta-card .freccia { position:absolute; top:1rem; right:1.1rem; font-size:1rem; opacity:0; transform:translateX(-8px); transition:opacity .4s, transform .4s; }
.porta-card:hover .freccia { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .porta-card img { transition:none; }
}