/* Hero motion layer. Paired with /fx/hero-motion.js.
   The canvas sits behind the hero content; the scrim guarantees the display
   type stays legible no matter what the particles do underneath it. */
.hero{position:relative;overflow:hidden}
.herofx{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,var(--surface-ink) 8%,rgba(0,0,0,.55) 42%,transparent 78%)}
.hero>.wrap{position:relative;z-index:1}