/* ── home.css — i due pezzi interattivi che vivono solo in home ───────────
   La mappa del casale (punti cliccabili sull'aerea, zoom sulla zona) e le
   chip delle regioni della carta 3D. Tutto il resto della home usa sito.css. */

/* ─────────── mappa del casale: punti cliccabili sull'aerea ─────────── */
/* --s è la scala di base del piano: su mobile la foto è ingrandita per
   rendere toccabili i punti, e i punti si contro-scalano per non gonfiarsi */
.mappa-vista {
  position:relative; overflow:hidden; background:#0d0b0a;
  display:grid; place-items:center;
  aspect-ratio:1/1; --s:1.6;
}
@media (min-width:768px){ .mappa-vista { aspect-ratio:2048/1151; --s:1; } }

/* il piano ha esattamente le proporzioni della foto: così le percentuali
   dei punti sono percentuali dell'immagine, non del contenitore */
.mappa-piano {
  position:relative; width:100%; aspect-ratio:2048/1151;
  transform-origin:50% 50%; transform:scale(var(--s));
  transition:transform 1.05s cubic-bezier(.62,.02,.2,1);
}
/* will-change solo mentre si muove: tenerlo sempre acceso promuove il piano a
   layer permanente e obbliga il compositor a rasterizzare la foto alla misura
   ingrandita — oltre i ~4000 px la texture non si crea e il riquadro resta nero */
.mappa-vista[data-aperto="true"] .mappa-piano { will-change:transform; }
.mappa-piano img { display:block; width:100%; height:100%; object-fit:cover; }
/* la versione nitida si sovrappone e appare in dissolvenza: sotto resta sempre
   l'immagine già caricata, così lo zoom non mostra mai un riquadro vuoto */
.mappa-alta { position:absolute; inset:0; opacity:0; transition:opacity .5s ease; pointer-events:none; }
.mappa-alta.pronta { opacity:1; }

.mappa-velo {
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse 42% 42% at var(--fx,50%) var(--fy,50%), transparent 0%, rgba(10,8,7,.72) 78%);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1);
}
.mappa-vista[data-aperto="true"] .mappa-velo { opacity:1; }

/* ─── il punto ─── */
/* il bottone è un quadrato di 44px col pallino esatto al centro: così --x/--y
   sono la posizione del pallino e non del gruppo pallino+etichetta, e lo
   scale() gira attorno al pallino invece di spostarlo. Serve preciso perché
   le tre arcate stanno in venti punti percentuali di foto. */
.hot {
  position:absolute; left:var(--x); top:var(--y); z-index:3;
  transform:translate(-50%,-50%) scale(calc(1 / var(--s)));
  background:none; border:0; padding:0; cursor:pointer; color:#F7F0E3;
  width:44px; height:44px; display:grid; place-items:center;
  transition:opacity .45s cubic-bezier(.22,.61,.36,1);
}
.mappa-vista[data-aperto="true"] .hot { opacity:0; pointer-events:none; }

.hot-punto {
  position:relative; flex:none; width:13px; height:13px; border-radius:50%;
  background:#D8B889; box-shadow:0 0 0 1px rgba(20,18,16,.35), 0 3px 12px rgba(0,0,0,.5);
}
.hot-punto::after {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid #D8B889; opacity:.9; animation:pulsa 2.8s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes pulsa {
  0%   { transform:scale(.7); opacity:.9; }
  70%  { transform:scale(2.1); opacity:0; }
  100% { transform:scale(2.1); opacity:0; }
}
/* l'etichetta orbita il pallino invece di stargli in fila: a destra di default,
   e nelle direzioni libere quando i punti sono ravvicinati come sulle arcate */
.hot-eti {
  position:absolute; top:50%; left:calc(50% + 15px); transform:translateY(-50%);
  white-space:nowrap; font-size:.58rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  padding:.42rem .8rem; border-radius:2px;
  background:rgba(14,12,11,.62); backdrop-filter:blur(8px);
  border:1px solid rgba(247,240,227,.16);
  transition:background-color .35s, border-color .35s;
}
/* le tre arcate portano l'etichetta sotto il pallino: la scritta cade sulla
   strada, che è vuota, invece di coprire la facciata o le etichette vicine */
