/* A vector motion study built from the Smartinc Design monogram. */
.logo-motion{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8px 0;--motion-duration:8.4s}
.motion-heading,.motion-footer{display:flex;align-items:center;width:100%;font-size:7px;letter-spacing:1.5px;color:#9da194;line-height:1.5}
.motion-heading{gap:9px;justify-content:center;margin-top:8px}.motion-indicator{width:5px;height:5px;background:var(--orange);border-radius:50%;flex-shrink:0}
.logo-motion-graphic{width:100%;height:auto;overflow:visible;display:block;max-width:590px}.motion-guides{color:#c1c6b7;opacity:.12}.motion-footer{justify-content:space-between;border-top:1px solid #ffffff1c;padding-top:15px;margin-top:0;font-size:7px;gap:15px}

.motion-field,.motion-left,.motion-letter,.motion-right,.motion-dot,.motion-pencil,.motion-outline,.motion-drawn-line,.motion-nodes{animation-duration:var(--motion-duration);animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.3,0,.2,1);transform-box:fill-box;transform-origin:center}
.motion-field{animation-name:motion-field}.motion-left{animation-name:motion-left}.motion-right{animation-name:motion-right}.motion-letter{animation-name:motion-letter}.motion-dot{animation-name:motion-dot}.motion-pencil{animation-name:motion-pencil}.motion-outline{animation-name:motion-outline;stroke-dasharray:1;stroke-dashoffset:0}.motion-drawn-line{animation-name:motion-ink;stroke-dasharray:1;stroke-dashoffset:0}.motion-nodes{animation-name:motion-nodes}

@keyframes motion-field{0%,4%{opacity:0;transform:scale(.82) rotate(-6deg)}14%,90%{opacity:1;transform:scale(1) rotate(0)}96%,100%{opacity:0;transform:scale(1.04)}}
@keyframes motion-left{0%,9%{opacity:0;transform:translate(-55px,25px) rotate(-12deg)}23%,90%{opacity:1;transform:translate(0,0) rotate(0)}96%,100%{opacity:0;transform:translate(-25px,-12px) rotate(-4deg)}}
@keyframes motion-right{0%,16%{opacity:0;transform:translate(55px,-35px) rotate(13deg)}29%,90%{opacity:1;transform:translate(0,0) rotate(0)}96%,100%{opacity:0;transform:translate(25px,12px) rotate(4deg)}}
@keyframes motion-letter{0%,23%{opacity:0;transform:translateY(12px)}32%,100%{opacity:1;transform:translateY(0)}}
@keyframes motion-dot{0%,28%{opacity:0;transform:translate(70px,-75px) scale(.35)}32%{opacity:1;transform:translate(0,0) scale(1.15)}38%,90%{opacity:1;transform:translate(0,0) scale(1)}96%,100%{opacity:0;transform:translate(15px,-25px) scale(.4)}}
@keyframes motion-outline{0%{opacity:.9;stroke-dashoffset:1}27%{opacity:.65;stroke-dashoffset:0}45%,78%{opacity:0;stroke-dashoffset:0}89%{opacity:.6;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:-1}}
@keyframes motion-pencil{0%,28%{opacity:0;transform:translate(18px,-18px)}35%{opacity:1;transform:translate(-8px,7px) rotate(-7deg)}42%{opacity:1;transform:translate(14px,8px) rotate(7deg)}49%,90%{opacity:1;transform:translate(0,0) rotate(0)}96%,100%{opacity:0;transform:translate(18px,-18px)}}
@keyframes motion-ink{0%,33%{opacity:0;stroke-dashoffset:1}37%{opacity:1;stroke-dashoffset:.8}45%{opacity:.8;stroke-dashoffset:0}55%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes motion-nodes{0%,12%{opacity:.6}25%,75%{opacity:0}88%{opacity:.6}100%{opacity:0}}
@media(max-width:760px){.logo-motion{min-height:365px;padding-top:14px;margin-top:26px}.motion-heading{font-size:6px;letter-spacing:1.2px}.motion-footer{font-size:6px;letter-spacing:1px}.logo-motion-graphic{max-width:450px}}
@media(max-width:380px){.logo-motion{min-height:320px}.motion-heading{font-size:5px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.logo-motion *{animation:none!important;transform:none!important}.motion-outline,.motion-nodes,.motion-drawn-line{display:none}}