/* Each field repeats its curve twice so a half-width translation has no seam. */
.hero::before,.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 85% 0,color-mix(in srgb,var(--accent-2) 14%,transparent),transparent 65%),radial-gradient(ellipse at 5% 30%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 60%);pointer-events:none}
.hero-wave{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:var(--hero-wave-opacity);-webkit-mask-image:var(--hero-wave-mask);mask-image:var(--hero-wave-mask)}
.hero>.hero-wave{max-height:var(--hero-wave-height)}
.hero-wave-field{position:absolute;inset:0;width:200%;max-width:none;height:100%;fill:none;color:var(--accent);stroke:currentColor;stroke-width:var(--border-thin)}
.hero-wave-field path{vector-effect:non-scaling-stroke}
.hero-wave-field-back{top:12%;color:var(--accent-2);opacity:.65}
@media(prefers-reduced-motion:no-preference){
  .hero-wave-field{animation:hero-wave-travel var(--hero-wave-duration) linear infinite}
  .hero-wave-field-back{animation-duration:var(--hero-wave-slow);animation-direction:reverse}
}
@keyframes hero-wave-travel{to{transform:translateX(-50%)}}