/* BloomX inner-page hero motifs (designer-owned). Canvas drawn by motifs.js.
   Sits behind the hero copy, right-hand side; a radial + left-edge mask keeps the title and intro readable.
   No JS: the mount stays empty and the static bloom remains as fallback. */
.page-hero{isolation:isolate}
.hero-motif{
  position:absolute;z-index:0;pointer-events:none;
  top:calc(var(--header-h, 4.5rem) - 1.5rem);
  right:max(-12vw, calc((100vw - var(--maxw, 90rem)) / 2 - 9rem));
  width:min(46vw, 42rem);aspect-ratio:1;
  opacity:0;
  -webkit-mask:radial-gradient(closest-side, #000 58%, transparent 100%), linear-gradient(90deg, transparent 0, #000 46%);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(closest-side, #000 58%, transparent 100%) intersect, linear-gradient(90deg, transparent 0, #000 46%);
}
.hero-motif.is-ready{opacity:.92;transition:opacity 1.2s ease}
.hero-motif canvas{display:block;width:100%;height:100%}
.page-hero .wrap .hero-motif{z-index:-1}
/* a live motif replaces the static bloom (the bloom stays as the no-JS fallback) */
.page-hero:has(> .hero-motif.is-ready) > .page-hero-bloom{display:none}

@media (max-width:64rem){
  .hero-motif{width:min(62vw, 36rem);right:-8vw}
  .hero-motif.is-ready{opacity:.75}
}
@media (max-width:40rem){
  .hero-motif{width:80vw;right:-26vw;top:calc(var(--header-h, 4.5rem) - .5rem)}
  .hero-motif.is-ready{opacity:.55}
}
@media (prefers-reduced-motion:reduce){
  .hero-motif.is-ready{transition:none}
}