/* Scena condivisa dei servizi: livelli ascendenti nel sito; binari conservati nel confronto. */
.demo-machine { height: auto; aspect-ratio: 900 / 660; background: color-mix(in srgb, var(--muted) 20%, var(--ink)); }
.demo-model { display: none; position: absolute; left: 50%; top: 50%; width: 900px; height: 660px; margin: -330px 0 0 -450px; transform: scale(var(--demo-scale, .6)); isolation: isolate; }
.machine-ready .demo-model { display: block; }
/* Le basi restano su un piano autonomo: soltanto le schede ricevono la prospettiva.
   Si muove il contenitore HTML; il disegno SVG interno mantiene coordinate stabili. */
.demo-foundation { position: absolute; inset: 0; z-index: 1; width: 900px; height: 660px; transform: translate3d(0, 0, 0); pointer-events: none; }
.demo-panels { position: absolute; inset: 0; z-index: 4; width: 900px; height: 660px; perspective: 1400px; perspective-origin: 50% 50%; }
.demo-backdrop { position: absolute; inset: 0; width: 900px; height: 660px; object-fit: cover; pointer-events: none; }
.demo-machine[data-demo='stairs'] { background: radial-gradient(ellipse at 42% 28%, color-mix(in srgb, var(--muted) 30%, var(--ink)), var(--ink)); }
.demo-floor { position: absolute; left: 0; bottom: 0; width: 900px; height: 260px; background: radial-gradient(ellipse at center, rgba(201, 184, 158, .07), rgba(11, 11, 11, 0) 72%); }
.demo-rails, .demo-stairs { position: absolute; inset: 0; width: 900px; height: 660px; overflow: visible; pointer-events: none; }
.demo-rails { z-index: 2; }
.track-bed { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.track-edge { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.track-shine { fill: none; stroke: var(--white); stroke-opacity: .4; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.track-active { fill: none; stroke: var(--sand); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--track-focus, 0)); stroke-linecap: round; }
.station-ring { fill: var(--ink); fill-opacity: .3; stroke: var(--sand); stroke-opacity: .34; stroke-width: 1; }
.station-slot { fill: var(--blue); stroke: var(--sand); stroke-width: 1; }
.demo-panel { position: absolute; left: -120px; top: -240px; width: 240px; height: 240px; transform-origin: 50% 100%; transform-style: preserve-3d; }
.demo-panel .screen-rim { border-radius: 14px; }
.demo-panel .screen-face { border-width: 4px; border-radius: 14px; border-bottom-color: color-mix(in srgb, var(--sand) 25%, var(--white)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .46); }
.demo-panel .screen-texture.texture-social { inset: 0; width: 100%; height: 100%; }
.demo-panel[data-focused='true'] .screen-face { border-bottom-color: var(--blue); }
.demo-panel .screen-stand { width: 34px; height: 13px; left: 103px; top: 235px; border-radius: 0 0 5px 5px; }
.demo-panel .screen-signal { right: 112px; bottom: -10px; width: 16px; height: 7px; border-width: 1px; }
.demo-panel[data-focused='true'] .screen-signal { border-color: var(--sand); background: var(--white); }
.demo-panel-shadow { position: absolute; left: -132px; top: -14px; width: 264px; height: 40px; z-index: 3; border-radius: 50%; transform-origin: 50% 35%; background: radial-gradient(ellipse, var(--ink), rgba(11, 11, 11, 0) 70%); pointer-events: none; }
.demo-machine.is-moving .demo-panel { will-change: transform; }
.step-shadow { fill: var(--ink); opacity: .45; }
.step-top { stroke: rgba(201, 184, 158, .5); stroke-width: 1.2; }
.step-front { fill: var(--ink); stroke: rgba(201, 184, 158, .2); stroke-width: 1; }
.step-side { fill: color-mix(in srgb, var(--muted) 25%, var(--ink)); stroke: rgba(201, 184, 158, .25); stroke-width: 1; }
.step-inlay { fill: none; stroke: var(--blue); stroke-width: 2; opacity: .5; }
.step-selection { fill: var(--blue); opacity: calc(var(--platform-focus, 0) * .78); }
.step-edge { fill: none; stroke: var(--sand); stroke-width: 2; opacity: calc(.15 + var(--platform-focus, 0) * .8); }
.stair-link { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; }
.stair-link-highlight { fill: none; stroke: var(--white); stroke-width: .7; opacity: .4; }
@media (prefers-reduced-motion: reduce) { .demo-machine.is-moving .demo-panel { will-change: auto; } }