/* Floating background shapes (homepage hero + auth side panels).
   .hs is moved by shapes.js (parallax + cursor repel), its <i> idles, the svg spins. */
.fx-shapes{position:absolute;inset:0;pointer-events:none;z-index:0;}
.hs{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);color:#fff;opacity:calc(var(--o,.28) + var(--p,0) * .45);will-change:transform;}
.hs.amber{color:#FBBF24;}
.hs.mint{color:#6EE7B7;}
.hs.sky{color:#BFDBFE;}
.hs > i{display:block;width:100%;height:100%;animation:hs-float var(--t,9s) ease-in-out var(--dl,0s) infinite alternate;}
.hs svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:hs-spin var(--r,38s) linear infinite var(--dir,normal);}
.hs.still svg{animation:none;}
.hs svg .fill{fill:currentColor;stroke:none;}
@keyframes hs-float{
  0%{transform:translate(0,0);}
  50%{transform:translate(var(--fx,10px),var(--fy,-16px));}
  100%{transform:translate(calc(var(--fx,10px) * -.6),calc(var(--fy,-16px) * .5));}
}
@keyframes hs-spin{to{transform:rotate(360deg);}}

/* On narrow screens the text spans the full width, so only the edge shapes stay. */
@media (max-width:960px){
  .hs.wide-only{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .hs > i,.hs svg{animation:none;}
}