.w-motion{width:100%;max-width:340px;margin:auto;color:#304d70;text-align:center;--w-motion-size:240px}
.w-motion-stage{position:relative;width:100%;height:270px;isolation:isolate;overflow:hidden}
.w-motion-travel{position:absolute;width:var(--w-motion-size);height:var(--w-motion-size);left:calc(50% - var(--w-motion-size)/2);top:6px;will-change:transform}
.w-motion-body{display:block;width:100%;height:100%;transform-origin:50% 85%;animation:w-breathe 4.8s ease-in-out infinite}
.w-motion img{display:block;width:100%;height:100%;object-fit:contain}
.w-motion .w-blink-rig{display:block;position:relative;width:100%;height:100%;line-height:0}
.w-motion .w-blink-eyes{position:absolute;inset:0;pointer-events:none;background:center/100% 100% no-repeat;opacity:0;transition:opacity 45ms;mask-image:radial-gradient(ellipse 5.6% 6% at 38.2% 34%,#000 82%,transparent 100%),radial-gradient(ellipse 5.6% 6% at 58.6% 34.5%,#000 82%,transparent 100%)}
.w-motion .is-blinking>.w-blink-eyes{opacity:1}
.w-motion-halo{position:absolute;width:200px;height:200px;left:calc(50% - 100px);top:30px;border-radius:50%;background:radial-gradient(circle,#e5f3ff 0,#f4f9ff 50%,transparent 72%);z-index:-1}
.w-motion-shadow{position:absolute;bottom:18px;left:35%;width:30%;height:11px;border-radius:50%;background:#36639712;filter:blur(5px)}
.w-motion-prop{position:absolute;right:12%;top:19%;display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:white;box-shadow:0 4px 18px #2962a21a;font:600 23px/1 Arial;color:#327ed0;animation:w-prop 4s ease-in-out infinite}
.w-motion-dots{display:none;position:absolute;left:calc(50% - 22px);top:7px;gap:5px}.w-motion-dots i{width:8px;height:8px;background:#6aabe8;border-radius:50%;animation:w-dot 1.8s ease-in-out infinite}.w-motion-dots i:nth-child(2){animation-delay:.2s}.w-motion-dots i:nth-child(3){animation-delay:.4s}
.w-motion-label{margin:2px 0 0;font-size:14px;line-height:1.5;min-height:21px;letter-spacing:.01em}
.w-motion[data-motion=pace] .w-motion-travel{animation:w-pace 9s ease-in-out infinite}.w-motion[data-motion=pace] .w-motion-body{animation:w-step .65s ease-in-out infinite}.w-motion[data-motion=pace] .w-motion-dots{display:flex}.w-motion[data-motion=pace] .w-motion-prop{display:none}
.w-motion[data-motion=read] .w-motion-body{animation:w-read 6s ease-in-out infinite}.w-motion[data-motion=read] .w-motion-prop{right:19%;top:48%;font-size:19px;animation:w-page 4s ease-in-out infinite}
.w-motion[data-motion=phone] .w-motion-body{animation:w-phone 5.5s ease-in-out infinite}.w-motion[data-motion=phone] .w-motion-prop{top:35%;right:7%;animation:w-notice 4s ease-in-out infinite}
.w-motion[data-motion=play] .w-motion-body{animation:w-play 4.2s ease-in-out infinite}.w-motion[data-motion=play] .w-motion-prop{border-radius:50%;background:#dff2e9;color:#218364;animation:w-ball 4.2s ease-in-out infinite}
.w-motion[data-motion=scan] .w-motion-body{animation:w-read 7s ease-in-out infinite}.w-motion[data-motion=scan] .w-motion-prop{width:40px;height:40px;border-radius:50%;font-size:32px;animation:w-scan 5s ease-in-out infinite}
.w-motion[data-motion=cook] .w-motion-prop{color:#b46e35;background:#fff3df;top:46%;animation:w-stir 4s ease-in-out infinite}.w-motion[data-motion=cook] .w-motion-body{animation:w-phone 6s ease-in-out infinite}
.w-motion[data-motion=ready] .w-motion-body{animation:w-ready 4.5s ease-in-out infinite}.w-motion[data-motion=rest] .w-motion-prop{display:none}
.w-motion-compact{max-width:220px;--w-motion-size:142px}.w-motion-compact .w-motion-stage{height:164px}.w-motion-compact .w-motion-halo{width:140px;height:140px;left:calc(50% - 70px);top:10px}.w-motion-compact .w-motion-prop{width:24px;height:24px;font-size:17px;border-radius:8px}.w-motion-compact .w-motion-label{font-size:13px}
@keyframes w-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes w-pace{0%,100%{transform:translateX(-29px) rotate(-2deg)}38%,50%{transform:translateX(29px) rotate(2deg)}88%{transform:translateX(-29px) rotate(-2deg)}}
@keyframes w-step{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes w-read{0%,100%{transform:rotate(0) translateY(0)}30%,50%{transform:rotate(-2deg) translateY(2px)}75%{transform:rotate(1deg) translateY(-2px)}}
@keyframes w-phone{0%,100%{transform:rotate(0)}40%{transform:rotate(-2.5deg) translateY(-3px)}75%{transform:rotate(1.5deg)}}
@keyframes w-play{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-9px) rotate(-3deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-5px) rotate(3deg)}}
@keyframes w-ready{0%,100%{transform:rotate(0)}40%{transform:translateY(-4px) rotate(-2deg)}65%{transform:rotate(2deg)}}
@keyframes w-dot{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-4px);opacity:1}}
@keyframes w-prop{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes w-page{0%,100%{transform:rotate(0);opacity:.65}50%{transform:rotate(-9deg);opacity:1}}
@keyframes w-notice{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(5deg)}}
@keyframes w-ball{0%,100%{transform:translateY(30px) rotate(0)}50%{transform:translateY(-12px) rotate(100deg)}}
@keyframes w-scan{0%,100%{transform:translate(-12px,12px)}50%{transform:translate(4px,32px)}}
@keyframes w-stir{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(-7px,-4px) rotate(10deg)}}
.w-motion-paused *,.w-motion-user-paused *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.w-motion *{animation:none!important;transition:none!important}.w-motion .w-blink-eyes{display:none}}