/* intro / preloader: a rendered desk to pull open, then a rendered camera move into the bench */
html.intro-on #view { opacity: .001; will-change: transform, opacity; }   /* painted under the opaque intro so the reveal does not stall */
html.intro-fly #view { will-change: transform, opacity; }
#intro { will-change: opacity; position: fixed; inset: 0; z-index: 9000; touch-action: none; overscroll-behavior: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
#intro .in-bg { position: absolute; inset: 0; background: var(--bench); }
/* the frame covers the viewport (sized in JS); the desk sits at its centre */
#intro .in-fig { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; will-change: transform; }
#intro .in-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#intro .in-cv, #intro .in-dw { animation: in-show 520ms cubic-bezier(.2, .8, .2, 1) backwards; }
/* the drawer is its own sprite, clipped at the desk's front edge; JS moves it with a transform only */
#intro .in-dw { position: absolute; inset: 0; pointer-events: none; }
#intro .in-dr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; transform-origin: 0 0; will-change: transform; pointer-events: none; }
@keyframes in-show { from { opacity: 0; } to { opacity: 1; } }
#intro.rm .in-cv, #intro.rm .in-dw { animation: none; }

/* the handle: an invisible hit area over the rendered knob, no ring */
#intro .in-knob {
  position: absolute; left: 0; top: 0; width: 88px; height: 88px; margin: -44px 0 0 -44px; padding: 0; border: 0; background: none; border-radius: 50%;
  cursor: grab; touch-action: none; color: inherit; -webkit-tap-highlight-color: transparent; outline: none; pointer-events: auto;
}
#intro .in-knob:active, #intro.pulling .in-knob { cursor: grabbing; }
#intro .in-knob:focus-visible { outline: 2px solid var(--ink); outline-offset: -10px; }

@media (prefers-reduced-motion: reduce) { #intro .in-cv, #intro .in-dw { animation: none; } }

/* eruption: clones of the live bench objects ride in a layer that mirrors the stage's transform; the real objects wait hidden until their clone lands */
#intro .in-erupt { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
#intro .in-erupt .obj { transform-origin: 50% 100%; will-change: transform, opacity; backface-visibility: hidden; }
#intro .in-erupt .in-shw { position: absolute; inset: 0; pointer-events: none; }
#stage .obj.in-hold { visibility: hidden !important; }