/* assets/css/scena.css */
/* Miaterra — stili per la scena interattiva */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body {
  font-family: var(--hm-font-base);
  font-size: var(--hm-fs-base);
  color: var(--hm-crema);
  background: var(--hm-notte);
  overflow: hidden;
}

/* ---------- Contenitore principale ---------- */
#scena {
  position: fixed; inset: 0;
  overflow: hidden;
  background: var(--hm-notte);
  opacity: 1;
}
#scena.pronta { opacity: 1; }
#scena.fade-out-lento {
  opacity: 0;
  transition: opacity 3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

/* ---------- Media container ---------- */
#media-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  z-index: var(--hm-z-media);
  opacity: 0;
  transition: opacity 0.8s ease;
}
#scena.pronta #media-container { opacity: 1; }
#media-container.dragging { cursor: grabbing; }

/* ---------- Palco ---------- */
.hm-palco {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out;
  will-change: transform;
  overflow: visible;
}
.hm-palco.dragging { transition: none; }
.hm-palco .media-full {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: var(--hm-z-media);
}
.hm-palco #hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--hm-z-hotspots);
}
.hm-palco .hotspot { pointer-events: auto; }

/* ---------- Video crossfade (scena principale) ---------- */
.hm-video-slot {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hm-video-crossfade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  will-change: opacity;
}

/* ---------- Hotspot classici ---------- */
.hotspot {
  position: absolute;
  transform: translate(-50%, -50%) scale(.85);
  background: transparent; border: 0; cursor: pointer;
  pointer-events: auto;
  min-width: 44px; min-height: 44px;
  display: flex; flex-direction: column; align-items: center;
  color: #fff; font: inherit;
  opacity: 0;
  transition: opacity var(--hm-t-med) var(--hm-ease),
              transform var(--hm-t-med) var(--hm-ease);
  will-change: opacity, transform;
}
.hotspot.visibile { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hotspot:focus-visible { outline: 3px solid var(--hm-ambra-300); outline-offset: 4px; }

.hotspot-punto {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--hm-hotspot-colore, var(--hm-ambra-500));
  box-shadow: var(--hm-shadow-glow);
  animation: hm-pulsa 2s infinite;
}
@keyframes hm-pulsa {
  0%   { box-shadow: 0 0 0 0 rgba(255,224,102,.7); }
  70%  { box-shadow: 0 0 0 18px rgba(255,224,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,224,102,0); }
}

.hotspot-label {
  margin-top: 8px; padding: 4px 10px;
  background: rgba(7,16,7,.72);
  border: 1px solid var(--hm-hotspot-label, rgba(255,224,102,.35));
  border-radius: var(--hm-radius-pill);
  font-size: 14px; line-height: 1.2;
  backdrop-filter: blur(4px);
}

/* ---------- Pannello laterale ---------- */
.pannello {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--hm-crema);
  color: var(--hm-verde-900);
  transform: translateX(100%);
  transition: transform var(--hm-t-med) var(--hm-ease);
  overflow-y: auto;
  padding: var(--hm-sp-5) var(--hm-sp-4);
  box-shadow: var(--hm-shadow-soft);
  z-index: var(--hm-z-panel);
}
.pannello.aperto { transform: translateX(0); }
.pannello h2 {
  font-family: var(--hm-font-display);
  font-size: var(--hm-fs-h2);
  margin: 0 0 var(--hm-sp-3);
  color: var(--hm-verde-700);
}
.pannello .sommario { font-style: italic; color: var(--hm-verde-500); }
.pannello .contenuto { line-height: 1.6; }
.pannello .scheda-immagine {
  display: block;
  width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: cover;
  border-radius: var(--hm-radius-sm);
  margin: 0 0 var(--hm-sp-3);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

#pannello-chiudi {
  position: absolute; top: var(--hm-sp-3); right: var(--hm-sp-3);
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--hm-verde-700); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: transform var(--hm-t-fast) var(--hm-ease);
}
#pannello-chiudi:hover { transform: scale(1.08); }

