/* ═══════════════════════════════════════════════════════════════════════════
   MONDO — la scena 3D e tutto ciò che le sta sopra: hotspot e
   notifiche. La stanza la disegna WebGL; qui c'è solo la cornice.
   ═════════════════════════════════════════════════════════════════════════ */

.scena {
  position: relative; overflow: hidden;
  width: min(100%, calc((100svh - 7.5rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: #0B0A09;
  box-shadow: 0 40px 80px -40px #00000099, 0 0 0 1px #00000022;
  touch-action: none;
  user-select: none;
}

.mondo__canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
}

/* lo strato degli hotspot: non intercetta niente, tranne i badge */
.strato { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.strato > * { pointer-events: auto; }

/* ── HOTSPOT ─────────────────────────────────────────────────────────────────
   Il bottone è un punto di dimensione zero posizionato dal mondo con un
   transform; tutto quello che si vede sta dentro. Così l'hover può scalare il
   badge senza pestare il transform di posizione. Bersaglio 72px. */
.hot {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  padding: 0; border: 0; background: none;
  transition: opacity 280ms ease;
  will-change: transform;
}
.hot--nascosto { opacity: 0; pointer-events: none; }
.hot:focus-visible { outline: none; }

.hot__badge {
  position: absolute; left: -36px; top: -36px; width: 72px; height: 72px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-accento); color: #1A1204;
  font-family: var(--brand-display); font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-accento) 16%, transparent), 0 10px 30px -8px #000000cc;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), background 220ms ease;
  animation: pulsa 3.2s ease-in-out infinite;
}
.hot:hover .hot__badge,
.hot:focus-visible .hot__badge { transform: scale(1.14); }
@keyframes pulsa {
  0%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-accento) 16%, transparent), 0 10px 30px -8px #000000cc; }
  50%      { box-shadow: 0 0 0 16px color-mix(in srgb, var(--brand-accento) 8%, transparent), 0 10px 30px -8px #000000cc; }
}

