/* Brand ribbon: yellow to orange to blue across the top of the hero, drifting gently and leaning toward the pointer. */
.hero[data-alpha-hero] .hero-glow{
 --mx:0;--my:0;
 position:absolute;
 z-index:0;
 inset:-10% -10% 0;
 pointer-events:none;
 background:linear-gradient(105deg,
  rgba(255,184,0,.34) 0%,rgba(255,184,0,.26) 14%,rgba(255,122,43,.36) 32%,rgba(255,122,43,.30) 44%,
  rgba(255,122,43,.06) 54%,rgba(47,91,255,.14) 60%,rgba(47,91,255,.46) 76%,rgba(47,91,255,.58) 100%);
 background-size:108% 100%;
 -webkit-mask-image:radial-gradient(ellipse 85% 62% at 50% 0%,#000 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.25) 68%,transparent 100%);
 mask-image:radial-gradient(ellipse 85% 62% at 50% 0%,#000 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.25) 68%,transparent 100%);
 translate:calc(var(--mx) * 14px) calc(var(--my) * 8px);
 transition:translate 1.4s cubic-bezier(.2,.7,.2,1);
 animation:bw-ribbon-flow 24s ease-in-out infinite alternate;
}
@keyframes bw-ribbon-flow{from{background-position-x:0%}to{background-position-x:100%}}
.hero[data-alpha-hero] .hero-gravity{
 position:absolute;
 z-index:0;
 inset:0;
 width:100%;
 height:100%;
 pointer-events:none;
}
/* When the interactive dots are running, hide the static dot layer they replace. */
.hero[data-alpha-hero].has-gravity::before{
 background:
  radial-gradient(circle at 14% 30%,rgba(255,122,43,.10),transparent 23%),
  radial-gradient(circle at 86% 67%,rgba(47,91,255,.10),transparent 25%);
}
@media(max-width:800px){
 .hero[data-alpha-hero] .hero-glow{
  inset:0;
  background-size:104% 100%;
  -webkit-mask-image:radial-gradient(ellipse 120% 48% at 50% 0%,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
  mask-image:radial-gradient(ellipse 120% 48% at 50% 0%,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
 }
}
@media(prefers-reduced-motion:reduce){
 .hero[data-alpha-hero] .hero-glow{animation:none;transition:none}
}
@media(prefers-reduced-transparency:reduce){
 .hero[data-alpha-hero] .hero-glow{display:none}
}