/* Animate meaningful parts; the icon frame stays still. */
.business-card > .service-motion-icon { width:30px; height:30px; margin-bottom:2rem; }
.icon-in-motion .ink-draw { stroke-dasharray:1; animation:service-draw 3.2s ease both; }
.icon-in-motion .ink-draw:nth-child(3) { animation-delay:.12s; }
.icon-in-motion .ink-draw:nth-child(4) { animation-delay:.24s; }
.icon-in-motion .ink-draw:nth-child(5) { animation-delay:.36s; }
.icon-in-motion .writing-pen { animation:service-write 3.2s ease-in-out both; }
.icon-in-motion .upload-arrow { animation:service-upload 3.2s ease-in-out both; }
.icon-in-motion .bell-clapper { transform-origin:12px 19px; animation:service-ring 3.2s ease-in-out both; }
.sound-waves { opacity:0; }
.icon-in-motion .sound-waves { animation:service-sound 3.2s ease both; }
.icon-in-motion .leaf-grow { transform-origin:12px 15px; animation:service-grow 3.2s ease both; }
.icon-in-motion .envelope-flap { transform-origin:12px 6px; animation:service-open 3.2s ease both; }
@keyframes service-draw { 0%,12% { stroke-dashoffset:1; } 65%,100% { stroke-dashoffset:0; } }
@keyframes service-write { 0%,100% { transform:translate(0,0); } 15% { transform:translate(-4px,0); } 28% { transform:translate(-3px,-1px); } 42% { transform:translate(-2px,0); } 56% { transform:translate(-1px,-1px); } 70% { transform:translate(0,0); } }
@keyframes service-upload { 0%,100% { transform:translateY(0); opacity:1; } 45% { transform:translateY(-3px); opacity:0; } 46% { transform:translateY(2px); opacity:0; } 75% { transform:translateY(0); opacity:1; } }
@keyframes service-ring { 0%,65%,100% { transform:rotate(0); } 15%,35%,55% { transform:rotate(18deg); } 25%,45% { transform:rotate(-18deg); } }
@keyframes service-sound { 0%,65%,100% { opacity:0; } 20%,45% { opacity:1; } }
@keyframes service-grow { 0% { transform:scale(.25); opacity:.2; } 70%,100% { transform:scale(1); opacity:1; } }
@keyframes service-open { 0%,100% { transform:scaleY(1); } 35%,60% { transform:scaleY(-.65); } }
@media (prefers-reduced-motion:reduce) {
 .icon-in-motion .service-motion-icon * { animation:none !important; transform:none; }
}
