/* Signal field (animated canvas) — same file for the homepage and every inner-page hero.
   Replaces the 64px static grid in styles.css (.hero::before).
   hero-bg.js inserts <canvas class="hero-bg-canvas"> after window load (does not delay LCP).
   The typographic column is kept clear of bright dots so H1 / lead contrast is unchanged;
   slightly brighter particles live in the field zone (right on desktop, bottom on mobile). */
.hero{background-color:#7a736b}
.hero::before{background:none}
.hero .wrap{z-index:1}
.hero-bg-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  /* Soft safety mask: typographic side stays on flat #7a736b; field is fully visible. */
  -webkit-mask-image:linear-gradient(90deg, transparent 42%, rgba(0,0,0,.35) 55%, #000 72%);
          mask-image:linear-gradient(90deg, transparent 42%, rgba(0,0,0,.35) 55%, #000 72%)}
@media (max-width:700px){
  .hero-bg-canvas{-webkit-mask-image:linear-gradient(180deg, transparent 62%, rgba(0,0,0,.4) 78%, #000 92%);
                  mask-image:linear-gradient(180deg, transparent 62%, rgba(0,0,0,.4) 78%, #000 92%)}
}
@media (prefers-reduced-motion: reduce){
  /* JS already draws one static frame; this is only a hint to the compositor. */
  .hero-bg-canvas{/* no animation in CSS */}
}