.hot__anello {
  position: absolute; left: -57px; top: -57px; width: 114px; height: 114px;
  overflow: visible; pointer-events: none;
  animation: gira 14s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.hot__anello text {
  font-family: var(--brand-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .32em; fill: var(--brand-accento);
  paint-order: stroke; stroke: #0000008c; stroke-width: 2.5px;
}

.hot__et {
  position: absolute; top: 58px; left: 0; transform: translateX(-50%);
  white-space: nowrap; padding: 5px 11px; border-radius: 3px;
  background: #0A0A0Ae6; color: var(--carta);
  font-family: var(--brand-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; transition: opacity 200ms ease; pointer-events: none;
}
.hot:hover .hot__et, .hot:focus-visible .hot__et { opacity: 1; }

.hot--fatto .hot__badge { background: #2A2620; color: #FFFFFF59; animation: none; box-shadow: 0 6px 20px -8px #000000cc; }
.hot--fatto .hot__anello { animation-duration: 40s; opacity: .35; }
.hot--fatto .hot__anello text { fill: #FFFFFF66; }

/* dopo 45 secondi di inattività l'hotspot giusto sfarfalla: un aiuto che non
   parla, non spiega e non umilia */
.hot.sfarfalla .hot__badge { animation: sfarfallio 1.1s ease-in-out 3; }
@keyframes sfarfallio {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.22); box-shadow: 0 0 0 26px color-mix(in srgb, var(--brand-accento) 30%, transparent); }
}

/* ── HUD ─────────────────────────────────────────────────────────────────── */
.guida {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  z-index: 6; margin: 0;
  padding: 6px 14px; border-radius: 3px; background: #0A0A0A99;
  font-family: var(--brand-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: #FFFFFFcc; pointer-events: none;
  backdrop-filter: blur(4px);
}
.guida:empty { display: none; }

/* ── NOTIFICA: il telefono è piccolo, il messaggio si vede anche qui ────── */
.avviso {
  position: absolute; right: 18px; bottom: 16px; z-index: 7;
  width: min(360px, 44%); text-align: left;
  display: grid; gap: 4px; padding: 12px 14px;
  border-radius: 10px; background: #17181Bf2; color: var(--carta);
  box-shadow: 0 18px 40px -16px #000000e6;
  border-left: 3px solid #5B6470;
  animation: arriva 380ms cubic-bezier(.22, 1, .36, 1);
  transition: opacity 600ms ease, transform 600ms ease;
}
.avviso--urgente { border-left-color: var(--rosso); }
.avviso--via { opacity: 0; transform: translateY(10px); }
/* il mittente è l'unica cosa che dice chi scrive prima di aprire il telefono, e
   la notifica resta pochi secondi: si legge al primo sguardo, anche da chi ha
   passato i cinquanta e gioca da un portatile. Il testo sta alla misura minima
   del telefono (17px) */
.avviso__da {
  font-family: var(--brand-mono); font-size: 15px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #FFFFFFd9;
}
.avviso__testo { font-family: var(--serif); font-size: 17px; line-height: 1.4; }
@keyframes arriva { from { opacity: 0; transform: translateY(16px) scale(.98); } }

.nota-volante {
  position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%);
  z-index: 8; padding: 10px 16px; border-radius: 4px;
  background: #0A0A0Ae6; color: var(--carta);
  font-family: var(--brand-mono); font-size: 12px; letter-spacing: .08em;
  animation: arriva 380ms cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hot__badge, .hot__anello { animation: none; }
}

.strato--spento > * { opacity: 0 !important; pointer-events: none !important; }
/* le parole lunghe nel badge ("Confronta", "Ricomponi") stringono il passo */
.hot__badge--lungo { font-size: 9.5px; letter-spacing: .02em; }

/* durante il cambio d'inquadratura (sfondo precalcolato) gli hotspot spariscono
   e riappaiono al loro posto nuovo, invece di saltare sopra la foto che sfuma */
.strato--passaggio > * { opacity: 0 !important; pointer-events: none !important; transition: opacity 90ms ease; }

/* ── HOTSPOT SUL BORDO ──────────────────────────────────────────────────────
   Un hotspot da usare che è fuori quadro diventa una freccia sul bordo: si
   clicca e lo sguardo si volta verso l'oggetto. */
.hot__freccia { display: none; }
.hot--bordo .hot__anello { display: none; }
.hot--bordo .hot__badge {
  transform: scale(0.62);
  animation: none;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-accento) 22%, transparent), 0 10px 30px -8px #000000cc;
}
.hot--bordo:hover .hot__badge, .hot--bordo:focus-visible .hot__badge { transform: scale(0.72); }
.hot--bordo .hot__freccia {
  display: block; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px;
  transform: rotate(var(--freccia, 0rad)) translateX(34px);
  pointer-events: none;
}
.hot--bordo .hot__freccia::before {
  content: ''; position: absolute; inset: 0;
  background: var(--brand-accento);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
  filter: drop-shadow(0 2px 4px #000a);
}
.hot--bordo .hot__et { opacity: 1; top: 30px; font-size: 10px; padding: 3px 8px; }

/* ci si gira afferrando la stanza */
.mondo__canvas { cursor: grab; }
.scena:active .mondo__canvas { cursor: grabbing; }

/* ── CHICCHE ─────────────────────────────────────────────────────────────────
   Le cose che non servono al caso (js/chicche.js). Testi e bersagli grandi:
   si gioca col trackpad, spesso in videochiamata. */

/* una chicca in corso (seduti, sbirciando, il caffè): gli hotspot del caso
   tacciono. Classe diversa da strato--spento, che è del motore. */
.strato--chicca > * { opacity: 0 !important; pointer-events: none !important; }

/* seduti in poltrona non si afferra niente */
.scena--ferma .mondo__canvas,
.scena--ferma:active .mondo__canvas { cursor: default; }

/* l'etichetta vicino al puntatore: "Un caffè?", "Siediti" */
.chicca-etichetta {
  position: absolute; left: 0; top: 0; z-index: 7;
  padding: 8px 14px; border-radius: 6px;
  background: #0A0A0Ae6; color: var(--carta);
  font-family: var(--brand-display); font-weight: 600; font-size: 18px; line-height: 1.2;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 10px 26px -12px #000000d9;
}
.chicca-etichetta[hidden] { display: none; }

/* una nota che passa: quello che dice una porta chiusa, i canestri fatti.
   Sopra il pulsante "Alzati" e sopra la nota del motore, che sta più in basso */
.chicca-nota {
  position: absolute; left: 0; right: 0; bottom: 96px; z-index: 8;
  width: max-content; max-width: 72%; margin: 0 auto;
  padding: 10px 18px; border-radius: 6px;
  background: #0A0A0Ae6; color: var(--carta);
  font-family: var(--brand-display); font-weight: 600; font-size: 17px; line-height: 1.25;
  text-align: center; pointer-events: none;
  box-shadow: 0 10px 26px -12px #000000d9;
}
.chicca-nota[hidden] { display: none; }
.chicca-nota--arriva { animation: arriva 380ms cubic-bezier(.22, 1, .36, 1); }

/* ── IL BINOCOLO ─────────────────────────────────────────────────────────────
   Un velo nero con due buchi tondi sovrapposti, dal bordo morbido. La scena è
   sempre 16:9, quindi due ellissi in percentuale (23,6% della larghezza, 42%
   dell'altezza) sono due cerchi veri: si scoprono dove il velo è trasparente,
   cioè dentro i due cerchi. Sotto, la messa a fuoco che si assesta. */
.binocolo {
  position: absolute; inset: 0; z-index: 5;
  background: #000; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 260ms ease, visibility 260ms ease;
  -webkit-mask-image:
    radial-gradient(ellipse 23.6% 42% at 35% 50%, #0000 84%, #000 100%),
    radial-gradient(ellipse 23.6% 42% at 65% 50%, #0000 84%, #000 100%);
  mask-image:
    radial-gradient(ellipse 23.6% 42% at 35% 50%, #0000 84%, #000 100%),
    radial-gradient(ellipse 23.6% 42% at 65% 50%, #0000 84%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.binocolo--su { opacity: 1; visibility: visible; }

/* alzando il binocolo agli occhi il fuoco si assesta in poco più di mezzo
   secondo, come una ghiera girata di un niente di troppo */
.scena--fuoco .mondo__canvas { animation: fuoco 640ms ease-out both; }
@keyframes fuoco {
  0%   { filter: blur(7px); }
  55%  { filter: blur(0.4px); }
  75%  { filter: blur(1.4px); }
  100% { filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .scena--fuoco .mondo__canvas { animation: none; }
}

/* "Alzati": grande, in basso al centro. Centrato coi margini e non con un
   transform, così hover e comparsa dei biglietti restano quelli */
.chicca-alzati {
  position: absolute; left: 0; right: 0; bottom: 24px; z-index: 8;
  width: max-content; margin: 0 auto;
  font-size: 18px; letter-spacing: .14em; padding: 1.05rem 2.8rem;
  animation: arriva 380ms cubic-bezier(.22, 1, .36, 1) both;
}
.chicca-alzati[hidden] { display: none; }
.chicca-alzati:focus-visible { outline: 2px solid var(--brand-accento); outline-offset: 4px; }