/* A quiet printed texture, with colour following a mouse on larger screens. */
body:has(.expansion-hero) main,
body:has(.expansion-hero) #how {
  position:relative;
  isolation:isolate;
  background-image:radial-gradient(circle,rgba(0,82,45,.16) 1px,transparent 1.25px);
  background-size:26px 26px;
}
body:has(.expansion-hero) main::before,
body:has(.expansion-hero) #how::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(circle,var(--amber) 1.8px,transparent 2px),radial-gradient(circle,var(--forest) 1.2px,transparent 1.5px);
  background-size:26px 26px,26px 26px;
  background-position:0 0,13px 13px;
  -webkit-mask-image:radial-gradient(circle 165px at var(--dot-x,-500px) var(--dot-y,-500px),#000,transparent);
  mask-image:radial-gradient(circle 165px at var(--dot-x,-500px) var(--dot-y,-500px),#000,transparent);
  opacity:0;
  transition:opacity .35s ease;
}
@media (prefers-reduced-motion:no-preference) {
  body:has(.expansion-hero) main.dots-active::before,
  body:has(.expansion-hero) #how.dots-active::before { opacity:1; }
}
@media (max-width:600px) {
  body:has(.expansion-hero) main,body:has(.expansion-hero) #how { background-size:32px 32px; }
}
body:has(.expansion-hero) .expansion-hero { background:transparent; }