.hot[data-lato="giu"] .hot-eti {
  top:calc(50% + 14px); bottom:auto; left:50%; right:auto; transform:translateX(-50%);
}
/* per il punto isolato dell'esterno l'etichetta va a sinistra solo da desktop:
   su mobile il bordo dell'inquadratura la taglierebbe */
@media (min-width:768px){ .hot[data-lato="sx-md"] .hot-eti { left:auto; right:calc(50% + 15px); } }
/* le tre arcate stanno in quindici punti percentuali di foto: sotto i 1200px
   i pallini distano meno della larghezza delle scritte e le tre etichette si
   accavallerebbero comunque le si giri. Restano i soli pallini, e a nominarli
   sono l'occhiello della sezione e la scheda che si apre al tocco. */
@media (max-width:1199px){ .hot[data-porta] .hot-eti { display:none; } }
.hot:hover .hot-eti, .hot:focus-visible .hot-eti { background:#9A7B4F; border-color:#9A7B4F; color:#F7F0E3; }
.hot:focus-visible { outline:2px solid #D8B889; outline-offset:6px; }

/* ─── la scheda che entra dopo lo zoom ─── */
.mappa-scheda {
  position:absolute; inset:auto 0 0 0; z-index:5;
  padding:1.6rem 1.5rem 1.8rem;
  background:linear-gradient(to top, rgba(10,8,7,.97) 60%, rgba(10,8,7,.82));
  border-top:1px solid rgba(247,240,227,.14);
  transform:translateY(101%); transition:transform .72s cubic-bezier(.22,.61,.36,1);
}
.mappa-scheda[data-on="true"] { transform:none; }
@media (min-width:768px){
  .mappa-scheda {
    inset:0 auto 0 0; width:min(30rem, 42vw);
    display:flex; flex-direction:column; justify-content:center;
    padding:3rem clamp(2rem,3.5vw,3.5rem);
    background:linear-gradient(to right, rgba(10,8,7,.96) 62%, rgba(10,8,7,.72));
    border-top:0; border-right:1px solid rgba(247,240,227,.14);
    transform:translateX(-101%);
  }
}
.mappa-scheda .eyebrow { color:#D8B889; }
.mappa-scheda h3 { font-family:'Fraunces',Georgia,serif; font-weight:300; line-height:1.05;
  font-size:clamp(1.8rem,4.4vw,2.9rem); margin:.75rem 0 0; color:#F7F0E3; }
.mappa-scheda h3 em { font-style:italic; }
.mappa-scheda p { margin:1rem 0 0; font-weight:300; line-height:1.7;
  color:#F7F0E3b8; font-size:.92rem; max-width:30ch; }
.mappa-chiudi {
  position:absolute; top:1rem; right:1.1rem; z-index:6;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  background:rgba(14,12,11,.6); backdrop-filter:blur(8px);
  border:1px solid rgba(247,240,227,.2); color:#F7F0E3;
  font-size:1.15rem; line-height:1; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .5s, background-color .3s;
}
.mappa-vista[data-aperto="true"] .mappa-chiudi { opacity:1; pointer-events:auto; }
.mappa-chiudi:hover { background:#9A7B4F; }

/* ── chip delle regioni: navigazione alternativa alla carta 3D ────────── */
.chip-reg {
  border:1px solid #F7F0E326; color:#F7F0E3a6; background:transparent;
  transition:all .35s; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem .8rem; cursor:pointer; white-space:nowrap;
}
.chip-reg:hover { border-color:#9A7B4F; color:#F7F0E3; }
.chip-reg[aria-pressed="true"] { background:#9A7B4F; border-color:#9A7B4F; color:#F7F0E3; }
/* .fade-in-panel sta in sito.css: la usa anche l'enoteca */

@media (prefers-reduced-motion: reduce) {
  .hot-punto::after { animation:none; opacity:.5; }
  .mappa-piano, .mappa-scheda, .mappa-velo { transition-duration:.001s; }
}