@layer components{.rl-needle{transform-box:view-box;transform-origin:24px 26px}.motion[data-anim]:not([data-anim=reset]) .rl-needle{animation:rl-needle 1.4s var(--motion-ease) calc(var(--motion-delay) + .15s) both}.rl-ping{opacity:0}.motion[data-anim]:not([data-anim=reset]) .rl-status{animation:rl-rise .5s var(--motion-ease) calc(var(--motion-delay) + .15s) both}.motion[data-anim]:not([data-anim=reset]) .rl-ping{animation:motion-ping 1.2s ease-out calc(var(--motion-delay) + .55s) 3 both}.rl-arrow,.rl-dot{transform-box:fill-box;transform-origin:50%}.motion[data-anim]:not([data-anim=reset]) .rl-arrow{animation:rl-turn .8s var(--motion-ease) calc(var(--motion-delay) + .15s) both}.motion[data-anim]:not([data-anim=reset]) .rl-dot{animation:motion-pop-in .45s var(--motion-ease) both}.motion[data-anim]:not([data-anim=reset]) .rl-dot-1{animation-delay:calc(var(--motion-delay) + .95s)}.motion[data-anim]:not([data-anim=reset]) .rl-dot-2{animation-delay:calc(var(--motion-delay) + 1.35s)}.motion[data-anim]:not([data-anim=reset]) .rl-dot-3{animation-delay:calc(var(--motion-delay) + 2.15s)}.motion.rl-caption[data-anim]:not([data-anim=reset]){animation:rl-rise .8s var(--motion-ease) var(--motion-delay) both}.motion.rl-caption[data-anim=idle]{animation-play-state:paused!important}}@keyframes rl-needle{0%{transform:rotate(-80deg)}55%{transform:rotate(16deg)}75%{transform:rotate(-7deg)}90%{transform:rotate(2deg)}to{transform:rotate(0)}}@keyframes rl-turn{0%{transform:rotate(-360deg)}}@keyframes rl-rise{0%{opacity:0;transform:translateY(12px)}}