/* Lo scanner in piccolo nel riquadro del foglio della home (tavola.js).
   La scena la crea lo script solo se puo' muoversi (GSAP presente, senza "riduci movimento"): senza, il foglio e' gia' li', finito. */

.tavola--in-scena .tavola__foglio canvas[data-tavola] { opacity: 0; }

.tavola__scena {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; background: var(--carta);
  transition: opacity 320ms ease-out;
}
.tavola__scena--esce { opacity: 0; }
.tavola__piano { position: absolute; left: 50%; top: 50%; will-change: transform; }

.tv-scanner { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, #2A2F34 0%, var(--inchiostro) 100%); border: 2px solid var(--inchiostro); }
.tv-fessura { position: absolute; left: calc(var(--e) * 3); right: calc(var(--e) * 3); top: calc(var(--e) * 1.2); height: calc(var(--e) * 0.9); background: #05070A; border-bottom: 1px solid #3B4147; }
.tv-luce {
  position: absolute; left: calc(var(--e) * 3); right: calc(var(--e) * 3); top: calc(var(--e) * 1.35); height: calc(var(--e) * 0.6);
  background: var(--rosso); box-shadow: 0 0 calc(var(--e) * 1.6) calc(var(--e) * 0.2) rgba(228, 52, 52, 0.55); opacity: 0.25;
}
.tv-spia { position: absolute; right: calc(var(--e) * 3); bottom: calc(var(--e) * 3); width: calc(var(--e) * 1.2); height: calc(var(--e) * 1.2); background: var(--rosso); }
.tv-marchio { position: absolute; left: calc(var(--e) * 3); bottom: calc(var(--e) * 2.4); font: 500 calc(var(--e) * 1.7)/1 var(--f-dati); letter-spacing: 0.14em; text-transform: uppercase; color: #9AA0A6; }
.tv-ombra { position: absolute; z-index: 0; left: calc(var(--e) * -2); right: calc(var(--e) * -2); top: calc(var(--e) * 4); bottom: calc(var(--e) * -3); background: rgba(22, 25, 28, 0.22); filter: blur(calc(var(--e) * 1.6)); }
.tv-foglio { position: absolute; z-index: 1; left: 50%; top: 0; display: block; margin-left: calc(var(--e) * -14.3); }
.tv-foglio--carta { background: var(--foglio); box-shadow: 0 0 0 1px var(--filetto), 0 6px 18px rgba(22, 25, 28, 0.16); }
.tv-foglio--digitale { background: var(--foglio); box-shadow: 0 0 0 1px var(--inchiostro); }
@media print { .tavola__scena { display: none; } }