/* =====================================================================
   OSE · Starfield · styles/components/starfield.css
   ---------------------------------------------------------------------
   The layer the starfield scene draws into: an empty, decorative box that
   covers its navy / night band, behind the band's content. This file only
   sizes and places it; the stars themselves are canvases the scene
   (/js/motion/scenes/starfield.js) creates inside it. Navy and night
   bands only. Component tokens: --starfield-* (the block in
   components.css is shared with the scene, which reads the rest).

   Markup — the FIRST child of a positioned band (e.g. .cta-band):
     <div class="starfield" data-scene="starfield" aria-hidden="true"></div>

   Box      absolute, inset 0 of the band (its padding box), under the
            content (--starfield-z; content uses a higher layer), clips its
            canvases, never takes pointer events.
   Empty    without JS, with reduced motion or if the scene fails, the box
            is empty and not rendered at all (:empty → display: none). While
            motion.js runs the scene (data-scene-state="running") the box is
            laid out even before the first canvas exists, so it can be measured.
   Canvases each direct <canvas> child covers the box by default; the scene
            may give them their own size and offset (inline styles win), e.g.
            a bleed of --starfield-depth-far for the parallax drift.
   Static, no states. No JS of its own.
   ===================================================================== */

@layer components {
  .starfield {
    position: absolute;
    inset: 0;
    z-index: var(--starfield-z);
    overflow: hidden;
    pointer-events: none;
  }

  /* Laid out while the scene runs (motion.js marks the root), so it can be
     measured before its canvases exist. */
  .starfield:empty:not([data-scene-state="running"]) {
    display: none;
  }

  .starfield > canvas {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }
}