/* MatDrone FLIGHT — scene layer specifics. Owns: scene- prefix.
   base.css already positions .scene-fallback / .scene / .scene-dim as fixed full-viewport
   layers at z-canvas with pointer-events:none. This file adds the fallback terrain visual,
   the ready-state hide, and canvas hints. Nothing here hides content without JS. */

/* ---------- Canvas ---------- */
#scene {
  display: block;
  width: 100%;
  height: 100%;
}
/* The canvas fades in over the CSS backdrop on its first rendered frame (no black flash). */
html.js #scene { opacity: 0; transition: opacity 1.1s var(--ease-out); }
html.is-scene-ready #scene { opacity: 1; }

/* ---------- #scene-fallback: pure-CSS dusk terrain, visible until (and unless) WebGL boots.
   Layered gradients: deep sky at top, a warm horizon band, and faint contour/grid lines
   echoing the survey mode. When the WebGL scene is ready it fades out behind the canvas. */
#scene-fallback {
  opacity: 1;
  transition: opacity 0.9s var(--ease-out);
  background:
    radial-gradient(120% 70% at 55% 70%, rgba(31, 139, 255, 0.28), transparent 60%),
    radial-gradient(90% 40% at 50% 66%, rgba(116, 194, 255, 0.14), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(116, 194, 255, 0.05) 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(116, 194, 255, 0.04) 34px 35px),
    linear-gradient(180deg, #03060c 0%, #071020 45%, #0b1a33 66%, #05080d 100%);
}
/* A soft horizon line where the "sky" meets the "ground" */
#scene-fallback::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 68%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(116, 194, 255, 0.45), transparent);
}

/* Once the WebGL world is rendering, the fallback retires (scene.js sets html.is-scene-ready). */
html.is-scene-ready #scene-fallback {
  opacity: 0;
}
/* On the fallback milestone the canvas is hidden by scene.js (display:none) and the
   fallback stays visible. Nothing more needed here. */

/* ---------- #scene-dim veil: opacity driven by scene.js (damped per frame), so no transition.
   It darkens the world for text legibility in air sections (data-dim). */
#scene-dim {
  opacity: 0;
}

/* Reduced motion: no transition flourish on fallback swap. */
@media (prefers-reduced-motion: reduce) {
  #scene-fallback { transition: none; }
}