/* Quiet geometric motion across the hero, behind its content. */
.hero{position:relative;isolation:isolate}
.hero-shapes{position:absolute;inset:0 -35px auto;height:640px;overflow:hidden;pointer-events:none;z-index:-1;mask-image:linear-gradient(#000 0%,#000 70%,transparent 100%)}
.hero-shape{position:absolute;display:block;width:var(--size);height:var(--size);animation:shape-drift var(--speed,18s) ease-in-out infinite;animation-delay:var(--delay,0s);opacity:.9867}
.hero-shape i{position:absolute;inset:0;display:block;border:1px solid #ffffff16;animation:shape-turn 32s linear infinite;animation-delay:var(--delay,0s)}
.shape-ring i{--first-radius:50%;--next-radius:24%;border-radius:50%}
.shape-square i{--first-radius:24%;--next-radius:50%;border-radius:24%;transform:rotate(18deg)}
.shape-ring i,.shape-square i{animation:shape-turn 32s linear infinite,shape-swap calc(var(--speed,18s) * 2) linear infinite;animation-delay:var(--delay,0s),var(--delay,0s)}
.shape-ring i:after,.shape-square i:after{content:"";position:absolute;inset:-1px;border:1px solid transparent;border-top-color:#ff784ba3;border-right-color:#ff784b2e;border-radius:inherit;animation:shape-light 9s ease-in-out infinite;animation-delay:var(--delay,0s)}
.shape-spark i{border:0;animation-duration:44s}
.shape-spark i:before,.shape-spark i:after{content:"";position:absolute;left:0;top:calc(50% - 1px);width:100%;height:2px;background:linear-gradient(90deg,transparent,#ff936966,transparent);border-radius:50%}
.shape-spark i:after{transform:rotate(90deg)}
.shape-dot{border-radius:50%;background:#ff8c6166;box-shadow:0 0 22px 7px #ff784b10}
.shape-a{--size:178px;left:26%;top:80px;--speed:22s;--delay:-7s}
.shape-b{--size:82px;left:39%;top:340px;--speed:19s;--delay:-4s}
.shape-c{--size:32px;left:19%;top:77px;--speed:17s;--delay:-11s}
.shape-d{--size:5px;left:8%;top:330px;--speed:13s;--delay:-3s}
.shape-e{--size:146px;right:25%;top:55px;--speed:24s;--delay:-13s}
.shape-f{--size:64px;right:35%;top:274px;--speed:18s;--delay:-9s}
.shape-g{--size:35px;right:17%;top:42px;--speed:21s;--delay:-5s}
.shape-h{--size:5px;right:7%;top:375px;--speed:16s;--delay:-8s}
.shape-i{--size:178px;left:0;top:25px;--speed:25s;--delay:-10s}
.shape-j{--size:88px;left:13%;top:305px;--speed:20s;--delay:-6s}
.shape-k{--size:146px;right:1%;top:85px;--speed:23s;--delay:-12s}
.shape-l{--size:70px;right:14%;top:340px;--speed:19s;--delay:-2s}
/* Radius changes only inside each drift cycle's fully invisible 78–80% window. */
@keyframes shape-drift{0%,100%{transform:translate3d(-10px,10px,0) rotate(-8deg);opacity:.9867}65%{transform:translate3d(22px,-24px,0) rotate(12deg);opacity:.9867}78%{transform:translate3d(26px,-30px,0) rotate(16deg);opacity:0}80%{transform:translate3d(-18px,16px,0) rotate(-12deg);opacity:0}95%{opacity:.9867}}
@keyframes shape-swap{0%,39%,90%,100%{border-radius:var(--first-radius)}40%,89%{border-radius:var(--next-radius)}}
@keyframes shape-turn{to{transform:rotate(378deg)}}
@keyframes shape-light{0%,100%{opacity:.2}50%{opacity:1}}
.hero-shapes.motion-resting *,.hero-shapes.motion-resting *:before,.hero-shapes.motion-resting *:after{animation-play-state:paused}
@media(max-width:800px){.hero-shapes{inset-inline:-24px;opacity:.6}.shape-b{left:24%;top:355px;--size:55px}.shape-f{right:25%;top:275px;--size:48px}.shape-c{left:5%;top:30px}.shape-g{right:5%;top:25px}.shape-a{left:8%;--size:130px}.shape-e{right:10%;top:140px;--size:100px}.shape-d,.shape-h{display:none}}
@media(max-width:800px){.shape-i{left:-55px;top:210px;--size:105px}.shape-j{left:3%;top:440px;--size:58px}.shape-k{right:-40px;top:45px;--size:92px}.shape-l{right:0;top:375px;--size:56px}}
@media(prefers-reduced-motion:reduce){.hero-shapes{opacity:.4}}