/* Hero background particles - opt-in "gimmick" layer, kept separate from styles.css so it can be removed on its own */
.hero-particles{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0
}
.hero-particle{
  position:absolute;top:0;left:0;background:#fff;
  will-change:transform;filter:blur(.3px)
}
.hero-particle.is-circle{border-radius:50%}
.hero-particle.is-square{border-radius:2px;transform:rotate(20deg)}
.hero-particle.is-diamond{border-radius:2px;transform:rotate(45deg)}

/* This entire effect is motion by definition, so it's fully opt-out under reduced-motion */
@media(prefers-reduced-motion:reduce){
  .hero-particles{display:none}
}