/* ============================================================
   HERO · CANVAS  (#gl WebGL layer + #staticmark SVG fallback)
   ============================================================ */

/* The Three.js canvas sits behind everything.

   width/height:100% are LOAD-BEARING, not decoration. <canvas> is a replaced
   element, so with width:auto it takes its intrinsic size — the width/height
   ATTRIBUTES, which are the drawing-buffer dimensions — and inset:0 does not
   stretch it. js/hero/scene3d.js calls setSize(w, h, false) so that Three.js
   never writes an inline pixel size (an inline height in px is wrong on iOS
   from the moment the URL bar moves); these two lines are what makes the
   element fill the viewport instead. Remove them and the canvas renders at
   buffer size, cropped — measured 525x262 inside a 320x568 viewport. */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}

/* static hero fallback for phones / no WebGL / reduced-motion */
#staticmark{
  position:fixed;inset:0;z-index:0;display:none;place-items:center;
  background:radial-gradient(ellipse at 50% 40%,#0A2AA8 0%,#00104F 46%,#000A3D 100%);
}
#staticmark .mk{
  width:min(62vw,420px);height:auto;color:#1F44E8;opacity:.5;
  animation:float 9s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(-10px) rotate(-2deg)}
  50%{transform:translateY(10px) rotate(2deg)}
}

/* js/hero/scene3d.js adds body.nogl when WebGL is unavailable */
body.nogl #gl{display:none}
body.nogl #staticmark{display:grid}

@media(prefers-reduced-motion:reduce){
  #staticmark .mk{animation:none}
}