/* ---------- Loader fallback ---------- */
.hm-loader {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--hm-notte);
  color: var(--hm-ambra-500);
  font-family: var(--hm-font-display);
  letter-spacing: .05em;
  transition: opacity var(--hm-t-slow) var(--hm-ease);
  z-index: var(--hm-z-loader);
}
.hm-loader.nascosto { opacity: 0; pointer-events: none; }

/* ---------- Loader progress ---------- */
.hm-loader-progress {
  position: fixed;
  inset: 0;
  z-index: var(--hm-z-loaderpg);
  background: rgba(7, 16, 7, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.hm-loader-progress.nascosto { opacity: 0; pointer-events: none; }
.hm-loader-progress-box {
  width: min(360px, 85vw);
  background: rgba(31, 77, 31, 0.4);
  border: 1px solid rgba(255, 224, 102, 0.35);
  border-radius: var(--hm-radius-md);
  padding: 20px 24px;
  text-align: center;
  color: var(--hm-crema);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.hm-loader-progress-titolo {
  font-family: var(--hm-font-display);
  font-size: 16px;
  color: var(--hm-ambra-500);
  margin: 0 0 12px;
  letter-spacing: 0.03em;
}
.hm-loader-progress-barra {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.hm-loader-progress-riempimento {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--hm-ambra-500), var(--hm-ambra-300));
  border-radius: 4px;
  transition: width 0.2s ease;
}
.hm-loader-progress-percentuale {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* ---------- Pannellum ---------- */
#media-container .pnlm-container {
  position: absolute; inset: 0;
  background: var(--hm-notte);
  z-index: var(--hm-z-pannellum);
}
.hm-pano-hotspot {
  width: 22px; height: 22px;
  background: var(--hm-ambra-500);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: var(--hm-shadow-glow);
  animation: hm-pulsa 2s infinite;
  cursor: pointer;
  transition: transform var(--hm-t-fast) var(--hm-ease);
}
.hm-pano-hotspot:hover { transform: scale(1.2); }
.hm-pano-hotspot .pnlm-hotspot-base { display: none; }

/* ---------- Frecce laterali ---------- */
.hm-freccia {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  top: auto;
  transform: none;
  z-index: var(--hm-z-frecce);
  width: 48px;
  height: 80px;
  border: 1px solid rgba(255, 224, 102, 0.25);
  background: rgba(7, 16, 7, 0.35);
  color: rgba(255, 255, 255, 0.9);
  font-size: 28px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  transition: background var(--hm-t-fast) var(--hm-ease),
              color var(--hm-t-fast) var(--hm-ease);
  border-radius: 0;
}
.hm-freccia.visibile { display: flex; }
.hm-freccia:hover { background: rgba(31, 77, 31, 0.55); color: #fff; }
.hm-freccia:active,
.hm-freccia.premuta { background: rgba(50, 112, 45, 0.75); color: #fff; }
.hm-freccia:focus-visible { outline: 3px solid var(--hm-ambra-300); outline-offset: -3px; }
.hm-freccia-sinistra {
  left: 0; border-left: 0;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.hm-freccia-destra {
  right: 0; border-right: 0;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

/* ---------- Hint naviga ---------- */
.hm-hint-naviga {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--hm-z-frecce);
  padding: 8px 16px;
  background: rgba(7,16,7,.8);
  color: var(--hm-crema);
  border: 1px solid rgba(255,224,102,.35);
  border-radius: var(--hm-radius-pill);
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--hm-t-med) var(--hm-ease);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.hm-hint-naviga.visibile { opacity: 1; }
.hm-hint-naviga .hm-hint-icona {
  display: inline-block;
  margin-right: 6px;
  animation: hm-hint-muovi 2s ease-in-out infinite;
}
@keyframes hm-hint-muovi {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .pannello { width: 480px; padding: var(--hm-sp-5); }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .hm-freccia { width: 40px; height: 80px; font-size: 24px; }
  .hm-freccia-sinistra { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
  .hm-freccia-destra { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
  .hm-hint-naviga {
    bottom: calc(140px + env(safe-area-inset-bottom));
    font-size: 12px;
    padding: 6px 12px;
  }
  #media-container .pnlm-controls-container { transform: scale(1.15); transform-origin: top left; }
}

/* ---------- Nascondi frecce/hint con pannello aperto ---------- */
body.pannello-aperto .hm-freccia,
body.pannello-aperto .hm-hint-naviga {
  display: none !important;
}

/* ---------- Accessibilità ---------- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--hm-ambra-300);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  #scena { transition-duration: 0.01ms !important; }
  #scena.fade-out-lento { transition-duration: 0.01ms !important; }
  #media-container { transition-duration: 0.01ms !important; }
  .hm-palco { transition: none !important; }
  .hm-hint-naviga .hm-hint-icona { animation: none !important; }
  .hm-video-crossfade { transition-duration: 0.01ms !important; }
}

/* ============================================================
   OVERLAY MULTIMEDIALI
   ============================================================ */

.hm-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(7, 16, 7, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: hm-overlay-in 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@keyframes hm-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hm-overlay-content {
  position: relative;
  background: #0b1f0b;
  border: 1px solid rgba(255, 224, 102, 0.25);
  border-radius: 12px;
  padding: 20px;
  max-width: min(1000px, 95vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hm-overlay-title {
  margin: 0;
  color: var(--hm-ambra-500);
  font-family: var(--hm-font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
}

.hm-overlay-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 224, 102, 0.4);
  background: rgba(7, 16, 7, 0.85);
  color: var(--hm-ambra-500);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--hm-t-fast) var(--hm-ease), background var(--hm-t-fast) var(--hm-ease);
}
.hm-overlay-close:hover { transform: scale(1.08); background: rgba(31, 77, 31, 0.95); }
.hm-overlay-close:focus-visible { outline: 3px solid var(--hm-ambra-300); outline-offset: 2px; }

/* In sovrapposizione, la X deve stare sopra qualsiasi video in crossfade */
.hm-overlay.hm-overlay-sovrapposizione .hm-overlay-close {
  z-index: 20;
}

/* Contenuti media in modal */
.hm-overlay-video {
  display: block;
  width: 100%;
  max-height: 75vh;
  background: #000;
  border-radius: 8px;
  object-fit: contain;
}
.hm-overlay-audio {
  padding: 12px;
  background: rgba(31, 77, 31, 0.25);
  border-radius: 8px;
}
.hm-overlay-audio-el { width: 100%; display: block; }
.hm-overlay-image {
  display: block;
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 8px;
  margin: 0 auto;
}
.hm-overlay-text {
  color: var(--hm-crema);
  font-size: 16px;
  line-height: 1.6;
  max-height: 65vh;
  overflow: auto;
  padding: 4px;
}
.hm-overlay-text h3, .hm-overlay-text h4 {
  color: var(--hm-ambra-500);
  margin: 16px 0 8px;
}
.hm-overlay-text a { color: var(--hm-ambra-300); }
.hm-overlay-link { text-align: center; padding: 20px; }
.hm-overlay-link a {
  color: var(--hm-ambra-500);
  font-size: 18px;
  word-break: break-all;
  text-decoration: underline;
}
.hm-overlay-pano {
  width: min(900px, 90vw);
  height: 70vh;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

/* ============================================================
   OVERLAY IN MODALITÀ SOVRAPPOSIZIONE
   ============================================================ */

.hm-overlay.hm-overlay-sovrapposizione {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}
.hm-overlay.hm-overlay-sovrapposizione .hm-overlay-content {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hm-overlay-title-sovrapposto {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 3;
  margin: 0;
  padding: 6px 14px;
  background: rgba(7, 16, 7, 0.65);
  color: var(--hm-ambra-500);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--hm-radius-pill);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hm-overlay-video-sovrapposto {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  object-fit: cover;
  background: #000;
}

.hm-overlay-image-sovrapposto {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  max-width: 100vw;
  border-radius: 0;
  object-fit: cover;
  margin: 0;
}

.hm-overlay-audio-sovrapposto {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 3;
  width: min(360px, calc(100vw - 32px));
  padding: 10px;
  background: rgba(7, 16, 7, 0.85);
  border: 1px solid rgba(255, 224, 102, 0.35);
  border-radius: var(--hm-radius-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.hm-overlay-text-sovrapposto {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 3;
  width: min(480px, calc(100vw - 32px));
  max-height: 50vh;
  overflow-y: auto;
  padding: 14px 18px;
  background: rgba(7, 16, 7, 0.88);
  border: 1px solid rgba(255, 224, 102, 0.35);
  border-radius: var(--hm-radius-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  color: var(--hm-crema);
  font-size: 14px;
  line-height: 1.5;
}
.hm-overlay-text-sovrapposto a { color: var(--hm-ambra-300); }

.hm-overlay-pano-sovrapposto {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}

/* ============================================================
   OVERLAY IN LOOP: SFONDO NERO
   ============================================================ */

.hm-overlay.hm-overlay-loop {
  background: #000;
}
.hm-overlay.hm-overlay-loop.hm-overlay-sovrapposizione {
  background: #000;
}

/* Slot per video in crossfade (loop) */
.hm-overlay-video-slot {
  position: relative;
  width: 100%;
  max-height: 75vh;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.hm-overlay-video-slot .hm-overlay-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
}
.hm-overlay-video-slot-sovrapposto {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
}
.hm-overlay-video-slot-sovrapposto .hm-overlay-video {
  object-fit: cover;
}

/* ============================================================
   BARRA DI CARICAMENTO OVERLAY
   ============================================================ */

.hm-overlay-caricamento {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(7, 16, 7, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 8px;
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.hm-overlay-caricamento.nascosta {
  opacity: 0;
}
.hm-overlay-caricamento-barra {
  width: min(320px, 70%);
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
}
.hm-overlay-caricamento-riempimento {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--hm-ambra-500), var(--hm-ambra-300));
  border-radius: 4px;
  transition: width 0.2s ease;
}
.hm-overlay-caricamento-testo {
  margin: 0;
  color: var(--hm-crema);
  font-size: 14px;
  font-family: var(--hm-font-base);
}
.hm-overlay-caricamento-testo span {
  color: var(--hm-ambra-500);
  font-weight: 600;
}

/* ============================================================
   STATO HOTSPOT: CARICAMENTO / ERRORE
   ============================================================ */

.hm-hotspot-caricamento .hotspot-punto {
  background: #888 !important;
  box-shadow: 0 0 0 0 rgba(136,136,136,.6) !important;
  animation: hm-pulsa-grigia 2.4s infinite !important;
  cursor: wait;
}
@keyframes hm-pulsa-grigia {
  0%   { box-shadow: 0 0 0 0 rgba(136,136,136,.6); }
  70%  { box-shadow: 0 0 0 14px rgba(136,136,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(136,136,136,0); }
}
.hm-hotspot-caricamento .hotspot-label {
  border-color: rgba(136,136,136,.5) !important;
  color: #ccc !important;
}
.hm-hotspot-caricamento::after {
  content: '';
  position: absolute;
  top: -6px; right: -6px;
  width: 14px; height: 14px;
  border: 2px solid rgba(136,136,136,.4);
  border-top-color: var(--hm-ambra-500);
  border-radius: 50%;
  animation: hm-spin 0.8s linear infinite;
}
@keyframes hm-spin {
  to { transform: rotate(360deg); }
}

.hm-hotspot-errore .hotspot-punto {
  background: #8a1f0e !important;
  box-shadow: none !important;
  animation: none !important;
  cursor: not-allowed;
}
.hm-hotspot-errore .hotspot-label {
  border-color: rgba(138,31,14,.6) !important;
  color: #f7d7d0 !important;
}

/* Mobile */
@media (max-width: 640px) {
  .hm-overlay { padding: 8px; }
  .hm-overlay-content { padding: 14px; max-height: 95vh; }
  .hm-overlay-title { font-size: 16px; }
  .hm-overlay-video, .hm-overlay-image { max-height: 65vh; }
  .hm-overlay-pano { height: 60vh; }
  .hm-overlay-close { width: 38px; height: 38px; font-size: 22px; }

  .hm-overlay-title-sovrapposto { font-size: 13px; top: 10px; left: 10px; padding: 4px 10px; }
  .hm-overlay-text-sovrapposto { bottom: 10px; left: 10px; padding: 10px 14px; max-height: 40vh; font-size: 13px; }
  .hm-overlay-audio-sovrapposto { bottom: 10px; right: 10px; padding: 8px; }
}

/* ============================================================
   EFFETTI HOTSPOT
   ============================================================ */

.hm-effetto-pulsazione .hotspot-punto,
.hm-effetto-alone .hotspot-punto,
.hm-effetto-ingrandisci .hotspot-punto,
.hm-effetto-scintilla .hotspot-punto {
  animation: none;
  box-shadow: none;
}
.hm-effetto-pulsazione .hotspot-punto {
  animation: hm-pulsa 2s infinite;
  box-shadow: var(--hm-shadow-glow);
}
.hm-effetto-alone .hotspot-punto {
  box-shadow:
    0 0 0 4px rgba(255, 224, 102, 0.25),
    0 0 20px 8px rgba(255, 224, 102, 0.55),
    0 0 40px 20px rgba(255, 224, 102, 0.25);
}
.hm-effetto-ingrandisci .hotspot-punto {
  animation: hm-ingrandisci 2.4s ease-in-out infinite;
  box-shadow: 0 0 12px 3px rgba(255, 224, 102, 0.6);
}
@keyframes hm-ingrandisci {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.4); }
}
.hm-effetto-scintilla .hotspot-punto {
  animation: hm-pulsa 2s infinite;
  position: relative;
}
.hm-effetto-scintilla .hotspot-punto::before,
.hm-effetto-scintilla .hotspot-punto::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  animation: hm-scintilla-1 2s ease-out infinite;
}
.hm-effetto-scintilla .hotspot-punto::after {
  animation: hm-scintilla-2 2s ease-out infinite;
  animation-delay: 1s;
  background: var(--hm-ambra-500);
}
@keyframes hm-scintilla-1 {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-24px, -24px) scale(0.3); opacity: 0; }
}
@keyframes hm-scintilla-2 {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(24px, -24px) scale(0.3); opacity: 0; }
}

.hotspot-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(7,16,7,.95);
  color: var(--hm-crema);
  border: 1px solid rgba(255,224,102,.35);
  border-radius: var(--hm-radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hm-t-fast) var(--hm-ease), transform var(--hm-t-fast) var(--hm-ease);
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.hotspot-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: rgba(7,16,7,.95);
}
.hotspot:hover .hotspot-tooltip,
.hotspot:focus-visible .hotspot-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hm-hotspot-attenuato { opacity: 0.45; }
.hm-hotspot-attenuato:hover { opacity: 0.8; }
.hm-hotspot-grigio .hotspot-punto {
  background: #888 !important;
  box-shadow: none !important;
  animation: none !important;
}
.hm-hotspot-grigio .hotspot-label {
  border-color: rgba(136,136,136,.4) !important;
  color: #aaa !important;
}
/* ============================================================
   RIFINITURE: ACCESSIBILITÀ E MOBILE
   ============================================================ */

/* Migliora la visibilità del focus per chi naviga da tastiera */
.hm-overlay:focus-within .hm-overlay-close,
.hm-overlay-close:focus-visible {
  outline: 3px solid var(--hm-ambra-300);
  outline-offset: 2px;
}

/* Touch target più grandi su mobile */
@media (max-width: 640px) {
  .hm-overlay-close {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
  .hotspot {
    min-width: 48px;
    min-height: 48px;
  }
  .hotspot-punto {
    width: 20px;
    height: 20px;
  }
  .hm-audio-btn {
    min-height: 40px;
  }
}

/* Overlay su iOS: evita il "rimbalzo" dello scroll */
.hm-overlay {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Assicura che il video overlay non mostri il pulsante di download nativo */
.hm-overlay video::-internal-media-controls-download-button {
  display: none;
}
.hm-overlay video::-webkit-media-controls-enclosure {
  overflow: hidden;
}

/* Migliora la leggibilità dei testi overlay su sfondo semitrasparente */
.hm-overlay-text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* ============================================================
   HOTSPOT TIPO "OGGETTO" (area cliccabile sull'immagine)
   ============================================================ */

.hotspot-oggetto {
  position: absolute;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.hotspot-oggetto:hover,
.hotspot-oggetto:focus-visible {
  background: rgba(255, 224, 102, 0.12);
  box-shadow: 0 0 0 3px rgba(255, 224, 102, 0.55),
              inset 0 0 20px rgba(255, 224, 102, 0.15);
  outline: none;
}

/* ============================================================
   HOTSPOT TIPO "ICONA" (pulsante UI)
   ============================================================ */

.hotspot-icona {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(7, 16, 7, 0.85);
  border: 1px solid rgba(255, 224, 102, 0.5);
  color: var(--hm-ambra-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform var(--hm-t-fast) var(--hm-ease),
              background var(--hm-t-fast) var(--hm-ease),
              border-color var(--hm-t-fast) var(--hm-ease);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.hotspot-icona:hover,
.hotspot-icona:focus-visible {
  transform: translate(-50%, -50%) scale(1.12);
  background: rgba(31, 77, 31, 0.95);
  border-color: var(--hm-ambra-300);
  outline: none;
}
.hotspot-icona svg {
  width: 22px;
  height: 22px;
  display: block;
}
.hotspot-icona .hotspot-tooltip {
  bottom: calc(100% + 10px);
}

@media (max-width: 640px) {
  .hotspot-icona {
    width: 48px;
    height: 48px;
  }
  .hotspot-icona svg {
    width: 24px;
    height: 24px;
  }
}
/* ============================================================
   BLOCCHI OVERLAY (testo, titolo, html, immagine, link, bottone, separatore, video, DB)
   ============================================================ */

.hm-blocchi-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hm-blocco { color: var(--hm-crema); }

.hm-blocco-titolo {
  color: var(--hm-ambra-500);
  font-family: var(--hm-font-display);
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.02em;
}
.hm-blocco-titolo.h3 { font-size: 18px; }

.hm-blocco-testo {
  font-size: 15px;
  line-height: 1.6;
  color: var(--hm-crema);
}

.hm-blocco-separatore {
  border: 0;
  border-top: 1px solid rgba(255, 224, 102, 0.25);
  margin: 4px 0;
}

.hm-blocco-immagine { text-align: center; }
.hm-blocco-immagine img {
  max-width: 100%;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}
.hm-blocco-immagine-didascalia {
  font-size: 13px;
  color: #aaa;
  margin: 6px 0 0;
  text-align: center;
}

.hm-blocco-link a {
  color: var(--hm-ambra-300);
  text-decoration: underline;
}

.hm-blocco-bottone {
  text-align: center;
}

.hm-blocco-video video {
  width: 100%;
  border-radius: 8px;
  max-height: 400px;
  display: block;
}

/* ---------- Blocco DB: griglia prodotti ---------- */
.hm-blocco-db { margin: 4px 0; }
.hm-blocco-db-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.hm-blocco-db-vuoto {
  color: #aaa;
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

.hm-prodotto-card {
  background: #0b1f0b;
  border: 1px solid rgba(255, 224, 102, 0.2);
  border-radius: 10px;
  padding: 12px;
  color: var(--hm-crema);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hm-prodotto-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 224, 102, 0.5);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.hm-prodotto-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
  display: block;
  background: #000;
}

.hm-prodotto-nome {
  margin: 0 0 6px;
  font-size: 15px;
  font-family: var(--hm-font-display);
  color: var(--hm-ambra-500);
  line-height: 1.25;
}

.hm-prodotto-desc {
  margin: 0 0 8px;
  font-size: 12px;
  color: #bbb;
  line-height: 1.35;
  flex: 1;
}

.hm-prodotto-prezzo {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--hm-verde-300);
}

.hm-prodotto-esaurito {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: #c0392b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hm-prodotto-ordina {
  display: inline-block;
  margin-top: auto;
  padding: 8px 14px;
  background: var(--hm-verde-500);
  color: #fff;
  border-radius: var(--hm-radius-pill);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: background var(--hm-t-fast) var(--hm-ease);
}
.hm-prodotto-ordina:hover {
  background: var(--hm-verde-700);
  color: #fff;
}

@media (max-width: 640px) {
  .hm-blocco-db-griglia {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  .hm-prodotto-card { padding: 10px; }
  .hm-prodotto-nome { font-size: 14px; }
  .hm-prodotto-prezzo { font-size: 15px; }
}