/* laptop-3d.css — the stage for laptop-3d.js (About 05, Home 02). 2026-09-23
   The still render keeps the stage's place and stays in the accessibility
   tree; the canvas draws over it and takes its place once the first frame is
   ready. The stage is 1.3 : 1, the shape the model's framing is tuned for.
   On a coloured plane, set --l3d-tag-bg and --l3d-ring (see home.css §6). */
.l3d-stage { position: relative; display: grid; align-content: center; aspect-ratio: 1.3; }
.l3d-stage > picture, .l3d-canvas { transition: opacity 0.6s var(--sw-ease); }
.l3d-stage > picture, .l3d-stage img { display: block; width: 100%; height: auto; }
.l3d-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; -webkit-tap-highlight-color: transparent; }
.l3d-stage.is-3d-live > picture { opacity: 0; }
.l3d-stage.is-3d-live > .l3d-canvas { opacity: 1; }

/* The keyboard way to open and close it: hidden until focused, then a mono tag. */
.l3d-toggle {
  position: absolute; left: 0; bottom: 0; margin: 0; padding: 8px 10px; border: 0; border-radius: 0;
  background: var(--l3d-tag-bg, var(--sw-paper)); color: var(--sw-ink); cursor: pointer;
  font-family: var(--sw-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
}
.l3d-toggle:not(:focus-visible) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sw .l3d-toggle:focus-visible { outline-color: var(--l3d-ring, var(--sw-accent)); }

@media (prefers-reduced-motion: reduce) {
  .l3d-stage > picture, .l3d-canvas { transition: none; }
}