/* earth-fallback.css — static stand-in for the procedural WebGL planet.
   ------------------------------------------------------------------------
   earth-gl.js adds the class `earth-fallback` to the canvas it was handed
   whenever it cannot render: no WebGL context, or the shader program failed to
   compile/link. In that case init() still returns a controller (all methods
   no-ops), so nothing throws — but the canvas would otherwise be blank. These
   rules paint a planet-shaped disc in its place using nothing but CSS
   gradients, roughly matching the shader's palette: deep blue oceans, a faint
   cyan-white atmosphere rim, and a highlight on the lit side.

   Include it standalone:  <link rel="stylesheet" href="assets/earth-fallback.css">
   (or paste the block below into your main stylesheet — this file intentionally
   touches nothing else, so it is safe to drop in anywhere.)

   The disc is positioned to approximate the default "orbit-right" hero
   geometry: centre at 74% / 46% of the canvas box, radius min(42vmin, 460px).
   The controller's setCenter() is a no-op on this path, so the geometry is
   static — tweak the three --earth-* custom properties if your layout differs.
   ------------------------------------------------------------------------ */

.earth-fallback {
  /* Baseline (no calc()/min() needed) — kept first so ancient engines that
     drop the refined rule below still get a planet. */
  background-color: transparent;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 40vmin at 74% 46%,
      #123056 0%, #0d2444 55%, #081831 84%, #050e1c 100%),
    radial-gradient(circle 53vmin at 74% 46%,
      rgba(150, 200, 235, 0) 73%, rgba(164, 212, 242, 0.24) 78%, rgba(150, 200, 235, 0) 100%);
}

.earth-fallback {
  --earth-x: 74%;
  --earth-y: 46%;
  --earth-r: min(42vmin, 460px);

  background-image:
    /* 1. lit-side highlight — light sits up-and-right of centre, matching the
          module's default light direction (0.35, 0.25). Stays inside the disc. */
    radial-gradient(circle calc(var(--earth-r) * 0.62)
        at calc(var(--earth-x) + var(--earth-r) * 0.30) calc(var(--earth-y) - var(--earth-r) * 0.26),
      rgba(126, 178, 222, 0.5) 0%,
      rgba(126, 178, 222, 0.16) 45%,
      rgba(126, 178, 222, 0) 72%),
    /* 2. the planet: deep ocean blue falling off to a dark night limb */
    radial-gradient(circle var(--earth-r) at var(--earth-x) var(--earth-y),
      #123056 0%,
      #0d2444 44%,
      #081831 76%,
      #050e1c 95%,
      rgba(5, 14, 28, 0) 100%),
    /* 3. atmosphere: brightest just off the limb, gone by 1.32R like the
          shader's outer glow (1.0/1.32 = 76% of this circle). */
    radial-gradient(circle calc(var(--earth-r) * 1.32) at var(--earth-x) var(--earth-y),
      rgba(150, 200, 235, 0) 73%,
      rgba(164, 212, 242, 0.26) 77%,
      rgba(158, 206, 238, 0.09) 84%,
      rgba(150, 200, 235, 0.02) 92%,
      rgba(150, 200, 235, 0) 100%);
}

/* The fallback is entirely static, so it already satisfies reduced-motion;
   this only guards against a transition being inherited from elsewhere. */
@media (prefers-reduced-motion: reduce) {
  .earth-fallback { transition: none; animation: none; }
}