/* ==========================================================================
   CANVAS SCENES
   Styling wrapper for the hero's canvas-driven visual. The drawing itself
   lives in ambient-scene.js, this file only handles how the canvas sits
   in its container.
   ========================================================================== */

   #hero-canvas {
    display: block;
    background:
      radial-gradient(circle at 30% 20%, rgba(20,184,166,0.06), transparent 55%),
      var(--bg);
  }
  
  /* Subtle grid behind the hero scene. Drawn once as a static CSS layer
     rather than redrawn every animation frame, unlike the game's own grid,
     nothing here needs to scroll, so there's no reason to spend canvas time
     on it every frame. */
  .section--hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 80px 100%;
    pointer-events: none;
  }