/* forge-turntable — stile del viewer drop-in. Fondo scuro caldo = la lampada/oggetto
   path-tracato (PNG trasparente) ci si posa sopra come "acceso in una stanza buia".
   Personalizza --tt-bg per intonarlo al sito. */
.tt{
  position:relative; aspect-ratio:4/5; cursor:grab;
  background:transparent;   /* telefono LIBERO sul fondo del sito, nessun riquadro */
}
.tt:active{ cursor:grabbing }
.tt-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; touch-action:pan-y }
.tt-fall{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  opacity:0; transition:opacity .8s ease; pointer-events:none } /* visibile solo in fallback */
.tt.tt-fail .tt-canvas, .tt.tt-fail .tt-hint, .tt.tt-fail .tt-zoom{ display:none }
.tt.tt-fail .tt-fall{ opacity:1 }
.tt-hint{ position:absolute; bottom:.4rem; left:50%; transform:translateX(-50%); z-index:2;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; opacity:.5; pointer-events:none; color:#8891a6 }
.tt-zoom{ position:absolute; right:.2rem; bottom:.5rem; z-index:3; display:flex; flex-direction:column; gap:.4rem }
.tt-zoom button{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
  background:rgba(22,25,34,.7); color:#fff; font-size:1.2rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:border-color .3s, background .3s }
.tt-zoom button:hover{ border-color:#4f6bff; background:rgba(79,107,255,.28) }
@media (max-width:768px){ .tt-zoom button{ width:44px; height:44px; font-size:1.4rem } .tt-zoom{ gap:.7rem } }
@media (prefers-reduced-motion: reduce){ .tt-canvas{ transition:none !important } }