.tool-motion{position:relative;width:100%;height:108px;overflow:hidden;border:1px solid color-mix(in srgb,var(--motion-color),transparent 72%);border-radius:14px;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--motion-color),transparent 82%),transparent 55%),linear-gradient(rgba(17,16,25,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(17,16,25,.045) 1px,transparent 1px),rgba(255,255,255,.28);background-size:auto,18px 18px,18px 18px}.tool-motion:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.52) 45%,transparent 70%);transform:translateX(-130%);animation:motionScan 4.8s ease-in-out infinite}.tool-motion span{position:absolute;display:block;color:var(--motion-color)}
.motion-quad span{width:32px;height:32px;border:2px solid currentColor;opacity:.8}.motion-quad span:nth-child(1){left:calc(50% - 34px);top:20px}.motion-quad span:nth-child(2){left:calc(50% + 2px);top:20px}.motion-quad span:nth-child(3){left:calc(50% - 34px);top:56px}.motion-quad span:nth-child(4){left:calc(50% + 2px);top:56px}.motion-quad span:nth-child(5){left:calc(50% - 25px);top:53px;width:50px;height:2px;border:0;background:currentColor;transform:rotate(45deg);animation:quadDiagonal 2.8s ease-in-out infinite}
.motion-hair span{bottom:13px;width:30px;height:76px;border-left:3px solid currentColor;border-radius:50% 0 0 50%;transform-origin:bottom center;animation:hairSway 2.5s ease-in-out infinite}.motion-hair span:nth-child(1){left:28%;height:58px}.motion-hair span:nth-child(2){left:38%;height:75px;animation-delay:-.35s}.motion-hair span:nth-child(3){left:48%;height:82px;animation-delay:-.7s}.motion-hair span:nth-child(4){left:58%;height:73px;animation-delay:-1.05s}.motion-hair span:nth-child(5){left:68%;height:56px;animation-delay:-1.4s}
.motion-piano span{bottom:19px;width:15px;border-radius:4px 4px 2px 2px;background:currentColor;transform-origin:bottom;animation:pianoKey 1.9s ease-in-out infinite}.motion-piano span:nth-child(1){left:calc(50% - 45px);height:43px}.motion-piano span:nth-child(2){left:calc(50% - 24px);height:64px;animation-delay:-.25s}.motion-piano span:nth-child(3){left:calc(50% - 3px);height:52px;animation-delay:-.5s}.motion-piano span:nth-child(4){left:calc(50% + 18px);height:72px;animation-delay:-.75s}.motion-piano span:nth-child(5){left:calc(50% + 39px);height:39px;animation-delay:-1s}
.motion-voice span{top:50%;width:7px;height:54px;margin-top:-27px;border-radius:999px;background:currentColor;transform-origin:center;animation:voiceWave 1.25s ease-in-out infinite}.motion-voice span:nth-child(1){left:calc(50% - 38px);animation-delay:-.1s}.motion-voice span:nth-child(2){left:calc(50% - 20px);animation-delay:-.28s}.motion-voice span:nth-child(3){left:calc(50% - 2px);animation-delay:-.46s}.motion-voice span:nth-child(4){left:calc(50% + 16px);animation-delay:-.64s}.motion-voice span:nth-child(5){left:calc(50% + 34px);animation-delay:-.82s}
.motion-convert:before{content:"→";position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-52%);color:var(--motion-color);font:700 22px "Space Grotesk",sans-serif;animation:convertArrow 1.8s ease-in-out infinite}.motion-convert span{top:50%;width:8px;border-radius:999px;background:currentColor;animation:convertWave 1.45s ease-in-out infinite}.motion-convert span:nth-child(1){left:18%;height:28px;margin-top:-14px}.motion-convert span:nth-child(2){left:28%;height:54px;margin-top:-27px;animation-delay:-.3s}.motion-convert span:nth-child(3){right:28%;height:42px;margin-top:-21px;animation-delay:-.6s}.motion-convert span:nth-child(4){right:18%;height:64px;margin-top:-32px;animation-delay:-.9s}.motion-convert span:nth-child(5){left:50%;top:20px;width:2px;height:68px;opacity:.2}
.motion-retopo span{left:50%;top:50%;border:2px solid currentColor;transform:translate(-50%,-50%) rotate(45deg);animation:retopoMesh 3s ease-in-out infinite}.motion-retopo span:nth-child(1){width:66px;height:66px}.motion-retopo span:nth-child(2){width:48px;height:48px;animation-delay:-.3s}.motion-retopo span:nth-child(3){width:30px;height:30px;animation-delay:-.6s}.motion-retopo span:nth-child(4){left:31%;width:24px;height:24px;animation-delay:-.9s}.motion-retopo span:nth-child(5){left:69%;width:24px;height:24px;animation-delay:-1.2s}
.motion-lighting span:nth-child(1){left:50%;top:50%;width:34px;height:34px;border-radius:50%;background:currentColor;transform:translate(-50%,-50%);box-shadow:0 0 30px color-mix(in srgb,var(--motion-color),transparent 30%);animation:lightCore 2.1s ease-in-out infinite}.motion-lighting span:not(:first-child){left:50%;top:50%;width:3px;height:36px;border-radius:999px;background:currentColor;transform-origin:50% 0}.motion-lighting span:nth-child(2){transform:rotate(0deg) translateY(-48px)}.motion-lighting span:nth-child(3){transform:rotate(90deg) translateY(-48px)}.motion-lighting span:nth-child(4){transform:rotate(180deg) translateY(-48px)}.motion-lighting span:nth-child(5){transform:rotate(270deg) translateY(-48px)}
.motion-uv span{border:2px solid currentColor;border-radius:7px;animation:uvPack 3.2s cubic-bezier(.4,0,.2,1) infinite}.motion-uv span:nth-child(1){left:19%;top:18px;width:40px;height:30px;--ux:-16px;--uy:14px}.motion-uv span:nth-child(2){left:54%;top:17px;width:52px;height:24px;--ux:18px;--uy:-12px}.motion-uv span:nth-child(3){left:25%;top:61px;width:30px;height:29px;--ux:-20px;--uy:10px}.motion-uv span:nth-child(4){left:47%;top:51px;width:34px;height:41px;--ux:12px;--uy:18px}.motion-uv span:nth-child(5){left:68%;top:52px;width:23px;height:25px;--ux:18px;--uy:-8px}
.motion-fx span{left:50%;top:50%;width:9px;height:9px;margin:-4px;border-radius:50%;background:currentColor;box-shadow:0 0 13px currentColor;animation:fxOrbit 3.2s linear infinite}.motion-fx span:nth-child(1){--radius:18px;animation-duration:1.8s}.motion-fx span:nth-child(2){--radius:31px;animation-duration:2.3s;animation-delay:-.5s}.motion-fx span:nth-child(3){--radius:43px;animation-duration:2.8s;animation-delay:-1s}.motion-fx span:nth-child(4){--radius:53px;animation-duration:3.4s;animation-delay:-1.5s}.motion-fx span:nth-child(5){--radius:64px;animation-duration:4s;animation-delay:-2s}
@keyframes motionScan{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}@keyframes quadDiagonal{0%,20%{opacity:1;transform:rotate(45deg) scaleX(1)}55%,85%{opacity:.08;transform:rotate(45deg) scaleX(.15)}100%{opacity:1;transform:rotate(45deg) scaleX(1)}}@keyframes hairSway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}@keyframes pianoKey{0%,100%{transform:scaleY(.45);opacity:.45}50%{transform:scaleY(1);opacity:1}}@keyframes voiceWave{0%,100%{transform:scaleY(.25);opacity:.45}50%{transform:scaleY(1);opacity:1}}@keyframes convertWave{0%,100%{transform:scaleY(.45);opacity:.45}50%{transform:scaleY(1);opacity:1}}@keyframes convertArrow{0%,100%{transform:translate(-58%,-52%);opacity:.5}50%{transform:translate(-40%,-52%);opacity:1}}@keyframes retopoMesh{0%,100%{opacity:.35;transform:translate(-50%,-50%) rotate(38deg) scale(.86)}50%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1.05)}}@keyframes lightCore{0%,100%{transform:translate(-50%,-50%) scale(.75);opacity:.65}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}@keyframes uvPack{0%,18%,100%{transform:translate(var(--ux),var(--uy)) rotate(7deg);opacity:.35}48%,78%{transform:translate(0,0) rotate(0);opacity:1}}@keyframes fxOrbit{to{transform:rotate(360deg) translateX(var(--radius)) rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.tool-motion:after,.tool-motion span,.motion-convert:before{animation-play-state:paused!important}}