/* Base for animated elements */
.animated-element{opacity:0;transform:translateY(24px);transition:all 600ms cubic-bezier(.22,.9,.3,1)}
.section.animate .animated-element{opacity:1;transform:none}

/* specific micro-animations via utility classes */
.slide-in-right{transform:translateX(30px);transition:all 700ms cubic-bezier(.22,.9,.3,1)}
.section.animate .slide-in-right{transform:none}
.slide-in-left{transform:translateX(-30px)}
.pop{transform:scale(.92);transition:transform 500ms}
.section.animate .pop{transform:none}

/* small repeated motions */
.bob{animation: bob 3s ease-in-out infinite}
@keyframes bob{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}
.spin{display:inline-block;animation: spin 6s linear infinite}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* floating (SVG) subtle motion */
.floating{animation: floaty 6s ease-in-out infinite}
@keyframes floaty{
  0%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-10px) rotate(2deg)}
  100%{transform:translateY(0) rotate(-2deg)}
}