/*
 * Loading screen for the 3D demos: a black-and-white still of the scene's first frame with a
 * pulsing "Loading the 3D scene..." label. A static file linked from each page's <head>, so it
 * shows before any JavaScript has downloaded. The page's script (src/docs/tutorial/
 * loading_screen.ts) then moves it over the canvas and fades it out on 'sceneready'.
 * Images: public/img/loading/<page>.jpg, regenerated with `npm run capture-loading`.
 */
.scene-loading { position: relative; width: min(calc(100% - 40px), 820px); aspect-ratio: 1654 / 1323; margin: 20px auto; border-radius: 8px; overflow: hidden; background: #222; }
.scene-loading.in-canvas { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; z-index: 1; pointer-events: none; transition: opacity 0.6s ease; }
.scene-loading.loaded { opacity: 0; }
.scene-loading img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene-loading-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 10px 18px; border-radius: 6px; background: rgba(0, 0, 0, 0.65); color: #fff; font: 600 1.15rem/1.3 sans-serif; letter-spacing: 0.02em; white-space: nowrap; animation: scene-loading-pulse 1.4s ease-in-out infinite; }
@keyframes scene-loading-pulse { 50% { opacity: 0.55; } }