/*! =========================================================
 *  Animotion — CSS3 Animation Library
 *  @keyframes definitions (500 animations)
 *
 *  Categories:
 *    1. Entrance Animations (65)
 *    2. Exit Animations (50)
 *    3. Attention Seekers (40)
 *    4. Text Effects (50)
 *    5. Background Animations (40)
 *    6. Button Animations (40)
 *    7. Card Animations (35)
 *    8. Loaders & Spinners (60)
 *    9. Navigation (25)
 *
 *  GPU-optimized: prefers transform & opacity
 *  ========================================================= */

/* ==========================================================================
   1. ENTRANCE ANIMATIONS (65)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1.1 Fade In variants (13)
   --------------------------------------------------------------------------- */

@keyframes animotion-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes animotion-fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-fade-in-down {
  from {
    opacity: 0;
    transform: translate3d(0, -40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-fade-in-left {
  from {
    opacity: 0;
    transform: translate3d(-40px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-fade-in-right {
  from {
    opacity: 0;
    transform: translate3d(40px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-fade-in-up-big {
  from {
    opacity: 0;
    transform: translate3d(0, 200px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-fade-in-down-big {
  from {
    opacity: 0;
    transform: translate3d(0, -200px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-fade-in-left-big {
  from {
    opacity: 0;
    transform: translate3d(-200px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-fade-in-right-big {
  from {
    opacity: 0;
    transform: translate3d(200px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-fade-in-top-left {
  from {
    opacity: 0;
    transform: translate3d(-40px, -40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-fade-in-top-right {
  from {
    opacity: 0;
    transform: translate3d(40px, -40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-fade-in-bottom-left {
  from {
    opacity: 0;
    transform: translate3d(-40px, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-fade-in-bottom-right {
  from {
    opacity: 0;
    transform: translate3d(40px, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ---------------------------------------------------------------------------
   1.2 Slide In variants (4)
   --------------------------------------------------------------------------- */

@keyframes animotion-slide-in-up {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-slide-in-down {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-slide-in-left {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-slide-in-right {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* ---------------------------------------------------------------------------
   1.3 Zoom In variants (5)
   --------------------------------------------------------------------------- */

@keyframes animotion-zoom-in {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-zoom-in-up {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

@keyframes animotion-zoom-in-down {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

@keyframes animotion-zoom-in-left {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

@keyframes animotion-zoom-in-right {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

/* ---------------------------------------------------------------------------
   1.4 Flip In (2)
   --------------------------------------------------------------------------- */

@keyframes animotion-flip-in-x {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  40% {
    transform: perspective(400px) rotateX(-20deg);
  }
  60% {
    opacity: 1;
    transform: perspective(400px) rotateX(10deg);
  }
  80% {
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
  }
}

@keyframes animotion-flip-in-y {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  40% {
    transform: perspective(400px) rotateY(-20deg);
  }
  60% {
    opacity: 1;
    transform: perspective(400px) rotateY(10deg);
  }
  80% {
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
  }
}

/* ---------------------------------------------------------------------------
   1.5 Rotate In (5)
   --------------------------------------------------------------------------- */

@keyframes animotion-rotate-in {
  from {
    opacity: 0;
    transform: rotate3d(0, 0, 1, -200deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-rotate-in-down-left {
  from {
    opacity: 0;
    transform: rotate3d(0, 0, 1, -45deg);
    transform-origin: left bottom;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transform-origin: left bottom;
  }
}

@keyframes animotion-rotate-in-down-right {
  from {
    opacity: 0;
    transform: rotate3d(0, 0, 1, 45deg);
    transform-origin: right bottom;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transform-origin: right bottom;
  }
}

@keyframes animotion-rotate-in-up-left {
  from {
    opacity: 0;
    transform: rotate3d(0, 0, 1, 45deg);
    transform-origin: left bottom;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transform-origin: left bottom;
  }
}

@keyframes animotion-rotate-in-up-right {
  from {
    opacity: 0;
    transform: rotate3d(0, 0, 1, -90deg);
    transform-origin: right bottom;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transform-origin: right bottom;
  }
}

/* ---------------------------------------------------------------------------
   1.6 Bounce In (5)
   --------------------------------------------------------------------------- */

@keyframes animotion-bounce-in {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-bounce-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-bounce-in-down {
  from {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-bounce-in-left {
  from {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-bounce-in-right {
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* ---------------------------------------------------------------------------
   1.7 Light Speed In (2)
   --------------------------------------------------------------------------- */

@keyframes animotion-light-speed-in-left {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) skewX(30deg);
  }
  60% {
    opacity: 1;
    transform: skewX(-20deg);
  }
  80% {
    transform: skewX(5deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-light-speed-in-right {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0) skewX(-30deg);
  }
  60% {
    opacity: 1;
    transform: skewX(20deg);
  }
  80% {
    transform: skewX(-5deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ---------------------------------------------------------------------------
   1.8 Special Entrance (30)
   --------------------------------------------------------------------------- */

@keyframes animotion-roll-in {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes animotion-jack-in-the-box {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }
  50% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes animotion-hinge {
  0% {
    opacity: 1;
    transform-origin: top left;
  }
  20%, 60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
  }
  40%, 80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    opacity: 1;
  }
  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes animotion-blur-reveal {
  from {
    opacity: 0;
    filter: blur(20px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes animotion-clip-wipe-left {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes animotion-clip-wipe-top {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes animotion-clip-wipe-right {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes animotion-clip-wipe-bottom {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes animotion-circle-reveal {
  from {
    clip-path: circle(0% at 50% 50%);
  }
  to {
    clip-path: circle(75% at 50% 50%);
  }
}

@keyframes animotion-iris-wipe {
  from {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  to {
    clip-path: circle(100% at 50% 50%);
    opacity: 1;
  }
}

@keyframes animotion-text-wipe {
  from {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes animotion-drop-in {
  from {
    opacity: 0;
    transform: translate3d(0, -500px, 0);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  80% {
    transform: translate3d(0, -8px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-swing-in {
  from {
    opacity: 0;
    transform: perspective(500px) rotateX(-90deg);
    transform-origin: top center;
  }
  40% {
    transform: perspective(500px) rotateX(20deg);
  }
  60% {
    transform: perspective(500px) rotateX(-10deg);
  }
  80% {
    opacity: 1;
    transform: perspective(500px) rotateX(5deg);
  }
  to {
    opacity: 1;
    transform: perspective(500px) rotateX(0deg);
  }
}

@keyframes animotion-expand-in {
  from {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-unfold-in {
  0% {
    opacity: 0;
    transform: scaleY(0.01) scaleX(0);
  }
  50% {
    transform: scaleY(0.01) scaleX(1);
  }
  100% {
    opacity: 1;
    transform: scaleY(1) scaleX(1);
  }
}

@keyframes animotion-pop-in {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
  }
  50% {
    transform: scale3d(1.15, 1.15, 1.15);
  }
  75% {
    transform: scale3d(0.95, 0.95, 0.95);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-scale-reveal {
  from {
    opacity: 0;
    transform: scale3d(1.5, 1.5, 1);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    filter: blur(0);
  }
}

@keyframes animotion-morph-in {
  0% {
    opacity: 0;
    border-radius: 50%;
    transform: scale3d(0.3, 0.3, 1);
  }
  50% {
    border-radius: 25%;
    transform: scale3d(1.05, 1.05, 1);
  }
  100% {
    opacity: 1;
    border-radius: 0%;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-spiral-in {
  from {
    opacity: 0;
    transform: rotate(720deg) scale3d(0, 0, 1);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale3d(1, 1, 1);
  }
}

@keyframes animotion-swoop-in {
  from {
    opacity: 0;
    transform: translate3d(-150px, -100px, 0) rotate(-30deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes animotion-curtain-up {
  from {
    transform: scaleY(0);
    transform-origin: bottom center;
  }
  to {
    transform: scaleY(1);
    transform-origin: bottom center;
  }
}

@keyframes animotion-curtain-down {
  from {
    transform: scaleY(0);
    transform-origin: top center;
  }
  to {
    transform: scaleY(1);
    transform-origin: top center;
  }
}

@keyframes animotion-door-open {
  from {
    opacity: 0;
    transform: perspective(800px) rotateY(-90deg);
    transform-origin: left center;
  }
  to {
    opacity: 1;
    transform: perspective(800px) rotateY(0deg);
    transform-origin: left center;
  }
}

@keyframes animotion-peel-in {
  0% {
    opacity: 0;
    transform: perspective(600px) rotateY(90deg) rotateX(20deg) scale(0.8);
    transform-origin: right center;
  }
  60% {
    transform: perspective(600px) rotateY(-10deg) rotateX(0deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: perspective(600px) rotateY(0deg) rotateX(0deg) scale(1);
  }
}

@keyframes animotion-type-reveal-in {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes animotion-elastic-in {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-spring-in {
  0% {
    opacity: 0;
    transform: translate3d(0, -200px, 0) scale(0.8);
  }
  40% {
    transform: translate3d(0, 30px, 0) scale(1.05);
  }
  55% {
    transform: translate3d(0, -15px, 0) scale(0.98);
  }
  70% {
    opacity: 1;
    transform: translate3d(0, 8px, 0) scale(1.02);
  }
  85% {
    transform: translate3d(0, -4px, 0) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes animotion-telegraph-in {
  0% {
    opacity: 0;
    transform: scale3d(5, 5, 1);
    filter: blur(12px);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.9, 0.9, 1);
    filter: blur(2px);
  }
  80% {
    transform: scale3d(1.05, 1.05, 1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    filter: blur(0);
  }
}

@keyframes animotion-dimension-in {
  from {
    opacity: 0;
    transform: perspective(1000px) translate3d(0, 0, -500px) rotateY(30deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) translate3d(0, 0, 0) rotateY(0deg);
  }
}

@keyframes animotion-vortex-in {
  from {
    opacity: 0;
    transform: rotate3d(0, 0, 1, 360deg) scale3d(0, 0, 1) translate3d(0, -200px, 0);
  }
  to {
    opacity: 1;
    transform: rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}


/* ==========================================================================
   2. EXIT ANIMATIONS (50)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   2.1 Fade Out variants (13)
   --------------------------------------------------------------------------- */

@keyframes animotion-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes animotion-fade-out-up {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -40px, 0);
  }
}

@keyframes animotion-fade-out-down {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
}

@keyframes animotion-fade-out-left {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-40px, 0, 0);
  }
}

@keyframes animotion-fade-out-right {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(40px, 0, 0);
  }
}

@keyframes animotion-fade-out-up-big {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -200px, 0);
  }
}

@keyframes animotion-fade-out-down-big {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 200px, 0);
  }
}

@keyframes animotion-fade-out-left-big {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-200px, 0, 0);
  }
}

@keyframes animotion-fade-out-right-big {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(200px, 0, 0);
  }
}

@keyframes animotion-fade-out-top-left {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-40px, -40px, 0);
  }
}

@keyframes animotion-fade-out-top-right {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(40px, -40px, 0);
  }
}

@keyframes animotion-fade-out-bottom-left {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-40px, 40px, 0);
  }
}

@keyframes animotion-fade-out-bottom-right {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(40px, 40px, 0);
  }
}

/* ---------------------------------------------------------------------------
   2.2 Slide Out (4)
   --------------------------------------------------------------------------- */

@keyframes animotion-slide-out-up {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes animotion-slide-out-down {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes animotion-slide-out-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes animotion-slide-out-right {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}

/* ---------------------------------------------------------------------------
   2.3 Zoom Out (5)
   --------------------------------------------------------------------------- */

@keyframes animotion-zoom-out {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

@keyframes animotion-zoom-out-up {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
  }
}

@keyframes animotion-zoom-out-down {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
  }
}

@keyframes animotion-zoom-out-left {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}

@keyframes animotion-zoom-out-right {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}

/* ---------------------------------------------------------------------------
   2.4 Flip Out (2)
   --------------------------------------------------------------------------- */

@keyframes animotion-flip-out-x {
  from {
    opacity: 1;
    transform: perspective(400px);
  }
  30% {
    opacity: 1;
    transform: perspective(400px) rotateX(-20deg);
  }
  to {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
}

@keyframes animotion-flip-out-y {
  from {
    opacity: 1;
    transform: perspective(400px);
  }
  30% {
    opacity: 1;
    transform: perspective(400px) rotateY(-15deg);
  }
  to {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
}

/* ---------------------------------------------------------------------------
   2.5 Rotate Out (5)
   --------------------------------------------------------------------------- */

@keyframes animotion-rotate-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: rotate3d(0, 0, 1, 200deg);
  }
}

@keyframes animotion-rotate-out-down-left {
  from {
    opacity: 1;
    transform-origin: left bottom;
  }
  to {
    opacity: 0;
    transform: rotate3d(0, 0, 1, 45deg);
    transform-origin: left bottom;
  }
}

@keyframes animotion-rotate-out-down-right {
  from {
    opacity: 1;
    transform-origin: right bottom;
  }
  to {
    opacity: 0;
    transform: rotate3d(0, 0, 1, -45deg);
    transform-origin: right bottom;
  }
}

@keyframes animotion-rotate-out-up-left {
  from {
    opacity: 1;
    transform-origin: left bottom;
  }
  to {
    opacity: 0;
    transform: rotate3d(0, 0, 1, -45deg);
    transform-origin: left bottom;
  }
}

@keyframes animotion-rotate-out-up-right {
  from {
    opacity: 1;
    transform-origin: right bottom;
  }
  to {
    opacity: 0;
    transform: rotate3d(0, 0, 1, 90deg);
    transform-origin: right bottom;
  }
}

/* ---------------------------------------------------------------------------
   2.6 Bounce Out (5)
   --------------------------------------------------------------------------- */

@keyframes animotion-bounce-out {
  20% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes animotion-bounce-out-up {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes animotion-bounce-out-down {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes animotion-bounce-out-left {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes animotion-bounce-out-right {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

/* ---------------------------------------------------------------------------
   2.7 Light Speed Out (2)
   --------------------------------------------------------------------------- */

@keyframes animotion-light-speed-out-left {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
  }
}

@keyframes animotion-light-speed-out-right {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) skewX(30deg);
  }
}

/* ---------------------------------------------------------------------------
   2.8 Special Exit (14)
   --------------------------------------------------------------------------- */

@keyframes animotion-roll-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes animotion-collapse-out {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1, 0.01, 1);
  }
  to {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }
}

@keyframes animotion-shrink-out {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }
}

@keyframes animotion-dissolve {
  0% {
    opacity: 1;
    filter: blur(0);
  }
  50% {
    opacity: 0.5;
    filter: blur(5px);
  }
  100% {
    opacity: 0;
    filter: blur(20px);
  }
}

@keyframes animotion-clip-wipe-out-left {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes animotion-clip-wipe-out-right {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes animotion-blur-out {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(20px);
  }
}

@keyframes animotion-spiral-out {
  from {
    opacity: 1;
    transform: rotate(0deg) scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    transform: rotate(720deg) scale3d(0, 0, 1);
  }
}

@keyframes animotion-swoop-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(150px, -100px, 0) rotate(30deg) scale(0.5);
  }
}

@keyframes animotion-vortex-out {
  from {
    opacity: 1;
    transform: rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    transform: rotate3d(0, 0, 1, 360deg) scale3d(0, 0, 1) translate3d(0, 200px, 0);
  }
}

@keyframes animotion-dimension-out {
  from {
    opacity: 1;
    transform: perspective(1000px) translate3d(0, 0, 0) rotateY(0deg);
  }
  to {
    opacity: 0;
    transform: perspective(1000px) translate3d(0, 0, -500px) rotateY(-30deg);
  }
}

@keyframes animotion-curtain-close {
  from {
    transform: scaleY(1);
    transform-origin: top center;
  }
  to {
    transform: scaleY(0);
    transform-origin: top center;
  }
}

@keyframes animotion-peel-out {
  from {
    opacity: 1;
    transform: perspective(600px) rotateY(0deg) scale(1);
    transform-origin: left center;
  }
  to {
    opacity: 0;
    transform: perspective(600px) rotateY(-90deg) scale(0.8);
    transform-origin: left center;
  }
}

@keyframes animotion-telegraph-out {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: scale3d(5, 5, 1);
    filter: blur(12px);
  }
}


/* ==========================================================================
   3. ATTENTION SEEKERS (40)
   ========================================================================== */

@keyframes animotion-bounce {
  0%, 20%, 53%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }
  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

@keyframes animotion-flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

@keyframes animotion-pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-rubber-band {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-shake-x {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes animotion-shake-y {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(0, 10px, 0);
  }
}

@keyframes animotion-head-shake {
  0% {
    transform: translateX(0);
  }
  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    transform: translateX(0);
  }
}

@keyframes animotion-swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes animotion-tada {
  0% {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-wobble {
  0% {
    transform: translate3d(0, 0, 0);
  }
  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-jello {
  0%, 11.1%, 100% {
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes animotion-heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}

@keyframes animotion-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(3deg);
  }
}

@keyframes animotion-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes animotion-breathe {
  0%, 100% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  50% {
    transform: scale3d(1.03, 1.03, 1);
    opacity: 0.85;
  }
}

@keyframes animotion-nod {
  0%, 100% {
    transform: rotateX(0deg);
  }
  25% {
    transform: rotateX(15deg);
  }
  75% {
    transform: rotateX(-5deg);
  }
}

@keyframes animotion-tilt {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}

@keyframes animotion-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes animotion-snap {
  0%, 100% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(0.95, 0.95, 1);
  }
  60% {
    transform: scale3d(1.08, 1.08, 1);
  }
}

@keyframes animotion-vibrate {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  10% {
    transform: translate3d(-2px, 0, 0);
  }
  20% {
    transform: translate3d(2px, 0, 0);
  }
  30% {
    transform: translate3d(-2px, 0, 0);
  }
  40% {
    transform: translate3d(2px, 0, 0);
  }
  50% {
    transform: translate3d(-1px, 0, 0);
  }
  60% {
    transform: translate3d(1px, 0, 0);
  }
  70% {
    transform: translate3d(-1px, 0, 0);
  }
  80% {
    transform: translate3d(1px, 0, 0);
  }
  90% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-twitch {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  20% {
    transform: translate3d(-3px, 2px, 0) rotate(-2deg);
  }
  40% {
    transform: translate3d(2px, -1px, 0) rotate(1deg);
  }
  60% {
    transform: translate3d(-1px, 1px, 0) rotate(-1deg);
  }
  80% {
    transform: translate3d(1px, -2px, 0) rotate(2deg);
  }
}

@keyframes animotion-sway {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(8px) rotate(2deg);
  }
  75% {
    transform: translateX(-8px) rotate(-2deg);
  }
}

@keyframes animotion-rock {
  0%, 100% {
    transform: rotate(0deg);
    transform-origin: 50% 100%;
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}

@keyframes animotion-pendulum {
  0%, 100% {
    transform: rotate(0deg);
    transform-origin: 50% 0%;
  }
  25% {
    transform: rotate(15deg);
  }
  75% {
    transform: rotate(-15deg);
  }
}

@keyframes animotion-tremble {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  12.5% {
    transform: translate3d(-1px, -1px, 0);
  }
  25% {
    transform: translate3d(1px, 0, 0);
  }
  37.5% {
    transform: translate3d(0, 1px, 0);
  }
  50% {
    transform: translate3d(-1px, 0, 0);
  }
  62.5% {
    transform: translate3d(1px, -1px, 0);
  }
  75% {
    transform: translate3d(-1px, 1px, 0);
  }
  87.5% {
    transform: translate3d(1px, 0, 0);
  }
}

@keyframes animotion-quiver {
  0%, 100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(1deg);
  }
  20% {
    transform: rotate(-2deg);
  }
  30% {
    transform: rotate(1.5deg);
  }
  40% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(0.5deg);
  }
  60% {
    transform: rotate(-0.5deg);
  }
  70% {
    transform: rotate(0.3deg);
  }
  80% {
    transform: rotate(-0.2deg);
  }
  90% {
    transform: rotate(0.1deg);
  }
}

@keyframes animotion-pulsate-ring {
  0% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
    box-shadow: 0 0 0 0 currentColor;
  }
  100% {
    transform: scale3d(1, 1, 1);
    opacity: 0;
    box-shadow: 0 0 0 20px transparent;
  }
}

@keyframes animotion-ripple-attention {
  0% {
    box-shadow: 0 0 0 0 rgba(128, 128, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(128, 128, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(128, 128, 255, 0);
  }
}

@keyframes animotion-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(255, 255, 255, 0.3);
  }
}

@keyframes animotion-border-pulse {
  0%, 100% {
    border-color: transparent;
  }
  50% {
    border-color: currentColor;
  }
}

@keyframes animotion-shadow-pulse {
  0%, 100% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}

@keyframes animotion-color-shift {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes animotion-skew-bounce {
  0%, 100% {
    transform: skew(0deg, 0deg);
  }
  25% {
    transform: skew(5deg, 2deg);
  }
  50% {
    transform: skew(0deg, 0deg);
  }
  75% {
    transform: skew(-5deg, -2deg);
  }
}

@keyframes animotion-stretch-x {
  0%, 100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.3);
  }
}

@keyframes animotion-stretch-y {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.3);
  }
}

@keyframes animotion-squish {
  0%, 100% {
    transform: scale3d(1, 1, 1);
  }
  25% {
    transform: scale3d(1.2, 0.8, 1);
  }
  50% {
    transform: scale3d(0.85, 1.15, 1);
  }
  75% {
    transform: scale3d(1.1, 0.9, 1);
  }
}

@keyframes animotion-pop-attention {
  0%, 100% {
    transform: scale3d(1, 1, 1);
  }
  40% {
    transform: scale3d(1.2, 1.2, 1);
  }
  60% {
    transform: scale3d(0.9, 0.9, 1);
  }
  80% {
    transform: scale3d(1.05, 1.05, 1);
  }
}

@keyframes animotion-flicker-attention {
  0%, 100% {
    opacity: 1;
  }
  10% {
    opacity: 0.6;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 0.4;
  }
  40% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.3;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.5;
  }
}

@keyframes animotion-buzz-attention {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  10% {
    transform: translate3d(-1px, 0, 0) rotate(-1deg);
  }
  20% {
    transform: translate3d(1px, 0, 0) rotate(1deg);
  }
  30% {
    transform: translate3d(-1px, 0, 0) rotate(0deg);
  }
  40% {
    transform: translate3d(1px, 0, 0) rotate(-1deg);
  }
  50% {
    transform: translate3d(-1px, 0, 0) rotate(1deg);
  }
  60% {
    transform: translate3d(1px, 0, 0) rotate(0deg);
  }
  70% {
    transform: translate3d(-1px, 0, 0) rotate(-1deg);
  }
  80% {
    transform: translate3d(0, 0, 0) rotate(1deg);
  }
  90% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
}


/* ==========================================================================
   4. TEXT EFFECTS (50)
   ========================================================================== */

@keyframes animotion-typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes animotion-typewriter-delete {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

@keyframes animotion-shimmer-text {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes animotion-gradient-text {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes animotion-glitch-text {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
  10% {
    transform: translate3d(-2px, 1px, 0);
    clip-path: inset(20% 0 60% 0);
  }
  20% {
    transform: translate3d(2px, -1px, 0);
    clip-path: inset(50% 0 10% 0);
  }
  30% {
    transform: translate3d(-1px, 2px, 0);
    clip-path: inset(10% 0 70% 0);
  }
  40% {
    transform: translate3d(1px, 0, 0);
    clip-path: inset(40% 0 30% 0);
  }
  50% {
    transform: translate3d(-2px, -1px, 0);
    clip-path: inset(60% 0 20% 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes animotion-rgb-split {
  0%, 100% {
    text-shadow: 0 0 0 transparent;
  }
  25% {
    text-shadow: -2px 0 0 rgba(255, 0, 0, 0.7), 2px 0 0 rgba(0, 255, 255, 0.7);
  }
  50% {
    text-shadow: 2px 0 0 rgba(255, 0, 0, 0.7), -2px 0 0 rgba(0, 255, 255, 0.7);
  }
  75% {
    text-shadow: -1px 1px 0 rgba(255, 0, 0, 0.7), 1px -1px 0 rgba(0, 255, 255, 0.7);
  }
}

@keyframes animotion-neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor;
    opacity: 1;
  }
  20%, 24%, 55% {
    text-shadow: none;
    opacity: 0.7;
  }
}

@keyframes animotion-text-wipe-reveal {
  from {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 1;
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}

@keyframes animotion-text-split {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
    filter: blur(10px);
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes animotion-letter-wave {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(0, -8px, 0);
  }
  50% {
    transform: translate3d(0, 0, 0);
  }
  75% {
    transform: translate3d(0, 4px, 0);
  }
}

@keyframes animotion-char-wave {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  30% {
    transform: translate3d(0, -12px, 0) rotate(-5deg);
  }
  60% {
    transform: translate3d(0, 4px, 0) rotate(2deg);
  }
}

@keyframes animotion-blur-reveal-text {
  from {
    opacity: 0;
    filter: blur(15px);
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes animotion-zoom-text {
  from {
    opacity: 0;
    transform: scale3d(0.5, 0.5, 1);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-flip-text-3d {
  from {
    opacity: 0;
    transform: perspective(600px) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(600px) rotateY(0deg);
  }
}

@keyframes animotion-outlined-pulsing {
  0%, 100% {
    -webkit-text-stroke: 1px currentColor;
    color: transparent;
  }
  50% {
    -webkit-text-stroke: 2px currentColor;
    color: currentColor;
  }
}

@keyframes animotion-rainbow-text {
  0% {
    color: #ff0000;
  }
  16.6% {
    color: #ff8800;
  }
  33.3% {
    color: #ffff00;
  }
  50% {
    color: #00ff00;
  }
  66.6% {
    color: #0088ff;
  }
  83.3% {
    color: #8800ff;
  }
  100% {
    color: #ff0000;
  }
}

@keyframes animotion-text-trail {
  0% {
    text-shadow: none;
    opacity: 0;
  }
  30% {
    text-shadow: 5px 5px 0 rgba(128, 128, 128, 0.3),
                 10px 10px 0 rgba(128, 128, 128, 0.15);
    opacity: 1;
  }
  100% {
    text-shadow: 0 0 0 transparent;
    opacity: 1;
  }
}

@keyframes animotion-text-pop {
  0% {
    transform: scale3d(1, 1, 1);
    text-shadow: 0 0 0 transparent;
  }
  50% {
    transform: scale3d(1.15, 1.15, 1);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  100% {
    transform: scale3d(1, 1, 1);
    text-shadow: 0 0 0 transparent;
  }
}

@keyframes animotion-marquee-scroll {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes animotion-text-cascade {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-text-scramble {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 0, 0);
  }
  30% {
    opacity: 0.7;
    filter: blur(4px);
    transform: translate3d(2px, -1px, 0);
  }
  60% {
    filter: blur(1px);
    transform: translate3d(-1px, 1px, 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-shadow-expand {
  0% {
    text-shadow: 0 0 0 transparent;
  }
  50% {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2),
                 2px 2px 0 rgba(0, 0, 0, 0.15),
                 3px 3px 0 rgba(0, 0, 0, 0.1),
                 4px 4px 0 rgba(0, 0, 0, 0.05);
  }
  100% {
    text-shadow: 0 0 0 transparent;
  }
}

@keyframes animotion-word-flip-carousel {
  0%, 16% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  20%, 36% {
    transform: translate3d(0, -100%, 0);
    opacity: 1;
  }
  40%, 56% {
    transform: translate3d(0, -200%, 0);
    opacity: 1;
  }
  60%, 76% {
    transform: translate3d(0, -300%, 0);
    opacity: 1;
  }
  80%, 96% {
    transform: translate3d(0, -400%, 0);
    opacity: 1;
  }
}

@keyframes animotion-typing-cursor {
  0%, 100% {
    border-right-color: currentColor;
  }
  50% {
    border-right-color: transparent;
  }
}

@keyframes animotion-gradient-border-text {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@keyframes animotion-stagger-cascade {
  0% {
    opacity: 0;
    transform: translate3d(0, -30px, 0) scale(0.9);
  }
  60% {
    transform: translate3d(0, 5px, 0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes animotion-text-slide-up-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    clip-path: inset(100% 0 0 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes animotion-ink-drop-text {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: scale(2);
  }
  40% {
    opacity: 0.7;
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes animotion-text-glitch-clone {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    text-shadow: none;
  }
  10% {
    text-shadow: -3px 0 rgba(255, 0, 0, 0.5), 3px 0 rgba(0, 255, 255, 0.5);
    transform: translate3d(-2px, 0, 0);
  }
  20% {
    text-shadow: 3px 0 rgba(255, 0, 0, 0.5), -3px 0 rgba(0, 255, 255, 0.5);
    transform: translate3d(2px, 0, 0);
  }
  30% {
    text-shadow: -2px 1px rgba(255, 0, 0, 0.5), 2px -1px rgba(0, 255, 255, 0.5);
    transform: translate3d(0, 1px, 0);
  }
  40% {
    text-shadow: none;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-counter-roll {
  from {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes animotion-text-breathe {
  0%, 100% {
    transform: scale3d(1, 1, 1);
    opacity: 0.9;
  }
  50% {
    transform: scale3d(1.02, 1.02, 1);
    opacity: 1;
  }
}

@keyframes animotion-text-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(0, -6px, 0);
  }
  75% {
    transform: translate3d(0, 3px, 0);
  }
}

@keyframes animotion-text-bounce {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97);
  }
  40% {
    transform: translate3d(0, -15px, 0);
  }
  60% {
    transform: translate3d(0, -7px, 0);
  }
}

@keyframes animotion-text-elastic {
  0% {
    transform: scaleX(0.5);
    opacity: 0;
  }
  40% {
    transform: scaleX(1.1);
  }
  60% {
    transform: scaleX(0.95);
  }
  80% {
    transform: scaleX(1.02);
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes animotion-text-spring {
  0% {
    transform: translate3d(0, 40px, 0);
    opacity: 0;
  }
  30% {
    transform: translate3d(0, -10px, 0);
    opacity: 1;
  }
  50% {
    transform: translate3d(0, 5px, 0);
  }
  70% {
    transform: translate3d(0, -3px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes animotion-text-morph {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: scale3d(0.8, 1.2, 1);
  }
  50% {
    filter: blur(3px);
    transform: scale3d(1.1, 0.9, 1);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-text-reveal-mask {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes animotion-text-fade-words {
  0%, 15% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  20%, 80% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  85%, 100% {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes animotion-text-highlight {
  from {
    background-size: 0% 100%;
  }
  to {
    background-size: 100% 100%;
  }
}

@keyframes animotion-text-stroke {
  0% {
    -webkit-text-stroke: 0px currentColor;
    color: currentColor;
  }
  50% {
    -webkit-text-stroke: 2px currentColor;
    color: transparent;
  }
  100% {
    -webkit-text-stroke: 0px currentColor;
    color: currentColor;
  }
}

@keyframes animotion-text-shadow-dance {
  0%, 100% {
    text-shadow: 0 0 0 transparent;
  }
  25% {
    text-shadow: -3px -3px 0 rgba(255, 0, 0, 0.3), 3px 3px 0 rgba(0, 0, 255, 0.3);
  }
  50% {
    text-shadow: 3px -3px 0 rgba(0, 255, 0, 0.3), -3px 3px 0 rgba(255, 0, 255, 0.3);
  }
  75% {
    text-shadow: 3px 3px 0 rgba(255, 255, 0, 0.3), -3px -3px 0 rgba(0, 255, 255, 0.3);
  }
}

@keyframes animotion-text-perspective {
  0% {
    transform: perspective(800px) rotateX(0deg);
  }
  25% {
    transform: perspective(800px) rotateX(5deg);
  }
  50% {
    transform: perspective(800px) rotateX(0deg);
  }
  75% {
    transform: perspective(800px) rotateX(-5deg);
  }
  100% {
    transform: perspective(800px) rotateX(0deg);
  }
}

@keyframes animotion-text-wobble {
  0%, 100% {
    transform: skewX(0deg);
  }
  20% {
    transform: skewX(-8deg);
  }
  40% {
    transform: skewX(6deg);
  }
  60% {
    transform: skewX(-4deg);
  }
  80% {
    transform: skewX(2deg);
  }
}

@keyframes animotion-text-zigzag {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  12.5% {
    transform: translate3d(4px, -4px, 0);
  }
  25% {
    transform: translate3d(0, 0, 0);
  }
  37.5% {
    transform: translate3d(-4px, -4px, 0);
  }
  50% {
    transform: translate3d(0, 0, 0);
  }
  62.5% {
    transform: translate3d(4px, 4px, 0);
  }
  75% {
    transform: translate3d(0, 0, 0);
  }
  87.5% {
    transform: translate3d(-4px, 4px, 0);
  }
}

@keyframes animotion-text-spiral {
  0% {
    transform: rotate(0deg) scale(0) translate3d(30px, 0, 0);
    opacity: 0;
  }
  100% {
    transform: rotate(720deg) scale(1) translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes animotion-text-rain {
  0% {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  80% {
    transform: translate3d(0, 5px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes animotion-text-explode {
  0% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: scale(2) translate3d(var(--explode-x, 20px), var(--explode-y, -20px), 0);
    filter: blur(5px);
  }
}

@keyframes animotion-text-assemble {
  0% {
    opacity: 0;
    transform: translate3d(var(--assemble-x, -30px), var(--assemble-y, 30px), 0) rotate(var(--assemble-r, 15deg));
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
    filter: blur(0);
  }
}

@keyframes animotion-text-matrix {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  30% {
    opacity: 1;
    color: #00ff00;
  }
  60% {
    color: #00ff00;
    transform: translate3d(0, 2px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-text-hologram {
  0%, 100% {
    opacity: 0.9;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5), 0 0 10px rgba(0, 255, 255, 0.3);
    transform: translate3d(0, 0, 0);
  }
  25% {
    opacity: 0.7;
    transform: translate3d(1px, 0, 0);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.2);
    transform: translate3d(-1px, 0, 0);
  }
  75% {
    opacity: 0.8;
    transform: translate3d(0, 0, 0);
  }
}


/* ==========================================================================
   5. BACKGROUND ANIMATIONS (40)
   ========================================================================== */

@keyframes animotion-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes animotion-aurora {
  0% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
  33% {
    background-position: 50% 100%;
  }
  66% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 50%;
    filter: hue-rotate(60deg);
  }
}

@keyframes animotion-mesh-gradient {
  0% {
    background-position: 0% 0%, 100% 100%, 0% 100%;
  }
  25% {
    background-position: 100% 0%, 0% 100%, 100% 0%;
  }
  50% {
    background-position: 100% 100%, 0% 0%, 50% 50%;
  }
  75% {
    background-position: 0% 100%, 100% 0%, 0% 0%;
  }
  100% {
    background-position: 0% 0%, 100% 100%, 0% 100%;
  }
}

@keyframes animotion-animated-grid {
  0% {
    background-size: 30px 30px;
  }
  50% {
    background-size: 40px 40px;
  }
  100% {
    background-size: 30px 30px;
  }
}

@keyframes animotion-dot-grid-pulse {
  0%, 100% {
    opacity: 0.3;
    background-size: 20px 20px;
  }
  50% {
    opacity: 0.6;
    background-size: 25px 25px;
  }
}

@keyframes animotion-starfield {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes animotion-bokeh-circles {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translate3d(10px, -15px, 0) scale(1.1);
    opacity: 0.5;
  }
  50% {
    transform: translate3d(-5px, -25px, 0) scale(0.9);
    opacity: 0.4;
  }
  75% {
    transform: translate3d(8px, -10px, 0) scale(1.05);
    opacity: 0.6;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.3;
  }
}

@keyframes animotion-plasma {
  0% {
    filter: hue-rotate(0deg) saturate(1.5);
    background-position: 0% 0%;
  }
  50% {
    filter: hue-rotate(180deg) saturate(2);
    background-position: 100% 100%;
  }
  100% {
    filter: hue-rotate(360deg) saturate(1.5);
    background-position: 0% 0%;
  }
}

@keyframes animotion-matrix-rain {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 1000px;
  }
}

@keyframes animotion-conic-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-wave-blob {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    border-radius: 50% 60% 30% 60% / 30% 70% 50% 60%;
  }
  75% {
    border-radius: 60% 30% 60% 40% / 70% 40% 60% 30%;
  }
}

@keyframes animotion-ripple-expand {
  0% {
    box-shadow: 0 0 0 0 rgba(128, 128, 255, 0.3),
                0 0 0 0 rgba(128, 128, 255, 0.3),
                0 0 0 0 rgba(128, 128, 255, 0.3);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(128, 128, 255, 0),
                0 0 0 40px rgba(128, 128, 255, 0),
                0 0 0 60px rgba(128, 128, 255, 0);
  }
}

@keyframes animotion-circuit-board {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}

@keyframes animotion-confetti-rain {
  0% {
    transform: translate3d(0, -10%, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(20px, 100%, 0) rotate(720deg);
    opacity: 0;
  }
}

@keyframes animotion-bubble-float {
  0% {
    transform: translate3d(0, 100%, 0) scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translate3d(0, -20%, 0) scale(1);
    opacity: 0;
  }
}

@keyframes animotion-spotlight-move {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@keyframes animotion-moving-gradient {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 200%;
  }
}

@keyframes animotion-noise-overlay {
  0% {
    transform: translate3d(0, 0, 0);
  }
  10% {
    transform: translate3d(-5%, -5%, 0);
  }
  20% {
    transform: translate3d(-10%, 5%, 0);
  }
  30% {
    transform: translate3d(5%, -10%, 0);
  }
  40% {
    transform: translate3d(-5%, 15%, 0);
  }
  50% {
    transform: translate3d(-10%, 5%, 0);
  }
  60% {
    transform: translate3d(15%, 0, 0);
  }
  70% {
    transform: translate3d(0, 10%, 0);
  }
  80% {
    transform: translate3d(-15%, 0, 0);
  }
  90% {
    transform: translate3d(10%, 5%, 0);
  }
  100% {
    transform: translate3d(5%, 0, 0);
  }
}

@keyframes animotion-geometric-rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(90deg) scale(1.1);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  75% {
    transform: rotate(270deg) scale(0.9);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes animotion-parallax-layers {
  0% {
    background-position: 0% 0%, 0% 0%, 0% 0%;
  }
  100% {
    background-position: 100% 0%, 200% 0%, 300% 0%;
  }
}

@keyframes animotion-hue-rotate-bg {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

@keyframes animotion-scanline-crt {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

@keyframes animotion-holographic-foil {
  0% {
    background-position: 0% 0%;
    filter: hue-rotate(0deg) brightness(1);
  }
  25% {
    filter: hue-rotate(90deg) brightness(1.2);
  }
  50% {
    background-position: 100% 100%;
    filter: hue-rotate(180deg) brightness(1);
  }
  75% {
    filter: hue-rotate(270deg) brightness(1.1);
  }
  100% {
    background-position: 0% 0%;
    filter: hue-rotate(360deg) brightness(1);
  }
}

@keyframes animotion-lava-lamp {
  0%, 100% {
    border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    border-radius: 60% 40% 30% 70% / 40% 70% 30% 60%;
    transform: translate3d(5px, -10px, 0) rotate(3deg);
  }
  50% {
    border-radius: 30% 70% 50% 50% / 70% 40% 60% 30%;
    transform: translate3d(-5px, -20px, 0) rotate(-2deg);
  }
  75% {
    border-radius: 70% 30% 40% 60% / 30% 60% 40% 70%;
    transform: translate3d(3px, -10px, 0) rotate(1deg);
  }
}

@keyframes animotion-particle-field {
  0% {
    background-position: 0 0, 20px 30px, 50px 10px;
    opacity: 0.5;
  }
  50% {
    background-position: 30px 50px, 0 10px, 20px 40px;
    opacity: 0.8;
  }
  100% {
    background-position: 0 0, 20px 30px, 50px 10px;
    opacity: 0.5;
  }
}

@keyframes animotion-nebula {
  0% {
    background-position: 0% 0%;
    filter: hue-rotate(0deg) brightness(0.8);
  }
  33% {
    background-position: 50% 50%;
    filter: hue-rotate(120deg) brightness(1);
  }
  66% {
    background-position: 100% 100%;
    filter: hue-rotate(240deg) brightness(0.9);
  }
  100% {
    background-position: 0% 0%;
    filter: hue-rotate(360deg) brightness(0.8);
  }
}

@keyframes animotion-fireflies {
  0%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate3d(10px, -20px, 0) scale(1);
  }
  40% {
    opacity: 0.6;
    transform: translate3d(-15px, -35px, 0) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translate3d(5px, -50px, 0) scale(1.1);
  }
  80% {
    opacity: 0.4;
    transform: translate3d(-10px, -40px, 0) scale(0.7);
  }
}

@keyframes animotion-ocean-wave {
  0% {
    transform: translate3d(0, 0, 0) scaleY(1);
  }
  25% {
    transform: translate3d(-5%, 2%, 0) scaleY(1.05);
  }
  50% {
    transform: translate3d(-10%, 0, 0) scaleY(0.95);
  }
  75% {
    transform: translate3d(-5%, -2%, 0) scaleY(1.03);
  }
  100% {
    transform: translate3d(0, 0, 0) scaleY(1);
  }
}

@keyframes animotion-cloud-drift {
  0% {
    transform: translate3d(-10%, 0, 0);
  }
  100% {
    transform: translate3d(110%, 0, 0);
  }
}

@keyframes animotion-light-rays {
  0% {
    transform: rotate(0deg);
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.3;
  }
}

@keyframes animotion-prism-refract {
  0% {
    filter: hue-rotate(0deg);
    background-position: 0% 50%;
  }
  33% {
    filter: hue-rotate(120deg);
    background-position: 50% 0%;
  }
  66% {
    filter: hue-rotate(240deg);
    background-position: 100% 50%;
  }
  100% {
    filter: hue-rotate(360deg);
    background-position: 0% 50%;
  }
}

@keyframes animotion-galaxy-spiral {
  from {
    transform: rotate(0deg) scale(1);
    filter: hue-rotate(0deg);
  }
  to {
    transform: rotate(360deg) scale(1);
    filter: hue-rotate(360deg);
  }
}

@keyframes animotion-electric-field {
  0%, 100% {
    background-position: 0% 0%;
    opacity: 0.6;
  }
  25% {
    background-position: 100% 0%;
    opacity: 0.9;
  }
  50% {
    background-position: 100% 100%;
    opacity: 0.5;
  }
  75% {
    background-position: 0% 100%;
    opacity: 0.8;
  }
}

@keyframes animotion-data-stream {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -1000px;
  }
}

@keyframes animotion-grid-pulse {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.02);
  }
}

@keyframes animotion-waveform-bg {
  0% {
    transform: scaleY(0.3);
  }
  25% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.5);
  }
  75% {
    transform: scaleY(0.8);
  }
  100% {
    transform: scaleY(0.3);
  }
}

@keyframes animotion-raindrops {
  0% {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: translate3d(0, 100vh, 0);
    opacity: 0;
  }
}

@keyframes animotion-snowfall {
  0% {
    transform: translate3d(0, -10%, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate3d(20px, 100vh, 0) rotate(360deg);
    opacity: 0;
  }
}

@keyframes animotion-fog-roll {
  0% {
    transform: translate3d(-30%, 0, 0);
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: translate3d(30%, 0, 0);
    opacity: 0.3;
  }
}

@keyframes animotion-aurora-boreal {
  0% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg) brightness(1.1);
    opacity: 0.6;
  }
  25% {
    filter: hue-rotate(45deg) brightness(1.3);
    opacity: 0.8;
  }
  50% {
    background-position: 100% 50%;
    filter: hue-rotate(90deg) brightness(1);
    opacity: 0.5;
  }
  75% {
    filter: hue-rotate(45deg) brightness(1.2);
    opacity: 0.7;
  }
  100% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg) brightness(1.1);
    opacity: 0.6;
  }
}


/* ==========================================================================
   6. BUTTON ANIMATIONS (40)
   ========================================================================== */

@keyframes animotion-ripple-click {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes animotion-glow-pulse-btn {
  0%, 100% {
    box-shadow: 0 0 5px rgba(66, 133, 244, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(66, 133, 244, 0.6), 0 0 40px rgba(66, 133, 244, 0.3);
  }
}

@keyframes animotion-shine-sweep {
  0% {
    transform: translate3d(-100%, 0, 0) skewX(-25deg);
  }
  100% {
    transform: translate3d(200%, 0, 0) skewX(-25deg);
  }
}

@keyframes animotion-fill-left {
  from {
    background-position: 100% 0;
    background-size: 200% 100%;
  }
  to {
    background-position: 0% 0;
    background-size: 200% 100%;
  }
}

@keyframes animotion-fill-right {
  from {
    background-position: 0% 0;
    background-size: 200% 100%;
  }
  to {
    background-position: 100% 0;
    background-size: 200% 100%;
  }
}

@keyframes animotion-fill-top {
  from {
    background-position: 0 100%;
    background-size: 100% 200%;
  }
  to {
    background-position: 0 0%;
    background-size: 100% 200%;
  }
}

@keyframes animotion-fill-bottom {
  from {
    background-position: 0 0%;
    background-size: 100% 200%;
  }
  to {
    background-position: 0 100%;
    background-size: 100% 200%;
  }
}

@keyframes animotion-press-3d {
  0% {
    transform: perspective(200px) translate3d(0, 0, 0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: perspective(200px) translate3d(0, 2px, -3px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  100% {
    transform: perspective(200px) translate3d(0, 0, 0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
}

@keyframes animotion-border-draw {
  0% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0, 0 0);
  }
  50% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 0);
  }
  75% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

@keyframes animotion-gradient-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes animotion-gradient-sweep {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

@keyframes animotion-magnetic-pull {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(var(--pull-x, 5px), var(--pull-y, -3px), 0);
  }
}

@keyframes animotion-shake-error {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-5px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(5px, 0, 0);
  }
}

@keyframes animotion-success-checkmark {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  50% {
    clip-path: inset(0 50% 0 0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes animotion-loading-spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-progress-fill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes animotion-jelly-bounce {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-elastic-scale {
  0% {
    transform: scale3d(1, 1, 1);
  }
  40% {
    transform: scale3d(1.15, 1.15, 1);
  }
  60% {
    transform: scale3d(0.95, 0.95, 1);
  }
  80% {
    transform: scale3d(1.03, 1.03, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-outline-grow {
  from {
    outline-offset: 0;
    outline-color: currentColor;
  }
  to {
    outline-offset: 8px;
    outline-color: transparent;
  }
}

@keyframes animotion-icon-slide-in {
  from {
    transform: translate3d(-10px, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes animotion-color-wave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes animotion-neon-glow {
  0%, 100% {
    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
  }
  50% {
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor;
  }
}

@keyframes animotion-spotlight-sweep {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes animotion-text-flip {
  0%, 100% {
    transform: perspective(400px) rotateX(0deg);
  }
  50% {
    transform: perspective(400px) rotateX(180deg);
  }
}

@keyframes animotion-btn-flip-3d {
  0% {
    transform: perspective(600px) rotateY(0deg);
  }
  100% {
    transform: perspective(600px) rotateY(180deg);
  }
}

@keyframes animotion-btn-morph {
  0%, 100% {
    border-radius: 8px;
  }
  50% {
    border-radius: 50%;
  }
}

@keyframes animotion-btn-stretch {
  0%, 100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.15);
  }
}

@keyframes animotion-btn-pop {
  0% {
    transform: scale3d(1, 1, 1);
  }
  40% {
    transform: scale3d(1.15, 1.15, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-btn-slide {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-btn-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-btn-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.5);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(66, 133, 244, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
  }
}

@keyframes animotion-btn-glitch {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  20% {
    transform: translate3d(-2px, 2px, 0);
    filter: hue-rotate(90deg);
  }
  40% {
    transform: translate3d(2px, -2px, 0);
    filter: hue-rotate(180deg);
  }
  60% {
    transform: translate3d(-1px, -1px, 0);
    filter: hue-rotate(270deg);
  }
  80% {
    transform: translate3d(1px, 1px, 0);
    filter: hue-rotate(0deg);
  }
}

@keyframes animotion-btn-wave {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  75% {
    transform: translateY(3px);
  }
}

@keyframes animotion-btn-ripple-out {
  0% {
    box-shadow: 0 0 0 0 currentColor;
    opacity: 0.5;
  }
  100% {
    box-shadow: 0 0 0 20px currentColor;
    opacity: 0;
  }
}

@keyframes animotion-btn-fill-diagonal {
  from {
    background-position: 100% 100%;
    background-size: 250% 250%;
  }
  to {
    background-position: 0% 0%;
    background-size: 250% 250%;
  }
}

@keyframes animotion-btn-sweep-circle {
  from {
    clip-path: circle(0% at 50% 50%);
  }
  to {
    clip-path: circle(100% at 50% 50%);
  }
}

@keyframes animotion-btn-border-chase {
  0% {
    background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%;
  }
  25% {
    background-position: 100% 0%, 100% 100%, 0% 100%, 0% 0%;
  }
  50% {
    background-position: 100% 100%, 0% 100%, 0% 0%, 100% 0%;
  }
  75% {
    background-position: 0% 100%, 0% 0%, 100% 0%, 100% 100%;
  }
  100% {
    background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%;
  }
}

@keyframes animotion-btn-shine {
  from {
    transform: translate3d(-100%, 0, 0) rotate(25deg);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  to {
    transform: translate3d(100%, 0, 0) rotate(25deg);
    opacity: 0;
  }
}

@keyframes animotion-btn-lift {
  from {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  to {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }
}

@keyframes animotion-btn-press {
  from {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  to {
    transform: translate3d(0, 2px, 0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}


/* ==========================================================================
   7. CARD ANIMATIONS (35)
   ========================================================================== */

@keyframes animotion-card-lift {
  from {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  to {
    transform: translate3d(0, -8px, 0);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }
}

@keyframes animotion-card-flip-3d {
  from {
    transform: perspective(1000px) rotateY(0deg);
  }
  to {
    transform: perspective(1000px) rotateY(180deg);
  }
}

@keyframes animotion-card-tilt-3d {
  0%, 100% {
    transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: perspective(800px) rotateX(5deg) rotateY(-5deg);
  }
  50% {
    transform: perspective(800px) rotateX(-3deg) rotateY(3deg);
  }
  75% {
    transform: perspective(800px) rotateX(2deg) rotateY(-2deg);
  }
}

@keyframes animotion-glassmorphism {
  from {
    backdrop-filter: blur(0px);
    background: rgba(255, 255, 255, 0);
  }
  to {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.15);
  }
}

@keyframes animotion-neumorphism-press {
  from {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.15),
                -8px -8px 16px rgba(255, 255, 255, 0.8);
  }
  to {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.15),
                inset -4px -4px 8px rgba(255, 255, 255, 0.8);
  }
}

@keyframes animotion-glow-border {
  0%, 100% {
    box-shadow: 0 0 5px rgba(128, 128, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(128, 128, 255, 0.6), 0 0 30px rgba(128, 128, 255, 0.3);
  }
}

@keyframes animotion-gradient-border-card {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes animotion-zoom-image {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

@keyframes animotion-overlay-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-slide-info-panel {
  from {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes animotion-card-scale-in {
  from {
    opacity: 0;
    transform: scale3d(0.85, 0.85, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-shadow-bloom {
  from {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  to {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.1);
  }
}

@keyframes animotion-shimmer-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes animotion-skeleton-screen {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

@keyframes animotion-card-rotate-y {
  from {
    transform: perspective(800px) rotateY(0deg);
  }
  to {
    transform: perspective(800px) rotateY(360deg);
  }
}

@keyframes animotion-polaroid-drop {
  0% {
    opacity: 0;
    transform: translate3d(0, -200px, 0) rotate(-15deg);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 10px, 0) rotate(3deg);
  }
  80% {
    transform: translate3d(0, -5px, 0) rotate(-1deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(2deg);
  }
}

@keyframes animotion-card-unfold {
  0% {
    transform: perspective(800px) rotateX(-90deg);
    transform-origin: top center;
    opacity: 0;
  }
  50% {
    transform: perspective(800px) rotateX(5deg);
    opacity: 1;
  }
  100% {
    transform: perspective(800px) rotateX(0deg);
    transform-origin: top center;
  }
}

@keyframes animotion-flip-reveal {
  0% {
    transform: perspective(800px) rotateY(-180deg);
    opacity: 0;
  }
  100% {
    transform: perspective(800px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes animotion-border-collapse-draw {
  0% {
    clip-path: inset(50% 50% 50% 50%);
  }
  100% {
    clip-path: inset(0% 0% 0% 0%);
  }
}

@keyframes animotion-confetti-card {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--confetti-x, 30px), var(--confetti-y, -50px), 0) rotate(var(--confetti-r, 360deg));
    opacity: 0;
  }
}

@keyframes animotion-card-stack {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(var(--stack-x, 5px), var(--stack-y, -5px), 0) rotate(var(--stack-r, 2deg));
  }
}

@keyframes animotion-card-fan {
  0% {
    transform: rotate(0deg);
    transform-origin: bottom center;
  }
  100% {
    transform: rotate(var(--fan-angle, 15deg));
    transform-origin: bottom center;
  }
}

@keyframes animotion-card-shuffle {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(10px, -5px, 0);
  }
  50% {
    transform: translate3d(-5px, 5px, 0);
  }
  75% {
    transform: translate3d(5px, -3px, 0);
  }
}

@keyframes animotion-card-deal {
  from {
    opacity: 0;
    transform: translate3d(-200px, -100px, 0) rotate(-30deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes animotion-card-peel {
  from {
    transform: perspective(800px) rotateY(0deg);
    transform-origin: left center;
  }
  to {
    transform: perspective(800px) rotateY(-60deg);
    transform-origin: left center;
  }
}

@keyframes animotion-card-slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes animotion-card-morph {
  0%, 100% {
    border-radius: 8px;
    transform: scale3d(1, 1, 1);
  }
  50% {
    border-radius: 20px;
    transform: scale3d(1.03, 1.03, 1);
  }
}

@keyframes animotion-card-expand {
  from {
    transform: scale3d(1, 1, 1);
  }
  to {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes animotion-card-collapse {
  from {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  to {
    transform: scale3d(0.9, 0.9, 1);
    opacity: 0.7;
  }
}

@keyframes animotion-card-swipe {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: translate3d(200%, 0, 0) rotate(20deg);
    opacity: 0;
  }
}

@keyframes animotion-card-bounce {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, -20px, 0);
  }
  60% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes animotion-card-wobble {
  0%, 100% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-5deg);
  }
  30% {
    transform: rotate(4deg);
  }
  45% {
    transform: rotate(-3deg);
  }
  60% {
    transform: rotate(2deg);
  }
  75% {
    transform: rotate(-1deg);
  }
}

@keyframes animotion-card-glow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(128, 128, 255, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(128, 128, 255, 0.4), 0 0 40px rgba(128, 128, 255, 0.2);
  }
}

@keyframes animotion-card-pulse {
  0%, 100% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.03, 1.03, 1);
  }
}

@keyframes animotion-card-reveal {
  from {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
  to {
    clip-path: circle(100% at 50% 50%);
    opacity: 1;
  }
}


/* ==========================================================================
   8. LOADERS & SPINNERS (60)
   ========================================================================== */

@keyframes animotion-spinner-border {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animotion-triple-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animotion-conic-spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-gradient-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animotion-dots-wave {
  0%, 60%, 100% {
    transform: translate3d(0, 0, 0);
  }
  30% {
    transform: translate3d(0, -15px, 0);
  }
}

@keyframes animotion-dots-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

@keyframes animotion-dots-scale {
  0%, 100% {
    transform: scale3d(0.6, 0.6, 1);
    opacity: 0.5;
  }
  50% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}

@keyframes animotion-dots-fade {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

@keyframes animotion-dots-orbit {
  0% {
    transform: rotate(0deg) translateX(20px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(20px) rotate(-360deg);
  }
}

@keyframes animotion-bars-wave {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

@keyframes animotion-bars-scale {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.4);
  }
}

@keyframes animotion-bars-strobe {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

@keyframes animotion-orbital {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animotion-ping-pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes animotion-progress-bar {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes animotion-indeterminate-bar {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  50% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(300%, 0, 0);
  }
}

@keyframes animotion-striped-progress {
  0% {
    background-position: 40px 0;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes animotion-circle-progress {
  0% {
    stroke-dashoffset: 283;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animotion-semi-circle-progress {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes animotion-skeleton-lines {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

@keyframes animotion-heartbeat-monitor {
  0%, 60%, 100% {
    transform: scaleY(0.1);
  }
  10% {
    transform: scaleY(0.3);
  }
  20% {
    transform: scaleY(1);
  }
  30% {
    transform: scaleY(0.4);
  }
  40% {
    transform: scaleY(0.8);
  }
  50% {
    transform: scaleY(0.2);
  }
}

@keyframes animotion-dna-helix {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

@keyframes animotion-cube-spin-loader {
  0% {
    transform: perspective(200px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(200px) rotateX(180deg) rotateY(0deg);
  }
  100% {
    transform: perspective(200px) rotateX(180deg) rotateY(180deg);
  }
}

@keyframes animotion-dots-grid-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale3d(0.5, 0.5, 1);
  }
  50% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-infinity-svg {
  0% {
    stroke-dashoffset: 300;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -300;
  }
}

@keyframes animotion-hourglass-flip {
  0% {
    transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  75% {
    transform: rotateZ(360deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes animotion-wifi-bars {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

@keyframes animotion-battery-fill {
  0% {
    width: 0%;
    background-color: #ff4444;
  }
  50% {
    background-color: #ffaa00;
  }
  100% {
    width: 100%;
    background-color: #44cc44;
  }
}

@keyframes animotion-typing-indicator {
  0%, 60%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.4;
  }
  30% {
    transform: translate3d(0, -8px, 0);
    opacity: 1;
  }
}

@keyframes animotion-clock-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-gear-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-atom-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-pulse-dot {
  0% {
    transform: scale3d(0.8, 0.8, 1);
    opacity: 0.5;
  }
  50% {
    transform: scale3d(1.2, 1.2, 1);
    opacity: 1;
  }
  100% {
    transform: scale3d(0.8, 0.8, 1);
    opacity: 0.5;
  }
}

@keyframes animotion-chain-links {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

@keyframes animotion-wave-loader {
  0%, 100% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1.5);
  }
}

@keyframes animotion-snake-loader {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -260;
  }
}

@keyframes animotion-pendulum-loader {
  0% {
    transform: rotate(35deg);
    transform-origin: top center;
  }
  50% {
    transform: rotate(-35deg);
    transform-origin: top center;
  }
  100% {
    transform: rotate(35deg);
    transform-origin: top center;
  }
}

@keyframes animotion-square-rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animotion-triangle-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-hexagon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-diamond-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-star-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-cross-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-plus-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-arrow-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-ripple-loader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes animotion-expanding-circle {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes animotion-bouncing-ball {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97);
  }
  50% {
    transform: translate3d(0, -40px, 0);
    animation-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97);
  }
}

@keyframes animotion-sliding-dots {
  0% {
    transform: translate3d(-20px, 0, 0);
    opacity: 0;
  }
  50% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(20px, 0, 0);
    opacity: 0;
  }
}

@keyframes animotion-morphing-shape {
  0% {
    border-radius: 50%;
    transform: rotate(0deg);
  }
  25% {
    border-radius: 20%;
    transform: rotate(90deg);
  }
  50% {
    border-radius: 50%;
    transform: rotate(180deg);
  }
  75% {
    border-radius: 10%;
    transform: rotate(270deg);
  }
  100% {
    border-radius: 50%;
    transform: rotate(360deg);
  }
}

@keyframes animotion-flowing-dots {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  50% {
    transform: translate3d(30px, 0, 0);
    opacity: 0.5;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes animotion-spiral-loader {
  from {
    transform: rotate(0deg) translate3d(15px, 0, 0) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate3d(15px, 0, 0) rotate(-360deg);
  }
}

@keyframes animotion-grid-loader {
  0%, 70%, 100% {
    transform: scale3d(1, 1, 1);
  }
  35% {
    transform: scale3d(0, 0, 1);
  }
}

@keyframes animotion-barber-pole {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 30px;
  }
}

@keyframes animotion-pulse-bars {
  0%, 100% {
    transform: scaleY(1);
    opacity: 1;
  }
  50% {
    transform: scaleY(0.4);
    opacity: 0.5;
  }
}

@keyframes animotion-waveform-loader {
  0% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.3);
  }
}

@keyframes animotion-orbit-dots {
  0% {
    transform: rotate(0deg) translateX(25px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(25px) rotate(-360deg);
  }
}

@keyframes animotion-rainbow-spinner {
  0% {
    transform: rotate(0deg);
    border-top-color: #ff0000;
  }
  16.6% {
    border-top-color: #ff8800;
  }
  33.3% {
    border-top-color: #ffff00;
  }
  50% {
    border-top-color: #00ff00;
    transform: rotate(180deg);
  }
  66.6% {
    border-top-color: #0088ff;
  }
  83.3% {
    border-top-color: #8800ff;
  }
  100% {
    transform: rotate(360deg);
    border-top-color: #ff0000;
  }
}

@keyframes animotion-matrix-loader {
  0% {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}


/* ==========================================================================
   9. NAVIGATION (25)
   ========================================================================== */

@keyframes animotion-underline-grow {
  from {
    transform: scaleX(0);
    transform-origin: center;
  }
  to {
    transform: scaleX(1);
    transform-origin: center;
  }
}

@keyframes animotion-underline-slide {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes animotion-hamburger-x {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, 8px, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0, 8px, 0) rotate(45deg);
  }
}

@keyframes animotion-hamburger-arrow {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(5px, 0, 0) rotate(45deg) scaleX(0.6);
  }
}

@keyframes animotion-dropdown-slide {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-drawer-slide-in {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-sticky-nav-compact {
  from {
    transform: translate3d(0, -100%, 0);
    box-shadow: none;
  }
  to {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
}

@keyframes animotion-back-to-top-appear {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-scroll-progress-bar {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes animotion-pagination-hop {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -5px, 0);
  }
}

@keyframes animotion-breadcrumb-cascade {
  from {
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-tab-active-pill {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes animotion-bottom-nav-active {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.15, 1.15, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-dropdown-arrow-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

@keyframes animotion-nav-link-rainbow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes animotion-nav-slide-down {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-nav-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes animotion-nav-accordion {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 500px;
    opacity: 1;
  }
}

@keyframes animotion-nav-highlight {
  from {
    background-color: transparent;
  }
  to {
    background-color: rgba(128, 128, 255, 0.1);
  }
}

@keyframes animotion-nav-border-slide {
  from {
    border-bottom-color: transparent;
    transform: scaleX(0);
  }
  to {
    border-bottom-color: currentColor;
    transform: scaleX(1);
  }
}

@keyframes animotion-nav-glow {
  0%, 100% {
    text-shadow: 0 0 0 transparent;
  }
  50% {
    text-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
  }
}

@keyframes animotion-nav-pulse {
  0%, 100% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1);
  }
}

@keyframes animotion-nav-scale {
  from {
    transform: scale3d(0.9, 0.9, 1);
    opacity: 0;
  }
  to {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}

@keyframes animotion-nav-rotate {
  from {
    transform: rotate(-5deg) scale(0.95);
    opacity: 0;
  }
  to {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes animotion-nav-morph {
  0% {
    border-radius: 0;
    background-color: transparent;
  }
  100% {
    border-radius: 20px;
    background-color: rgba(128, 128, 255, 0.15);
  }
}


/* ==========================================================================
   10. BONUS ENTRANCE ANIMATIONS (15)
   ========================================================================== */

@keyframes animotion-glide-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 60px, 0) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes animotion-glide-in-down {
  from {
    opacity: 0;
    transform: translate3d(0, -60px, 0) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes animotion-glide-in-left {
  from {
    opacity: 0;
    transform: translate3d(-60px, 0, 0) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes animotion-glide-in-right {
  from {
    opacity: 0;
    transform: translate3d(60px, 0, 0) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes animotion-flip-in-z {
  from {
    opacity: 0;
    transform: perspective(400px) rotateZ(90deg) scale(0.6);
  }
  60% {
    opacity: 1;
    transform: perspective(400px) rotateZ(-10deg) scale(1.05);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateZ(0deg) scale(1);
  }
}

@keyframes animotion-stretch-in-x {
  from {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
  }
  to {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left center;
  }
}

@keyframes animotion-stretch-in-y {
  from {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
  }
  to {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top center;
  }
}

@keyframes animotion-skate-in-left {
  from {
    opacity: 0;
    transform: translate3d(-200px, 0, 0) skewX(20deg);
  }
  60% {
    transform: translate3d(10px, 0, 0) skewX(-5deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewX(0deg);
  }
}

@keyframes animotion-skate-in-right {
  from {
    opacity: 0;
    transform: translate3d(200px, 0, 0) skewX(-20deg);
  }
  60% {
    transform: translate3d(-10px, 0, 0) skewX(5deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewX(0deg);
  }
}

@keyframes animotion-rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 80px, 0);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes animotion-sink-in {
  from {
    opacity: 0;
    transform: translate3d(0, -80px, 0);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes animotion-tumble-in {
  from {
    opacity: 0;
    transform: translate3d(-200px, -100px, 0) rotate(-90deg) scale(0.5);
  }
  60% {
    opacity: 1;
    transform: translate3d(10px, 5px, 0) rotate(5deg) scale(1.02);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes animotion-whip-in {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate(180deg);
  }
  60% {
    opacity: 1;
    transform: translate3d(-5%, 0, 0) rotate(-10deg);
  }
  80% {
    transform: translate3d(2%, 0, 0) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes animotion-parachute-in {
  0% {
    opacity: 0;
    transform: translate3d(0, -500px, 0) scale(0.3);
  }
  40% {
    transform: translate3d(0, -200px, 0) scale(1.1);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -100px, 0) scale(0.95);
  }
  80% {
    transform: translate3d(0, -30px, 0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes animotion-pixel-in {
  0% {
    opacity: 0;
    filter: blur(20px) saturate(0);
    transform: scale(1.2);
  }
  50% {
    filter: blur(5px) saturate(0.5);
  }
  100% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: scale(1);
  }
}


/* ==========================================================================
   11. BONUS EXIT ANIMATIONS (15)
   ========================================================================== */

@keyframes animotion-glide-out-up {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -60px, 0) scale(0.95);
  }
}

@keyframes animotion-glide-out-down {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 60px, 0) scale(0.95);
  }
}

@keyframes animotion-glide-out-left {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(-60px, 0, 0) scale(0.95);
  }
}

@keyframes animotion-glide-out-right {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(60px, 0, 0) scale(0.95);
  }
}

@keyframes animotion-flip-out-z {
  from {
    opacity: 1;
    transform: perspective(400px) rotateZ(0deg) scale(1);
  }
  to {
    opacity: 0;
    transform: perspective(400px) rotateZ(-90deg) scale(0.6);
  }
}

@keyframes animotion-shrink-out-x {
  from {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left center;
  }
  to {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
  }
}

@keyframes animotion-shrink-out-y {
  from {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top center;
  }
  to {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
  }
}

@keyframes animotion-skate-out-left {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewX(0deg);
  }
  to {
    opacity: 0;
    transform: translate3d(-200px, 0, 0) skewX(20deg);
  }
}

@keyframes animotion-skate-out-right {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewX(0deg);
  }
  to {
    opacity: 0;
    transform: translate3d(200px, 0, 0) skewX(-20deg);
  }
}

@keyframes animotion-sink-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 80px, 0);
    filter: blur(8px);
  }
}

@keyframes animotion-rise-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -80px, 0);
    filter: blur(8px);
  }
}

@keyframes animotion-tumble-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(200px, 100px, 0) rotate(90deg) scale(0.5);
  }
}

@keyframes animotion-whip-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate(-180deg);
  }
}

@keyframes animotion-pixel-out {
  0% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: scale(1);
  }
  50% {
    filter: blur(5px) saturate(0.5);
  }
  100% {
    opacity: 0;
    filter: blur(20px) saturate(0);
    transform: scale(1.2);
  }
}

@keyframes animotion-evaporate {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -100px, 0) scale(1.5);
    filter: blur(15px);
  }
}


/* ==========================================================================
   12. BONUS ATTENTION SEEKERS (10)
   ========================================================================== */

@keyframes animotion-jolt {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  10% {
    transform: translate3d(0, -5px, 0) scale(1.05);
  }
  30% {
    transform: translate3d(0, 2px, 0) scale(0.98);
  }
  50% {
    transform: translate3d(0, -2px, 0) scale(1.02);
  }
  70% {
    transform: translate3d(0, 1px, 0) scale(0.99);
  }
}

@keyframes animotion-surge {
  0%, 100% {
    transform: scale3d(1, 1, 1);
    filter: brightness(1);
  }
  50% {
    transform: scale3d(1.08, 1.08, 1);
    filter: brightness(1.2);
  }
}

@keyframes animotion-shiver {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  10% {
    transform: translate3d(1px, -1px, 0) rotate(0.5deg);
  }
  20% {
    transform: translate3d(-1px, 0, 0) rotate(-0.5deg);
  }
  30% {
    transform: translate3d(0, 1px, 0) rotate(0.3deg);
  }
  40% {
    transform: translate3d(1px, 0, 0) rotate(-0.3deg);
  }
  50% {
    transform: translate3d(-1px, 1px, 0) rotate(0.2deg);
  }
  60% {
    transform: translate3d(0, -1px, 0) rotate(-0.2deg);
  }
  70% {
    transform: translate3d(1px, 0, 0) rotate(0.1deg);
  }
  80% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

@keyframes animotion-orbit {
  0% {
    transform: rotate(0deg) translate3d(5px, 0, 0) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translate3d(5px, 0, 0) rotate(-360deg);
  }
}

@keyframes animotion-warp {
  0%, 100% {
    transform: perspective(600px) rotateY(0deg);
  }
  25% {
    transform: perspective(600px) rotateY(15deg);
  }
  75% {
    transform: perspective(600px) rotateY(-15deg);
  }
}

@keyframes animotion-bounce-twist {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(0, -15px, 0) rotate(5deg);
  }
  50% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  75% {
    transform: translate3d(0, -8px, 0) rotate(-3deg);
  }
}

@keyframes animotion-squeeze {
  0%, 100% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.1, 0.9, 1);
  }
  50% {
    transform: scale3d(0.9, 1.1, 1);
  }
  70% {
    transform: scale3d(1.05, 0.95, 1);
  }
}

@keyframes animotion-levitate {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: translate3d(0, -15px, 0);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
  }
}

@keyframes animotion-flare {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.3);
    filter: brightness(1.3);
  }
}

@keyframes animotion-magnetic {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  15% {
    transform: translate3d(3px, -2px, 0);
  }
  30% {
    transform: translate3d(-2px, 3px, 0);
  }
  45% {
    transform: translate3d(2px, 1px, 0);
  }
  60% {
    transform: translate3d(-1px, -2px, 0);
  }
  75% {
    transform: translate3d(1px, 1px, 0);
  }
}


/* ==========================================================================
   13. BONUS TEXT EFFECTS (10)
   ========================================================================== */

@keyframes animotion-text-blur-in {
  from {
    opacity: 0;
    filter: blur(12px);
    letter-spacing: 0.5em;
  }
  to {
    opacity: 1;
    filter: blur(0);
    letter-spacing: normal;
  }
}

@keyframes animotion-text-shake {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-2px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(2px, 0, 0);
  }
}

@keyframes animotion-text-rotate-in {
  from {
    opacity: 0;
    transform: rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@keyframes animotion-text-drop-shadow {
  0%, 100% {
    text-shadow: 0 0 0 transparent;
    transform: translate3d(0, 0, 0);
  }
  50% {
    text-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transform: translate3d(0, -3px, 0);
  }
}

@keyframes animotion-text-squeeze {
  0%, 100% {
    transform: scaleX(1);
  }
  25% {
    transform: scaleX(1.2);
  }
  50% {
    transform: scaleX(0.85);
  }
  75% {
    transform: scaleX(1.05);
  }
}

@keyframes animotion-text-tracking-expand {
  from {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  60% {
    opacity: 0.6;
  }
  to {
    letter-spacing: 0.3em;
    opacity: 1;
  }
}

@keyframes animotion-text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes animotion-text-flicker-in {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  10.1% {
    opacity: 1;
  }
  10.2% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  20.1% {
    opacity: 1;
  }
  20.6% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  30.1% {
    opacity: 1;
  }
  30.5% {
    opacity: 1;
  }
  30.6% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  45.1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  57.1% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  60.1% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  65.1% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  75.1% {
    opacity: 0;
  }
  77% {
    opacity: 0;
  }
  77.1% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  85.1% {
    opacity: 0;
  }
  86% {
    opacity: 0;
  }
  86.1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes animotion-text-3d-pop {
  from {
    text-shadow: 0 0 0 transparent;
    transform: translate3d(0, 0, 0);
  }
  to {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2),
                 2px 2px 0 rgba(0, 0, 0, 0.15),
                 3px 3px 0 rgba(0, 0, 0, 0.1),
                 4px 4px 0 rgba(0, 0, 0, 0.05),
                 5px 5px 10px rgba(0, 0, 0, 0.1);
    transform: translate3d(-3px, -3px, 0);
  }
}

@keyframes animotion-text-wave-color {
  0%, 100% {
    color: inherit;
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(0, -5px, 0);
  }
  50% {
    transform: translate3d(0, 0, 0);
  }
}


/* ==========================================================================
   14. BONUS BACKGROUND ANIMATIONS (10)
   ========================================================================== */

@keyframes animotion-gradient-rotate {
  from {
    filter: hue-rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes animotion-shimmer-bg {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes animotion-wave-gradient {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 50% 100%;
  }
  50% {
    background-position: 100% 0%;
  }
  75% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@keyframes animotion-color-pulse-bg {
  0%, 100% {
    filter: saturate(1) brightness(1);
  }
  50% {
    filter: saturate(1.5) brightness(1.2);
  }
}

@keyframes animotion-stripe-slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 50px 50px;
  }
}

@keyframes animotion-dot-expand {
  0%, 100% {
    background-size: 10px 10px;
    opacity: 0.3;
  }
  50% {
    background-size: 20px 20px;
    opacity: 0.6;
  }
}

@keyframes animotion-morph-blob {
  0%, 100% {
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }
  25% {
    border-radius: 40% 60% 70% 30% / 60% 40% 60% 40%;
  }
  50% {
    border-radius: 60% 40% 30% 70% / 40% 60% 40% 60%;
  }
  75% {
    border-radius: 30% 70% 60% 40% / 70% 30% 70% 30%;
  }
}

@keyframes animotion-pulse-glow-bg {
  0%, 100% {
    box-shadow: inset 0 0 30px rgba(128, 128, 255, 0.1);
  }
  50% {
    box-shadow: inset 0 0 60px rgba(128, 128, 255, 0.3);
  }
}

@keyframes animotion-diagonal-sweep {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 200% 200%;
  }
}

@keyframes animotion-kaleidoscope {
  from {
    transform: rotate(0deg);
    filter: hue-rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    filter: hue-rotate(360deg);
  }
}


/* ==========================================================================
   15. BONUS BUTTON ANIMATIONS (10)
   ========================================================================== */

@keyframes animotion-btn-bounce-in {
  0% {
    transform: scale3d(0.3, 0.3, 1);
    opacity: 0;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
  70% {
    transform: scale3d(0.9, 0.9, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}

@keyframes animotion-btn-shake {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  20%, 60% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 80% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes animotion-btn-jelly {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.2, 0.8, 1);
  }
  40% {
    transform: scale3d(0.8, 1.2, 1);
  }
  50% {
    transform: scale3d(1.1, 0.9, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.03, 0.97, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes animotion-btn-glow-border {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.3);
  }
}

@keyframes animotion-btn-underline-expand {
  from {
    background-size: 0% 2px;
    background-position: center bottom;
  }
  to {
    background-size: 100% 2px;
    background-position: center bottom;
  }
}

@keyframes animotion-btn-color-cycle {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes animotion-btn-icon-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animotion-btn-text-slide-up {
  from {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes animotion-btn-shadow-grow {
  from {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  to {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  }
}

@keyframes animotion-btn-highlight {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}


/* ==========================================================================
   16. BONUS CARD ANIMATIONS (8)
   ========================================================================== */

@keyframes animotion-card-toss {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: translate3d(300px, -200px, 0) rotate(30deg);
    opacity: 0;
  }
}

@keyframes animotion-card-flip-x {
  from {
    transform: perspective(1000px) rotateX(0deg);
  }
  to {
    transform: perspective(1000px) rotateX(180deg);
  }
}

@keyframes animotion-card-zoom-reveal {
  from {
    opacity: 0;
    transform: scale(0.5);
    clip-path: circle(0% at 50% 50%);
  }
  to {
    opacity: 1;
    transform: scale(1);
    clip-path: circle(100% at 50% 50%);
  }
}

@keyframes animotion-card-perspective-left {
  from {
    transform: perspective(800px) rotateY(30deg);
  }
  to {
    transform: perspective(800px) rotateY(0deg);
  }
}

@keyframes animotion-card-perspective-right {
  from {
    transform: perspective(800px) rotateY(-30deg);
  }
  to {
    transform: perspective(800px) rotateY(0deg);
  }
}

@keyframes animotion-card-float-shadow {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: translate3d(0, -10px, 0);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.15);
  }
}

@keyframes animotion-card-stamp {
  0% {
    opacity: 0;
    transform: scale(3) rotate(-15deg);
  }
  50% {
    opacity: 1;
    transform: scale(0.95) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes animotion-card-curtain-reveal {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}


/* ==========================================================================
   17. BONUS LOADERS (10)
   ========================================================================== */

@keyframes animotion-dot-chase {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animotion-ring-expand {
  0% {
    transform: scale(0.5);
    opacity: 1;
    border-width: 4px;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
    border-width: 1px;
  }
}

@keyframes animotion-cube-fold {
  0% {
    transform: perspective(200px) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: perspective(200px) rotateX(90deg) rotateY(0deg);
  }
  50% {
    transform: perspective(200px) rotateX(90deg) rotateY(90deg);
  }
  75% {
    transform: perspective(200px) rotateX(0deg) rotateY(90deg);
  }
  100% {
    transform: perspective(200px) rotateX(0deg) rotateY(0deg);
  }
}

@keyframes animotion-dot-grid-fade {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

@keyframes animotion-bar-swing {
  0%, 100% {
    transform: rotate(-30deg);
    transform-origin: top center;
  }
  50% {
    transform: rotate(30deg);
    transform-origin: top center;
  }
}

@keyframes animotion-pulse-ring-loader {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes animotion-square-flip {
  0% {
    transform: perspective(200px) rotateX(0deg);
  }
  50% {
    transform: perspective(200px) rotateX(180deg);
  }
  100% {
    transform: perspective(200px) rotateX(360deg);
  }
}

@keyframes animotion-zigzag-loader {
  0% {
    transform: translate3d(-10px, 0, 0);
  }
  25% {
    transform: translate3d(0, -10px, 0);
  }
  50% {
    transform: translate3d(10px, 0, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(-10px, 0, 0);
  }
}

@keyframes animotion-stretch-bar {
  0%, 100% {
    transform: scaleX(0.3);
  }
  50% {
    transform: scaleX(1);
  }
}

@keyframes animotion-breathing-circle {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}


/* ==========================================================================
   18. BONUS NAVIGATION (5)
   ========================================================================== */

@keyframes animotion-nav-underline-bounce {
  from {
    transform: scaleX(0);
    transform-origin: center;
  }
  70% {
    transform: scaleX(1.1);
  }
  to {
    transform: scaleX(1);
    transform-origin: center;
  }
}

@keyframes animotion-nav-slide-up {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes animotion-nav-icon-bounce {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes animotion-nav-bg-sweep {
  from {
    background-size: 0% 100%;
    background-position: left center;
  }
  to {
    background-size: 100% 100%;
    background-position: left center;
  }
}

@keyframes animotion-nav-stagger-in {
  from {
    opacity: 0;
    transform: translate3d(0, -15px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ==========================================================================
   CATEGORY 9: FORM / INPUT ANIMATIONS (30)
   ========================================================================== */

   @keyframes animotion-labelFloat {
    0% {
      transform: translateY(0);
      font-size: 1em;
      opacity: 0.6;
    }
    100% {
      transform: translateY(-1.6em);
      font-size: 0.75em;
      opacity: 1;
    }
  }
  
  @keyframes animotion-inputGlowFocus {
    0% {
      box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
    }
    50% {
      box-shadow: 0 0 8px 3px rgba(66, 133, 244, 0.4);
    }
    100% {
      box-shadow: 0 0 4px 2px rgba(66, 133, 244, 0.25);
    }
  }
  
  @keyframes animotion-inputShakeError {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-4px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(4px);
    }
  }
  
  @keyframes animotion-inputSuccessBorder {
    0% {
      border-color: #ccc;
      box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
    50% {
      border-color: #4caf50;
      box-shadow: 0 0 8px 2px rgba(76, 175, 80, 0.3);
    }
    100% {
      border-color: #4caf50;
      box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
  }
  
  @keyframes animotion-checkboxDraw {
    0% {
      stroke-dashoffset: 24;
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    100% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
  }
  
  @keyframes animotion-checkboxScalePop {
    0% {
      transform: scale(1);
    }
    30% {
      transform: scale(0.85);
    }
    60% {
      transform: scale(1.15);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes animotion-radioFill {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    50% {
      transform: scale(1.3);
      opacity: 0.7;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-radioPing {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.5);
    }
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(66, 133, 244, 0);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
    }
  }
  
  @keyframes animotion-toggleSlide {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(24px);
    }
  }
  
  @keyframes animotion-toggleMorph {
    0% {
      border-radius: 50%;
      transform: translateX(0) scale(1);
    }
    50% {
      border-radius: 4px;
      transform: translateX(12px) scaleX(1.4);
    }
    100% {
      border-radius: 50%;
      transform: translateX(24px) scale(1);
    }
  }
  
  @keyframes animotion-searchBarExpand {
    0% {
      width: 40px;
      opacity: 0.7;
    }
    100% {
      width: 260px;
      opacity: 1;
    }
  }
  
  @keyframes animotion-passwordReveal {
    0% {
      clip-path: inset(0 100% 0 0);
      opacity: 0;
    }
    100% {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-rangeFill {
    0% {
      transform: scaleX(0);
      transform-origin: left;
    }
    100% {
      transform: scaleX(1);
      transform-origin: left;
    }
  }
  
  @keyframes animotion-formProgressSteps {
    0% {
      transform: scaleX(0);
      transform-origin: left;
    }
    25% {
      transform: scaleX(0.25);
    }
    50% {
      transform: scaleX(0.5);
    }
    75% {
      transform: scaleX(0.75);
    }
    100% {
      transform: scaleX(1);
    }
  }
  
  @keyframes animotion-selectSlideOpen {
    0% {
      transform: scaleY(0);
      transform-origin: top;
      opacity: 0;
    }
    80% {
      transform: scaleY(1.03);
      opacity: 1;
    }
    100% {
      transform: scaleY(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-inputBorderFocus {
    0% {
      transform: scaleX(0);
    }
    100% {
      transform: scaleX(1);
    }
  }
  
  @keyframes animotion-inputLabelShrink {
    0% {
      transform: translateY(0) scale(1);
    }
    100% {
      transform: translateY(-18px) scale(0.75);
    }
  }
  
  @keyframes animotion-inputRipple {
    0% {
      transform: scale(0);
      opacity: 0.5;
    }
    100% {
      transform: scale(4);
      opacity: 0;
    }
  }
  
  @keyframes animotion-inputHighlight {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  
  @keyframes animotion-inputUnderline {
    0% {
      transform: scaleX(0);
      transform-origin: center;
    }
    100% {
      transform: scaleX(1);
      transform-origin: center;
    }
  }
  
  @keyframes animotion-inputFill {
    0% {
      background-size: 0% 100%;
    }
    100% {
      background-size: 100% 100%;
    }
  }
  
  @keyframes animotion-formStepSlide {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-inputCountUp {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-inputTagPop {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    60% {
      transform: scale(1.15);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-inputAutoFill {
    0% {
      clip-path: inset(0 100% 0 0);
    }
    100% {
      clip-path: inset(0 0 0 0);
    }
  }
  
  @keyframes animotion-selectRotateOpen {
    0% {
      transform: perspective(600px) rotateX(-90deg);
      transform-origin: top center;
      opacity: 0;
    }
    100% {
      transform: perspective(600px) rotateX(0deg);
      transform-origin: top center;
      opacity: 1;
    }
  }
  
  @keyframes animotion-textareaGrow {
    0% {
      max-height: 48px;
    }
    100% {
      max-height: 300px;
    }
  }
  
  @keyframes animotion-inputIconSlide {
    0% {
      transform: translateX(-20px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-formValidateShake {
    0%, 100% {
      transform: translateX(0);
      border-color: #e53935;
    }
    15%, 45%, 75% {
      transform: translateX(-6px);
    }
    30%, 60%, 90% {
      transform: translateX(6px);
    }
  }
  
  @keyframes animotion-formSuccessGlow {
    0% {
      box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
      border-color: #ccc;
    }
    50% {
      box-shadow: 0 0 12px 4px rgba(76, 175, 80, 0.35);
      border-color: #4caf50;
    }
    100% {
      box-shadow: 0 0 4px 1px rgba(76, 175, 80, 0.15);
      border-color: #4caf50;
    }
  }
  
  /* ==========================================================================
     CATEGORY 10: 3D TRANSFORM ANIMATIONS (35)
     ========================================================================== */
  
  @keyframes animotion-rotateXAxis {
    0% {
      transform: perspective(800px) rotateX(0deg);
    }
    100% {
      transform: perspective(800px) rotateX(360deg);
    }
  }
  
  @keyframes animotion-rotateYAxis {
    0% {
      transform: perspective(800px) rotateY(0deg);
    }
    100% {
      transform: perspective(800px) rotateY(360deg);
    }
  }
  
  @keyframes animotion-rotateZAxis {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  
  @keyframes animotion-fullCubeSpinAnim {
    0% {
      transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    }
    25% {
      transform: perspective(800px) rotateX(90deg) rotateY(0deg);
    }
    50% {
      transform: perspective(800px) rotateX(90deg) rotateY(90deg);
    }
    75% {
      transform: perspective(800px) rotateX(180deg) rotateY(90deg);
    }
    100% {
      transform: perspective(800px) rotateX(180deg) rotateY(180deg);
    }
  }
  
  @keyframes animotion-cardFlipFrontBack {
    0% {
      transform: perspective(1000px) rotateY(0deg);
    }
    100% {
      transform: perspective(1000px) rotateY(180deg);
    }
  }
  
  @keyframes animotion-perspectiveTilt {
    0% {
      transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    }
    25% {
      transform: perspective(800px) rotateX(5deg) rotateY(10deg);
    }
    50% {
      transform: perspective(800px) rotateX(-5deg) rotateY(-10deg);
    }
    75% {
      transform: perspective(800px) rotateX(3deg) rotateY(-5deg);
    }
    100% {
      transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    }
  }
  
  @keyframes animotion-textExtrude3D {
    0% {
      text-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
      transform: perspective(500px) translateZ(0);
    }
    100% {
      text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.2),
        2px 2px 0 rgba(0, 0, 0, 0.15),
        3px 3px 0 rgba(0, 0, 0, 0.1),
        4px 4px 0 rgba(0, 0, 0, 0.05);
      transform: perspective(500px) translateZ(20px);
    }
  }
  
  @keyframes animotion-buttonPress3D {
    0% {
      transform: perspective(600px) translateZ(0) scale(1);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }
    50% {
      transform: perspective(600px) translateZ(-10px) scale(0.97);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    100% {
      transform: perspective(600px) translateZ(0) scale(1);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }
  }
  
  @keyframes animotion-foldFromTop {
    0% {
      transform: perspective(800px) rotateX(-90deg);
      transform-origin: top center;
      opacity: 0;
    }
    60% {
      transform: perspective(800px) rotateX(5deg);
      opacity: 1;
    }
    100% {
      transform: perspective(800px) rotateX(0deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-sphereIllusion {
    0% {
      transform: perspective(600px) rotateY(0deg) rotateX(0deg);
      border-radius: 50%;
    }
    25% {
      transform: perspective(600px) rotateY(90deg) rotateX(15deg);
    }
    50% {
      transform: perspective(600px) rotateY(180deg) rotateX(0deg);
    }
    75% {
      transform: perspective(600px) rotateY(270deg) rotateX(-15deg);
    }
    100% {
      transform: perspective(600px) rotateY(360deg) rotateX(0deg);
    }
  }
  
  @keyframes animotion-cylinderSpin {
    0% {
      transform: perspective(800px) rotateY(0deg) scaleX(0.85);
    }
    25% {
      transform: perspective(800px) rotateY(90deg) scaleX(1);
    }
    50% {
      transform: perspective(800px) rotateY(180deg) scaleX(0.85);
    }
    75% {
      transform: perspective(800px) rotateY(270deg) scaleX(1);
    }
    100% {
      transform: perspective(800px) rotateY(360deg) scaleX(0.85);
    }
  }
  
  @keyframes animotion-bookPageOpen {
    0% {
      transform: perspective(1200px) rotateY(0deg);
      transform-origin: left center;
    }
    100% {
      transform: perspective(1200px) rotateY(-160deg);
      transform-origin: left center;
    }
  }
  
  @keyframes animotion-doorOpen3D {
    0% {
      transform: perspective(1200px) rotateY(0deg);
      transform-origin: left center;
    }
    100% {
      transform: perspective(1200px) rotateY(-105deg);
      transform-origin: left center;
    }
  }
  
  @keyframes animotion-diceRoll {
    0% {
      transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
      transform: perspective(600px) rotateX(90deg) rotateY(45deg) rotateZ(0deg);
    }
    50% {
      transform: perspective(600px) rotateX(180deg) rotateY(90deg) rotateZ(45deg);
    }
    75% {
      transform: perspective(600px) rotateX(270deg) rotateY(135deg) rotateZ(45deg);
    }
    100% {
      transform: perspective(600px) rotateX(360deg) rotateY(180deg) rotateZ(0deg);
    }
  }
  
  @keyframes animotion-panoramaSpin {
    0% {
      transform: perspective(1000px) rotateY(0deg);
    }
    100% {
      transform: perspective(1000px) rotateY(360deg);
    }
  }
  
  @keyframes animotion-carouselSpin {
    0% {
      transform: perspective(1200px) rotateY(0deg) translateZ(250px);
    }
    100% {
      transform: perspective(1200px) rotateY(360deg) translateZ(250px);
    }
  }
  
  @keyframes animotion-prismRotate {
    0% {
      transform: perspective(800px) rotateY(0deg) rotateX(15deg);
    }
    33% {
      transform: perspective(800px) rotateY(120deg) rotateX(15deg);
    }
    66% {
      transform: perspective(800px) rotateY(240deg) rotateX(15deg);
    }
    100% {
      transform: perspective(800px) rotateY(360deg) rotateX(15deg);
    }
  }
  
  @keyframes animotion-pyramidSpin {
    0% {
      transform: perspective(800px) rotateY(0deg) rotateX(20deg);
    }
    100% {
      transform: perspective(800px) rotateY(360deg) rotateX(20deg);
    }
  }
  
  @keyframes animotion-helixTwist {
    0% {
      transform: perspective(800px) rotateY(0deg) rotateZ(0deg) translateY(0);
    }
    25% {
      transform: perspective(800px) rotateY(90deg) rotateZ(90deg) translateY(-10px);
    }
    50% {
      transform: perspective(800px) rotateY(180deg) rotateZ(180deg) translateY(0);
    }
    75% {
      transform: perspective(800px) rotateY(270deg) rotateZ(270deg) translateY(10px);
    }
    100% {
      transform: perspective(800px) rotateY(360deg) rotateZ(360deg) translateY(0);
    }
  }
  
  @keyframes animotion-spiralDescend {
    0% {
      transform: perspective(800px) rotateY(0deg) translateY(-40px) scale(0.5);
      opacity: 0;
    }
    50% {
      transform: perspective(800px) rotateY(360deg) translateY(0) scale(0.8);
      opacity: 0.8;
    }
    100% {
      transform: perspective(800px) rotateY(720deg) translateY(40px) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-orbitalPath {
    0% {
      transform: perspective(800px) rotateZ(0deg) translateX(80px) rotateZ(0deg);
    }
    100% {
      transform: perspective(800px) rotateZ(360deg) translateX(80px) rotateZ(-360deg);
    }
  }
  
  @keyframes animotion-swingDoor {
    0% {
      transform: perspective(1000px) rotateY(0deg);
      transform-origin: left center;
    }
    30% {
      transform: perspective(1000px) rotateY(-70deg);
    }
    60% {
      transform: perspective(1000px) rotateY(-40deg);
    }
    80% {
      transform: perspective(1000px) rotateY(-55deg);
    }
    100% {
      transform: perspective(1000px) rotateY(-50deg);
    }
  }
  
  @keyframes animotion-flipBoard {
    0% {
      transform: perspective(800px) rotateX(0deg);
      transform-origin: bottom center;
    }
    100% {
      transform: perspective(800px) rotateX(-180deg);
      transform-origin: bottom center;
    }
  }
  
  @keyframes animotion-cubeUnfold {
    0% {
      transform: perspective(800px) rotateX(0deg) rotateY(0deg);
      opacity: 1;
    }
    50% {
      transform: perspective(800px) rotateX(90deg) rotateY(0deg);
      opacity: 0.8;
    }
    100% {
      transform: perspective(800px) rotateX(90deg) rotateY(90deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-tunnelZoom {
    0% {
      transform: perspective(600px) translateZ(-300px) scale(0.5);
      opacity: 0;
    }
    100% {
      transform: perspective(600px) translateZ(0) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-perspectiveZoom {
    0% {
      transform: perspective(1000px) translateZ(-200px);
      opacity: 0.5;
    }
    100% {
      transform: perspective(1000px) translateZ(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-tiltShift {
    0% {
      transform: perspective(1000px) rotateX(0deg) translateY(0);
    }
    50% {
      transform: perspective(1000px) rotateX(8deg) translateY(-5px);
    }
    100% {
      transform: perspective(1000px) rotateX(0deg) translateY(0);
    }
  }
  
  @keyframes animotion-rotateInPlace {
    0% {
      transform: perspective(800px) rotate3d(1, 1, 0, 0deg);
    }
    100% {
      transform: perspective(800px) rotate3d(1, 1, 0, 360deg);
    }
  }
  
  @keyframes animotion-wobble3D {
    0%, 100% {
      transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    }
    15% {
      transform: perspective(800px) rotateX(8deg) rotateY(-8deg);
    }
    30% {
      transform: perspective(800px) rotateX(-6deg) rotateY(6deg);
    }
    45% {
      transform: perspective(800px) rotateX(4deg) rotateY(-4deg);
    }
    60% {
      transform: perspective(800px) rotateX(-3deg) rotateY(3deg);
    }
    75% {
      transform: perspective(800px) rotateX(2deg) rotateY(-2deg);
    }
  }
  
  @keyframes animotion-bounce3D {
    0%, 100% {
      transform: perspective(800px) translateY(0) translateZ(0);
    }
    30% {
      transform: perspective(800px) translateY(-30px) translateZ(20px);
    }
    50% {
      transform: perspective(800px) translateY(0) translateZ(0);
    }
    70% {
      transform: perspective(800px) translateY(-15px) translateZ(10px);
    }
  }
  
  @keyframes animotion-swing3D {
    0%, 100% {
      transform: perspective(800px) rotateX(0deg);
      transform-origin: top center;
    }
    25% {
      transform: perspective(800px) rotateX(25deg);
    }
    50% {
      transform: perspective(800px) rotateX(0deg);
    }
    75% {
      transform: perspective(800px) rotateX(-25deg);
    }
  }
  
  @keyframes animotion-pendulum3D {
    0%, 100% {
      transform: perspective(800px) rotateZ(30deg);
      transform-origin: top center;
    }
    50% {
      transform: perspective(800px) rotateZ(-30deg);
      transform-origin: top center;
    }
  }
  
  @keyframes animotion-seesaw3D {
    0%, 100% {
      transform: perspective(800px) rotateZ(-10deg);
    }
    50% {
      transform: perspective(800px) rotateZ(10deg);
    }
  }
  
  @keyframes animotion-ferrisWheel {
    0% {
      transform: perspective(1000px) rotateZ(0deg) translateY(0);
    }
    25% {
      transform: perspective(1000px) rotateZ(90deg) translateY(-50px);
    }
    50% {
      transform: perspective(1000px) rotateZ(180deg) translateY(0);
    }
    75% {
      transform: perspective(1000px) rotateZ(270deg) translateY(50px);
    }
    100% {
      transform: perspective(1000px) rotateZ(360deg) translateY(0);
    }
  }
  
  @keyframes animotion-windmill3D {
    0% {
      transform: perspective(800px) rotateZ(0deg) rotateY(10deg);
    }
    100% {
      transform: perspective(800px) rotateZ(360deg) rotateY(10deg);
    }
  }
  
  /* ==========================================================================
     CATEGORY 11: CSS FILTER ANIMATIONS (25)
     ========================================================================== */
  
  @keyframes animotion-blurIn {
    0% {
      filter: blur(20px);
      opacity: 0;
    }
    100% {
      filter: blur(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-unblurHover {
    0% {
      filter: blur(4px);
    }
    100% {
      filter: blur(0);
    }
  }
  
  @keyframes animotion-grayscaleToColor {
    0% {
      filter: grayscale(100%);
    }
    100% {
      filter: grayscale(0%);
    }
  }
  
  @keyframes animotion-sepiaFlash {
    0%, 100% {
      filter: sepia(0%);
    }
    50% {
      filter: sepia(100%);
    }
  }
  
  @keyframes animotion-saturateBoost {
    0% {
      filter: saturate(50%);
    }
    50% {
      filter: saturate(200%);
    }
    100% {
      filter: saturate(100%);
    }
  }
  
  @keyframes animotion-brightnessFlash {
    0%, 100% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(1.8);
    }
  }
  
  @keyframes animotion-contrastPulse {
    0%, 100% {
      filter: contrast(100%);
    }
    50% {
      filter: contrast(180%);
    }
  }
  
  @keyframes animotion-hueRotateCycle {
    0% {
      filter: hue-rotate(0deg);
    }
    100% {
      filter: hue-rotate(360deg);
    }
  }
  
  @keyframes animotion-invertFlash {
    0%, 100% {
      filter: invert(0%);
    }
    50% {
      filter: invert(100%);
    }
  }
  
  @keyframes animotion-dropShadowGrow {
    0% {
      filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
    50% {
      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    }
    100% {
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    }
  }
  
  @keyframes animotion-blurPulse {
    0%, 100% {
      filter: blur(0);
    }
    50% {
      filter: blur(4px);
    }
  }
  
  @keyframes animotion-vintageFilter {
    0% {
      filter: sepia(0%) contrast(100%) brightness(100%);
    }
    100% {
      filter: sepia(40%) contrast(85%) brightness(110%) saturate(75%);
    }
  }
  
  @keyframes animotion-nightVision {
    0% {
      filter: brightness(1) contrast(1) saturate(1);
    }
    100% {
      filter: brightness(1.5) contrast(1.4) saturate(0) hue-rotate(90deg);
    }
  }
  
  @keyframes animotion-thermalVision {
    0% {
      filter: hue-rotate(0deg) saturate(1) contrast(1);
    }
    33% {
      filter: hue-rotate(-30deg) saturate(3) contrast(1.5);
    }
    66% {
      filter: hue-rotate(30deg) saturate(3) contrast(1.5);
    }
    100% {
      filter: hue-rotate(0deg) saturate(3) contrast(1.8);
    }
  }
  
  @keyframes animotion-xrayEffect {
    0% {
      filter: invert(0%) brightness(1) contrast(1);
    }
    100% {
      filter: invert(100%) brightness(1.3) contrast(1.5) grayscale(100%);
    }
  }
  
  @keyframes animotion-duotoneShift {
    0% {
      filter: grayscale(100%) brightness(1) contrast(1.2) sepia(100%) hue-rotate(0deg) saturate(3);
    }
    50% {
      filter: grayscale(100%) brightness(1) contrast(1.2) sepia(100%) hue-rotate(180deg) saturate(3);
    }
    100% {
      filter: grayscale(100%) brightness(1) contrast(1.2) sepia(100%) hue-rotate(360deg) saturate(3);
    }
  }
  
  @keyframes animotion-colorPop {
    0% {
      filter: grayscale(100%) saturate(0);
    }
    60% {
      filter: grayscale(0%) saturate(200%);
    }
    100% {
      filter: grayscale(0%) saturate(100%);
    }
  }
  
  @keyframes animotion-fadeToGrayscale {
    0% {
      filter: grayscale(0%);
      opacity: 1;
    }
    100% {
      filter: grayscale(100%);
      opacity: 0.7;
    }
  }
  
  @keyframes animotion-bloomEffect {
    0%, 100% {
      filter: brightness(1) blur(0);
    }
    50% {
      filter: brightness(1.4) blur(2px);
    }
  }
  
  @keyframes animotion-softFocus {
    0% {
      filter: blur(0) brightness(1);
    }
    100% {
      filter: blur(1.5px) brightness(1.1) contrast(0.9);
    }
  }
  
  @keyframes animotion-crystalRefract {
    0% {
      filter: hue-rotate(0deg) brightness(1) saturate(1.5);
    }
    25% {
      filter: hue-rotate(60deg) brightness(1.2) saturate(2);
    }
    50% {
      filter: hue-rotate(180deg) brightness(1.1) saturate(1.8);
    }
    75% {
      filter: hue-rotate(280deg) brightness(1.3) saturate(2);
    }
    100% {
      filter: hue-rotate(360deg) brightness(1) saturate(1.5);
    }
  }
  
  @keyframes animotion-prismaticShift {
    0% {
      filter: hue-rotate(0deg) saturate(150%) brightness(1.1);
    }
    33% {
      filter: hue-rotate(120deg) saturate(200%) brightness(1.2);
    }
    66% {
      filter: hue-rotate(240deg) saturate(150%) brightness(1.1);
    }
    100% {
      filter: hue-rotate(360deg) saturate(150%) brightness(1.1);
    }
  }
  
  @keyframes animotion-neonFilter {
    0%, 100% {
      filter: brightness(1) contrast(1) saturate(1);
    }
    50% {
      filter: brightness(1.5) contrast(1.5) saturate(2.5);
    }
  }
  
  @keyframes animotion-retroFilter {
    0% {
      filter: sepia(0%) contrast(100%) brightness(100%) saturate(100%);
    }
    100% {
      filter: sepia(30%) contrast(90%) brightness(105%) saturate(80%) hue-rotate(-10deg);
    }
  }
  
  @keyframes animotion-glitchFilter {
    0%, 100% {
      filter: hue-rotate(0deg) saturate(1);
    }
    10% {
      filter: hue-rotate(90deg) saturate(5) brightness(1.5);
    }
    12% {
      filter: hue-rotate(0deg) saturate(1);
    }
    50% {
      filter: hue-rotate(-90deg) saturate(4) invert(80%);
    }
    52% {
      filter: hue-rotate(0deg) saturate(1) invert(0%);
    }
    80% {
      filter: hue-rotate(180deg) saturate(3) contrast(2);
    }
    82% {
      filter: hue-rotate(0deg) saturate(1) contrast(1);
    }
  }
  
  /* ==========================================================================
     CATEGORY 12: MICRO-INTERACTIONS (40)
     ========================================================================== */
  
  @keyframes animotion-likeBounce {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(1.3);
    }
    40% {
      transform: scale(0.9);
    }
    60% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes animotion-addToCart {
    0% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    30% {
      transform: translateY(-20px) scale(0.6);
      opacity: 0.8;
    }
    60% {
      transform: translateY(0) translateX(60px) scale(0.4);
      opacity: 0.5;
    }
    100% {
      transform: translateY(0) translateX(60px) scale(0);
      opacity: 0;
    }
  }
  
  @keyframes animotion-notificationPop {
    0% {
      transform: scale(0) translateY(-10px);
      opacity: 0;
    }
    60% {
      transform: scale(1.15) translateY(0);
      opacity: 1;
    }
    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-switchToggle {
    0% {
      transform: translateX(0);
    }
    60% {
      transform: translateX(26px);
    }
    80% {
      transform: translateX(22px);
    }
    100% {
      transform: translateX(24px);
    }
  }
  
  @keyframes animotion-checkmarkDraw {
    0% {
      stroke-dashoffset: 30;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  
  @keyframes animotion-starRate {
    0% {
      transform: scale(1) rotate(0deg);
      opacity: 0.4;
    }
    50% {
      transform: scale(1.4) rotate(36deg);
      opacity: 1;
    }
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-progressComplete {
    0% {
      transform: scaleX(0);
      transform-origin: left;
    }
    80% {
      transform: scaleX(1.02);
    }
    100% {
      transform: scaleX(1);
    }
  }
  
  @keyframes animotion-dragStart {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      opacity: 1;
    }
    100% {
      transform: scale(1.05);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      opacity: 0.9;
    }
  }
  
  @keyframes animotion-dragEnd {
    0% {
      transform: scale(1.05);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
    60% {
      transform: scale(0.98);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
  }
  
  @keyframes animotion-pinchZoom {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.6);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes animotion-swipeHint {
    0%, 100% {
      transform: translateX(0);
      opacity: 1;
    }
    50% {
      transform: translateX(-30px);
      opacity: 0.5;
    }
  }
  
  @keyframes animotion-pullToRefresh {
    0% {
      transform: translateY(-40px) rotate(0deg);
      opacity: 0;
    }
    50% {
      transform: translateY(0) rotate(180deg);
      opacity: 1;
    }
    100% {
      transform: translateY(0) rotate(360deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-doubleTapZoom {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(2);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes animotion-longPressGlow {
    0% {
      box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
    }
    50% {
      box-shadow: 0 0 0 12px rgba(66, 133, 244, 0.2);
    }
    100% {
      box-shadow: 0 0 0 20px rgba(66, 133, 244, 0);
    }
  }
  
  @keyframes animotion-tapFeedback {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(0.95);
      opacity: 0.7;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-menuItemHover {
    0% {
      transform: translateX(0);
      background-color: transparent;
    }
    100% {
      transform: translateX(6px);
      background-color: rgba(0, 0, 0, 0.04);
    }
  }
  
  @keyframes animotion-tooltipFade {
    0% {
      transform: translateY(4px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-chipRemove {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(0.8);
      opacity: 0.5;
    }
    100% {
      transform: scale(0);
      opacity: 0;
    }
  }
  
  @keyframes animotion-badgeCount {
    0% {
      transform: scale(0);
    }
    60% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes animotion-fabOpen {
    0% {
      transform: scale(0) rotate(-45deg);
      opacity: 0;
    }
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-fabClose {
    0% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
    100% {
      transform: scale(0) rotate(45deg);
      opacity: 0;
    }
  }
  
  @keyframes animotion-snackbarSlide {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-snackbarDismiss {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  
  @keyframes animotion-modalOpen {
    0% {
      transform: scale(0.8) translateY(20px);
      opacity: 0;
    }
    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-modalClose {
    0% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
    100% {
      transform: scale(0.8) translateY(20px);
      opacity: 0;
    }
  }
  
  @keyframes animotion-accordionExpand {
    0% {
      max-height: 0;
      opacity: 0;
    }
    100% {
      max-height: 500px;
      opacity: 1;
    }
  }
  
  @keyframes animotion-accordionCollapse {
    0% {
      max-height: 500px;
      opacity: 1;
    }
    100% {
      max-height: 0;
      opacity: 0;
    }
  }
  
  @keyframes animotion-tabSwitch {
    0% {
      opacity: 0;
      transform: translateY(8px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes animotion-carouselSlide {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-stepperAdvance {
    0% {
      transform: scale(0.5);
      opacity: 0.3;
    }
    60% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-ratingFill {
    0% {
      transform: scale(0) rotate(-30deg);
      opacity: 0;
    }
    70% {
      transform: scale(1.2) rotate(5deg);
      opacity: 1;
    }
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-bookmarkFlip {
    0% {
      transform: perspective(600px) rotateY(0deg);
    }
    50% {
      transform: perspective(600px) rotateY(90deg);
    }
    100% {
      transform: perspective(600px) rotateY(0deg);
    }
  }
  
  @keyframes animotion-shareExpand {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-commentSlide {
    0% {
      transform: translateX(-30px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-replyIndent {
    0% {
      transform: translateX(0);
      opacity: 0;
    }
    100% {
      transform: translateX(24px);
      opacity: 1;
    }
  }
  
  @keyframes animotion-emojiReact {
    0% {
      transform: scale(0) translateY(10px);
      opacity: 0;
    }
    50% {
      transform: scale(1.4) translateY(-10px);
      opacity: 1;
    }
    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-voiceWave {
    0%, 100% {
      transform: scaleY(0.4);
    }
    25% {
      transform: scaleY(1);
    }
    50% {
      transform: scaleY(0.6);
    }
    75% {
      transform: scaleY(0.9);
    }
  }
  
  @keyframes animotion-readIndicator {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-onlineStatus {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6);
    }
    50% {
      box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
    }
  }
  
  @keyframes animotion-typingBubble {
    0%, 80%, 100% {
      transform: translateY(0);
      opacity: 0.4;
    }
    40% {
      transform: translateY(-6px);
      opacity: 1;
    }
  }
  
  /* ==========================================================================
     CATEGORY 13: SCROLL ANIMATIONS (25)
     ========================================================================== */
  
  @keyframes animotion-scrollFadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes animotion-scrollFadeInUp {
    0% {
      opacity: 0;
      transform: translateY(40px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes animotion-scrollFadeInLeft {
    0% {
      opacity: 0;
      transform: translateX(-40px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes animotion-scrollFadeInRight {
    0% {
      opacity: 0;
      transform: translateX(40px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes animotion-scrollZoomIn {
    0% {
      opacity: 0;
      transform: scale(0.6);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes animotion-scrollSlideUp {
    0% {
      transform: translateY(80px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-scrollSlideLeft {
    0% {
      transform: translateX(-80px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-scrollRotateIn {
    0% {
      transform: rotate(-15deg) scale(0.8);
      opacity: 0;
    }
    100% {
      transform: rotate(0deg) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-scrollFlipIn {
    0% {
      transform: perspective(800px) rotateX(60deg);
      opacity: 0;
    }
    100% {
      transform: perspective(800px) rotateX(0deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-scrollBlurIn {
    0% {
      filter: blur(12px);
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      filter: blur(0);
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes animotion-scrollCountUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes animotion-scrollProgressReveal {
    0% {
      transform: scaleX(0);
      transform-origin: left;
    }
    100% {
      transform: scaleX(1);
      transform-origin: left;
    }
  }
  
  @keyframes animotion-scrollParallax {
    0% {
      transform: translateY(50px);
    }
    100% {
      transform: translateY(-50px);
    }
  }
  
  @keyframes animotion-scrollStagger {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes animotion-scrollScale {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-scrollClipReveal {
    0% {
      clip-path: inset(0 100% 0 0);
    }
    100% {
      clip-path: inset(0 0 0 0);
    }
  }
  
  @keyframes animotion-scrollTextReveal {
    0% {
      clip-path: inset(0 0 100% 0);
      transform: translateY(20px);
    }
    100% {
      clip-path: inset(0 0 0 0);
      transform: translateY(0);
    }
  }
  
  @keyframes animotion-scrollImageReveal {
    0% {
      clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
      opacity: 0;
    }
    100% {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      opacity: 1;
    }
  }
  
  @keyframes animotion-scrollCardStack {
    0% {
      transform: translateY(60px) rotate(3deg);
      opacity: 0;
    }
    100% {
      transform: translateY(0) rotate(0deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-scrollTimeline {
    0% {
      transform: scaleY(0);
      transform-origin: top;
      opacity: 0;
    }
    100% {
      transform: scaleY(1);
      transform-origin: top;
      opacity: 1;
    }
  }
  
  @keyframes animotion-scrollHorizontal {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-scrollSnap {
    0% {
      transform: translateY(30px) scale(0.95);
      opacity: 0;
    }
    70% {
      transform: translateY(-5px) scale(1.02);
      opacity: 1;
    }
    100% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-scrollRevealMask {
    0% {
      clip-path: circle(0% at 50% 50%);
    }
    100% {
      clip-path: circle(75% at 50% 50%);
    }
  }
  
  @keyframes animotion-scrollWipeIn {
    0% {
      clip-path: inset(0 0 0 100%);
      opacity: 0;
    }
    100% {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-scrollMorphIn {
    0% {
      clip-path: circle(0% at 50% 50%);
      transform: scale(0.8);
      opacity: 0;
    }
    100% {
      clip-path: circle(100% at 50% 50%);
      transform: scale(1);
      opacity: 1;
    }
  }
  
  /* ==========================================================================
     CATEGORY 14: CREATIVE / ARTISTIC (40)
     ========================================================================== */
  
  @keyframes animotion-paintSplash {
    0% {
      clip-path: circle(0% at 50% 50%);
      transform: scale(0.5) rotate(-15deg);
      opacity: 0;
    }
    40% {
      clip-path: circle(60% at 50% 50%);
      transform: scale(1.2) rotate(5deg);
      opacity: 1;
    }
    100% {
      clip-path: circle(100% at 50% 50%);
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-inkBleed {
    0% {
      clip-path: circle(0% at 50% 50%);
      filter: blur(8px);
    }
    50% {
      clip-path: circle(40% at 50% 50%);
      filter: blur(4px);
    }
    100% {
      clip-path: circle(100% at 50% 50%);
      filter: blur(0);
    }
  }
  
  @keyframes animotion-watercolor {
    0% {
      opacity: 0;
      filter: blur(20px) saturate(0);
    }
    40% {
      opacity: 0.6;
      filter: blur(10px) saturate(0.5);
    }
    100% {
      opacity: 1;
      filter: blur(0.5px) saturate(1.2);
    }
  }
  
  @keyframes animotion-paperFold {
    0% {
      transform: perspective(800px) rotateX(-90deg);
      transform-origin: top center;
      opacity: 0;
    }
    100% {
      transform: perspective(800px) rotateX(0deg);
      transform-origin: top center;
      opacity: 1;
    }
  }
  
  @keyframes animotion-origami {
    0% {
      transform: perspective(600px) rotateY(-180deg) rotateX(-20deg) scale(0.5);
      opacity: 0;
    }
    50% {
      transform: perspective(600px) rotateY(-90deg) rotateX(-10deg) scale(0.8);
      opacity: 0.6;
    }
    100% {
      transform: perspective(600px) rotateY(0deg) rotateX(0deg) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-filmBurn {
    0% {
      filter: brightness(1) saturate(1);
      opacity: 1;
    }
    15% {
      filter: brightness(3) saturate(0.5);
      opacity: 0.7;
    }
    30% {
      filter: brightness(1) saturate(1.5) sepia(40%);
      opacity: 1;
    }
    50% {
      filter: brightness(2.5) saturate(0);
      opacity: 0.6;
    }
    70% {
      filter: brightness(1.2) saturate(1.2) sepia(20%);
      opacity: 0.9;
    }
    100% {
      filter: brightness(1) saturate(1) sepia(0%);
      opacity: 1;
    }
  }
  
  @keyframes animotion-vhsTracking {
    0%, 100% {
      transform: translateX(0) skewX(0deg);
      opacity: 1;
    }
    5% {
      transform: translateX(-3px) skewX(-0.5deg);
      opacity: 0.9;
    }
    10% {
      transform: translateX(2px) skewX(0.3deg);
      opacity: 1;
    }
    30% {
      transform: translateX(0) skewX(0deg);
    }
    35% {
      transform: translateX(5px) skewX(1deg);
      opacity: 0.85;
    }
    40% {
      transform: translateX(0) skewX(0deg);
      opacity: 1;
    }
    70% {
      transform: translateX(-2px) skewX(-0.3deg);
    }
    75% {
      transform: translateX(0) skewX(0deg);
    }
  }
  
  @keyframes animotion-pixelate {
    0% {
      filter: blur(0);
    }
    50% {
      filter: blur(0) contrast(9999) brightness(0.8);
    }
    100% {
      filter: blur(0);
    }
  }
  
  @keyframes animotion-ascii {
    0% {
      filter: contrast(1000%) grayscale(100%) brightness(0.5);
      opacity: 0;
    }
    50% {
      filter: contrast(500%) grayscale(100%) brightness(0.8);
      opacity: 0.7;
    }
    100% {
      filter: contrast(100%) grayscale(0%) brightness(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-halftone {
    0% {
      filter: contrast(200%) grayscale(100%);
      transform: scale(1.5);
      opacity: 0;
    }
    100% {
      filter: contrast(100%) grayscale(0%);
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-mosaic {
    0% {
      filter: blur(10px) contrast(2);
      transform: scale(1.1);
      opacity: 0;
    }
    60% {
      filter: blur(3px) contrast(1.5);
      transform: scale(1.02);
      opacity: 0.8;
    }
    100% {
      filter: blur(0) contrast(1);
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-kaleidoscope {
    0% {
      transform: rotate(0deg) scale(1);
      filter: hue-rotate(0deg);
    }
    25% {
      transform: rotate(90deg) scale(1.1);
      filter: hue-rotate(90deg);
    }
    50% {
      transform: rotate(180deg) scale(1);
      filter: hue-rotate(180deg);
    }
    75% {
      transform: rotate(270deg) scale(1.1);
      filter: hue-rotate(270deg);
    }
    100% {
      transform: rotate(360deg) scale(1);
      filter: hue-rotate(360deg);
    }
  }
  
  @keyframes animotion-mirrorReflect {
    0% {
      transform: scaleX(1);
      opacity: 1;
    }
    48% {
      transform: scaleX(1);
      opacity: 1;
    }
    50% {
      transform: scaleX(-1);
      opacity: 0.8;
    }
    98% {
      transform: scaleX(-1);
      opacity: 1;
    }
    100% {
      transform: scaleX(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-liquidMorph {
    0% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    25% {
      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    50% {
      border-radius: 50% 60% 30% 60% / 30% 40% 70% 60%;
    }
    75% {
      border-radius: 60% 30% 60% 50% / 70% 50% 40% 30%;
    }
    100% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
  }
  
  @keyframes animotion-smokeRise {
    0% {
      transform: translateY(0) scale(1);
      opacity: 0.6;
      filter: blur(0);
    }
    100% {
      transform: translateY(-100px) scale(2.5);
      opacity: 0;
      filter: blur(8px);
    }
  }
  
  @keyframes animotion-fireFlicker {
    0%, 100% {
      transform: scaleY(1) translateY(0);
      opacity: 1;
      filter: brightness(1);
    }
    25% {
      transform: scaleY(1.1) translateY(-3px);
      opacity: 0.9;
      filter: brightness(1.2);
    }
    50% {
      transform: scaleY(0.95) translateY(-1px);
      opacity: 1;
      filter: brightness(0.9);
    }
    75% {
      transform: scaleY(1.05) translateY(-4px);
      opacity: 0.85;
      filter: brightness(1.3);
    }
  }
  
  @keyframes animotion-lightningFlash {
    0%, 100% {
      opacity: 0;
      filter: brightness(1);
    }
    5% {
      opacity: 1;
      filter: brightness(3);
    }
    10% {
      opacity: 0;
    }
    15% {
      opacity: 1;
      filter: brightness(2.5);
    }
    20% {
      opacity: 0;
    }
    25% {
      opacity: 0.8;
      filter: brightness(2);
    }
    30% {
      opacity: 0;
    }
  }
  
  @keyframes animotion-auroraWave {
    0% {
      transform: translateX(-20px) skewX(-5deg);
      filter: hue-rotate(0deg) brightness(1.2);
      opacity: 0.6;
    }
    33% {
      transform: translateX(20px) skewX(5deg);
      filter: hue-rotate(60deg) brightness(1.4);
      opacity: 0.8;
    }
    66% {
      transform: translateX(-10px) skewX(-3deg);
      filter: hue-rotate(120deg) brightness(1.1);
      opacity: 0.7;
    }
    100% {
      transform: translateX(-20px) skewX(-5deg);
      filter: hue-rotate(0deg) brightness(1.2);
      opacity: 0.6;
    }
  }
  
  @keyframes animotion-crystalGrow {
    0% {
      transform: scale(0) rotate(0deg);
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      opacity: 0;
    }
    50% {
      transform: scale(0.8) rotate(45deg);
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      opacity: 0.7;
    }
    100% {
      transform: scale(1) rotate(0deg);
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      opacity: 1;
    }
  }
  
  @keyframes animotion-iceFormation {
    0% {
      clip-path: inset(100% 0 0 0);
      filter: brightness(1.5) saturate(0.5);
      opacity: 0;
    }
    50% {
      clip-path: inset(50% 0 0 0);
      filter: brightness(1.3) saturate(0.7);
      opacity: 0.6;
    }
    100% {
      clip-path: inset(0 0 0 0);
      filter: brightness(1.1) saturate(0.8);
      opacity: 1;
    }
  }
  
  @keyframes animotion-sandFlow {
    0% {
      clip-path: inset(0 0 100% 0);
      opacity: 0;
    }
    100% {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-windBlow {
    0% {
      transform: translateX(0) skewX(0deg) rotate(0deg);
    }
    25% {
      transform: translateX(15px) skewX(5deg) rotate(2deg);
    }
    50% {
      transform: translateX(-5px) skewX(-2deg) rotate(-1deg);
    }
    75% {
      transform: translateX(10px) skewX(3deg) rotate(1deg);
    }
    100% {
      transform: translateX(0) skewX(0deg) rotate(0deg);
    }
  }
  
  @keyframes animotion-leafFall {
    0% {
      transform: translateY(-50px) translateX(0) rotate(0deg);
      opacity: 0;
    }
    25% {
      transform: translateY(25px) translateX(30px) rotate(45deg);
      opacity: 1;
    }
    50% {
      transform: translateY(100px) translateX(-10px) rotate(90deg);
    }
    75% {
      transform: translateY(175px) translateX(20px) rotate(135deg);
    }
    100% {
      transform: translateY(250px) translateX(10px) rotate(180deg);
      opacity: 0.3;
    }
  }
  
  @keyframes animotion-petalFloat {
    0% {
      transform: translateY(0) translateX(0) rotate(0deg) scale(1);
      opacity: 1;
    }
    25% {
      transform: translateY(-30px) translateX(20px) rotate(45deg) scale(1.05);
    }
    50% {
      transform: translateY(-50px) translateX(-10px) rotate(90deg) scale(1);
      opacity: 0.8;
    }
    75% {
      transform: translateY(-70px) translateX(15px) rotate(135deg) scale(0.95);
    }
    100% {
      transform: translateY(-100px) translateX(5px) rotate(180deg) scale(0.9);
      opacity: 0;
    }
  }
  
  @keyframes animotion-bubbleRise {
    0% {
      transform: translateY(0) scale(0.5);
      opacity: 0;
    }
    20% {
      opacity: 0.8;
    }
    50% {
      transform: translateY(-100px) translateX(10px) scale(0.8);
      opacity: 0.6;
    }
    100% {
      transform: translateY(-200px) translateX(-5px) scale(1);
      opacity: 0;
    }
  }
  
  @keyframes animotion-wavesCrash {
    0% {
      transform: translateX(-100%) scaleY(0.8);
    }
    50% {
      transform: translateX(0%) scaleY(1.2);
    }
    100% {
      transform: translateX(100%) scaleY(0.8);
      opacity: 0;
    }
  }
  
  @keyframes animotion-rainDrop {
    0% {
      transform: translateY(-30px) scaleY(1.5) scaleX(0.8);
      opacity: 0;
    }
    60% {
      transform: translateY(0) scaleY(1) scaleX(1);
      opacity: 1;
    }
    80% {
      transform: translateY(0) scaleY(0.5) scaleX(1.5);
      opacity: 0.6;
    }
    100% {
      transform: translateY(0) scaleY(0) scaleX(2);
      opacity: 0;
    }
  }
  
  @keyframes animotion-sparkle {
    0%, 100% {
      transform: scale(0) rotate(0deg);
      opacity: 0;
    }
    50% {
      transform: scale(1) rotate(180deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-stardust {
    0% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    50% {
      transform: translateY(-40px) scale(0.5) rotate(90deg);
      opacity: 0.6;
    }
    100% {
      transform: translateY(-80px) scale(0);
      opacity: 0;
    }
  }
  
  @keyframes animotion-cosmicDust {
    0% {
      transform: translate(0, 0) rotate(0deg);
      opacity: 0;
    }
    20% {
      opacity: 0.8;
    }
    100% {
      transform: translate(60px, -80px) rotate(180deg);
      opacity: 0;
    }
  }
  
  @keyframes animotion-galaxySpin {
    0% {
      transform: rotate(0deg) scale(1);
      filter: hue-rotate(0deg);
    }
    100% {
      transform: rotate(360deg) scale(1);
      filter: hue-rotate(360deg);
    }
  }
  
  @keyframes animotion-blackHole {
    0% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
    100% {
      transform: scale(0) rotate(720deg);
      opacity: 0;
    }
  }
  
  @keyframes animotion-wormhole {
    0% {
      transform: perspective(600px) translateZ(-500px) scale(0) rotate(0deg);
      opacity: 0;
    }
    50% {
      transform: perspective(600px) translateZ(-100px) scale(0.8) rotate(360deg);
      opacity: 0.7;
    }
    100% {
      transform: perspective(600px) translateZ(0) scale(1) rotate(720deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-timeWarp {
    0% {
      transform: skewX(0deg) skewY(0deg) scale(1);
      filter: blur(0);
    }
    30% {
      transform: skewX(10deg) skewY(5deg) scale(0.9);
      filter: blur(2px);
    }
    60% {
      transform: skewX(-8deg) skewY(-3deg) scale(1.1);
      filter: blur(1px);
    }
    100% {
      transform: skewX(0deg) skewY(0deg) scale(1);
      filter: blur(0);
    }
  }
  
  @keyframes animotion-dimensionShift {
    0% {
      transform: perspective(800px) rotateY(0deg) scaleX(1);
      opacity: 1;
    }
    25% {
      transform: perspective(800px) rotateY(90deg) scaleX(0.01);
      opacity: 0.5;
    }
    50% {
      transform: perspective(800px) rotateY(90deg) scaleX(0.01);
      opacity: 0.5;
    }
    75% {
      transform: perspective(800px) rotateY(0deg) scaleX(1);
      opacity: 1;
      filter: hue-rotate(180deg);
    }
    100% {
      transform: perspective(800px) rotateY(0deg) scaleX(1);
      opacity: 1;
      filter: hue-rotate(0deg);
    }
  }
  
  @keyframes animotion-glassShatter {
    0% {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
      transform: scale(1);
      opacity: 1;
    }
    30% {
      clip-path: polygon(10% 0%, 90% 5%, 95% 90%, 5% 95%);
      transform: scale(1.02);
      opacity: 1;
    }
    60% {
      clip-path: polygon(20% 10%, 80% 0%, 90% 80%, 10% 90%);
      transform: scale(1.05);
      opacity: 0.7;
    }
    100% {
      clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
      transform: scale(1.3);
      opacity: 0;
    }
  }
  
  @keyframes animotion-paperTear {
    0% {
      clip-path: inset(0 0 0 0);
      transform: translateX(0);
      opacity: 1;
    }
    50% {
      clip-path: inset(0 0 0 50%);
      transform: translateX(10px) rotate(2deg);
      opacity: 0.9;
    }
    100% {
      clip-path: inset(0 0 0 100%);
      transform: translateX(40px) rotate(5deg);
      opacity: 0;
    }
  }
  
  @keyframes animotion-chainReaction {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    20% {
      transform: scale(1.3);
      opacity: 1;
    }
    40% {
      transform: scale(0.9);
      opacity: 0.8;
    }
    60% {
      transform: scale(1.15);
      opacity: 0.9;
    }
    80% {
      transform: scale(0.95);
      opacity: 0.85;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-dominoFall {
    0% {
      transform: perspective(600px) rotateX(0deg);
      transform-origin: bottom center;
    }
    100% {
      transform: perspective(600px) rotateX(-90deg);
      transform-origin: bottom center;
    }
  }
  
  @keyframes animotion-rippleEffect {
    0% {
      transform: scale(0);
      opacity: 0.6;
    }
    100% {
      transform: scale(3);
      opacity: 0;
    }
  }
  
  /* ==========================================================================
     CATEGORY 15: FINTECH / FINANCE (30)
     ========================================================================== */
  
  @keyframes animotion-tickerScroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes animotion-priceUp {
    0% {
      transform: translateY(0);
      opacity: 1;
      color: inherit;
    }
    30% {
      transform: translateY(-8px);
      opacity: 0.6;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-priceDown {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    30% {
      transform: translateY(8px);
      opacity: 0.6;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-candlestickGrow {
    0% {
      transform: scaleY(0);
      transform-origin: bottom;
      opacity: 0;
    }
    60% {
      transform: scaleY(1.05);
      opacity: 1;
    }
    100% {
      transform: scaleY(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-chartLineDrawFintech {
    0% {
      stroke-dashoffset: 1000;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    100% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
  }
  
  @keyframes animotion-pieFillFintech {
    0% {
      transform: rotate(0deg);
      clip-path: polygon(50% 50%, 50% 0%, 50% 0%);
    }
    100% {
      transform: rotate(360deg);
      clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%);
    }
  }
  
  @keyframes animotion-barGrow {
    0% {
      transform: scaleY(0);
      transform-origin: bottom;
    }
    70% {
      transform: scaleY(1.03);
    }
    100% {
      transform: scaleY(1);
    }
  }
  
  @keyframes animotion-valueCounter {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-currencyFlip {
    0% {
      transform: perspective(400px) rotateY(0deg);
    }
    50% {
      transform: perspective(400px) rotateY(90deg);
    }
    100% {
      transform: perspective(400px) rotateY(0deg);
    }
  }
  
  @keyframes animotion-transactionSlide {
    0% {
      transform: translateX(-30px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-balanceUpdate {
    0% {
      transform: scale(1);
    }
    30% {
      transform: scale(1.08);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes animotion-profitGlow {
    0% {
      box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
      text-shadow: 0 0 0 rgba(76, 175, 80, 0);
    }
    50% {
      box-shadow: 0 0 15px 5px rgba(76, 175, 80, 0.3);
      text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
    }
    100% {
      box-shadow: 0 0 5px 2px rgba(76, 175, 80, 0.1);
      text-shadow: 0 0 0 rgba(76, 175, 80, 0);
    }
  }
  
  @keyframes animotion-lossFlash {
    0%, 100% {
      opacity: 1;
      filter: brightness(1);
    }
    25% {
      opacity: 0.6;
      filter: brightness(1.3);
    }
    50% {
      opacity: 1;
      filter: brightness(1);
    }
    75% {
      opacity: 0.7;
      filter: brightness(1.2);
    }
  }
  
  @keyframes animotion-marketPulse {
    0%, 100% {
      transform: scaleY(1);
    }
    25% {
      transform: scaleY(1.3);
    }
    50% {
      transform: scaleY(0.7);
    }
    75% {
      transform: scaleY(1.15);
    }
  }
  
  @keyframes animotion-stockTicker {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes animotion-portfolioCard {
    0% {
      transform: translateY(20px) scale(0.95);
      opacity: 0;
    }
    100% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-invoiceSlide {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-paymentProcess {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    30% {
      transform: translateX(20px);
      opacity: 0.5;
    }
    60% {
      transform: translateX(20px);
      opacity: 0.5;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-walletOpen {
    0% {
      transform: perspective(600px) rotateX(0deg);
      transform-origin: bottom center;
    }
    100% {
      transform: perspective(600px) rotateX(-40deg);
      transform-origin: bottom center;
    }
  }
  
  @keyframes animotion-coinDrop {
    0% {
      transform: translateY(-60px) rotate(0deg);
      opacity: 0;
    }
    60% {
      transform: translateY(5px) rotate(180deg);
      opacity: 1;
    }
    75% {
      transform: translateY(-10px) rotate(240deg);
    }
    90% {
      transform: translateY(2px) rotate(340deg);
    }
    100% {
      transform: translateY(0) rotate(360deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-coinFlip {
    0% {
      transform: perspective(400px) rotateX(0deg);
    }
    25% {
      transform: perspective(400px) rotateX(90deg) translateY(-30px);
    }
    50% {
      transform: perspective(400px) rotateX(180deg) translateY(0);
    }
    75% {
      transform: perspective(400px) rotateX(270deg) translateY(-15px);
    }
    100% {
      transform: perspective(400px) rotateX(360deg) translateY(0);
    }
  }
  
  @keyframes animotion-coinStack {
    0% {
      transform: translateY(-20px);
      opacity: 0;
    }
    60% {
      transform: translateY(3px);
      opacity: 1;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-diamondShine {
    0% {
      filter: brightness(1) contrast(1);
      transform: rotate(0deg);
    }
    25% {
      filter: brightness(1.6) contrast(1.2);
      transform: rotate(5deg);
    }
    50% {
      filter: brightness(1) contrast(1);
      transform: rotate(0deg);
    }
    75% {
      filter: brightness(1.4) contrast(1.1);
      transform: rotate(-3deg);
    }
    100% {
      filter: brightness(1) contrast(1);
      transform: rotate(0deg);
    }
  }
  
  @keyframes animotion-goldGleam {
    0% {
      background-position: -200% center;
    }
    100% {
      background-position: 200% center;
    }
  }
  
  @keyframes animotion-secureLock {
    0% {
      transform: translateY(-8px);
    }
    30% {
      transform: translateY(0);
    }
    50% {
      transform: scale(1.1);
    }
    70% {
      transform: scale(1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes animotion-verifyCheck {
    0% {
      transform: scale(0) rotate(-45deg);
      opacity: 0;
    }
    50% {
      transform: scale(1.2) rotate(0deg);
      opacity: 1;
    }
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-transferArrow {
    0% {
      transform: translateX(-30px);
      opacity: 0;
    }
    50% {
      transform: translateX(10px);
      opacity: 1;
    }
    100% {
      transform: translateX(30px);
      opacity: 0;
    }
  }
  
  @keyframes animotion-depositDrop {
    0% {
      transform: translateY(-40px) scale(0.8);
      opacity: 0;
    }
    70% {
      transform: translateY(4px) scale(1.05);
      opacity: 1;
    }
    100% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-withdrawSlide {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      transform: translateX(60px);
      opacity: 0;
    }
  }
  
  @keyframes animotion-dividendRain {
    0% {
      transform: translateY(-30px) rotate(0deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    100% {
      transform: translateY(100px) rotate(45deg);
      opacity: 0;
    }
  }
  
  /* ==========================================================================
     CATEGORY 16: GAMING / PHYSICS (40)
     ========================================================================== */
  
  @keyframes animotion-gravityFall {
    0% {
      transform: translateY(0);
    }
    20% {
      transform: translateY(20px);
    }
    40% {
      transform: translateY(80px);
    }
    60% {
      transform: translateY(180px);
    }
    80% {
      transform: translateY(300px);
    }
    100% {
      transform: translateY(400px);
    }
  }
  
  @keyframes animotion-elasticBouncePhysics {
    0% {
      transform: translateY(-200px);
    }
    30% {
      transform: translateY(0) scaleY(0.8) scaleX(1.1);
    }
    40% {
      transform: translateY(-60px) scaleY(1.1) scaleX(0.95);
    }
    55% {
      transform: translateY(0) scaleY(0.9) scaleX(1.05);
    }
    65% {
      transform: translateY(-20px) scaleY(1.05) scaleX(0.98);
    }
    78% {
      transform: translateY(0) scaleY(0.95) scaleX(1.02);
    }
    88% {
      transform: translateY(-5px);
    }
    100% {
      transform: translateY(0) scaleY(1) scaleX(1);
    }
  }
  
  @keyframes animotion-springOscillate {
    0% {
      transform: scaleY(0.4);
    }
    15% {
      transform: scaleY(1.3);
    }
    30% {
      transform: scaleY(0.7);
    }
    45% {
      transform: scaleY(1.15);
    }
    60% {
      transform: scaleY(0.85);
    }
    75% {
      transform: scaleY(1.05);
    }
    90% {
      transform: scaleY(0.95);
    }
    100% {
      transform: scaleY(1);
    }
  }
  
  @keyframes animotion-pendulumSwing {
    0%, 100% {
      transform: rotate(25deg);
      transform-origin: top center;
    }
    50% {
      transform: rotate(-25deg);
      transform-origin: top center;
    }
  }
  
  @keyframes animotion-orbitalMotion {
    0% {
      transform: rotate(0deg) translateX(80px) rotate(0deg);
    }
    100% {
      transform: rotate(360deg) translateX(80px) rotate(-360deg);
    }
  }
  
  @keyframes animotion-projectilePath {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    25% {
      transform: translate(60px, -80px);
    }
    50% {
      transform: translate(120px, -100px);
    }
    75% {
      transform: translate(180px, -60px);
    }
    100% {
      transform: translate(240px, 0);
      opacity: 0.6;
    }
  }
  
  @keyframes animotion-wavePropagation {
    0% {
      transform: translateY(0) scaleX(1);
    }
    25% {
      transform: translateY(-15px) scaleX(1.05);
    }
    50% {
      transform: translateY(0) scaleX(1);
    }
    75% {
      transform: translateY(15px) scaleX(0.95);
    }
    100% {
      transform: translateY(0) scaleX(1);
    }
  }
  
  @keyframes animotion-particleExplode {
    0% {
      transform: translate(0, 0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate(var(--px, 40px), var(--py, -60px)) scale(0);
      opacity: 0;
    }
  }
  
  @keyframes animotion-magnetAttract {
    0% {
      transform: translateX(80px);
    }
    40% {
      transform: translateX(40px);
    }
    70% {
      transform: translateX(15px);
    }
    90% {
      transform: translateX(3px);
    }
    100% {
      transform: translateX(0);
    }
  }
  
  @keyframes animotion-magnetRepel {
    0% {
      transform: translateX(0);
    }
    30% {
      transform: translateX(10px);
    }
    60% {
      transform: translateX(35px);
    }
    100% {
      transform: translateX(80px);
    }
  }
  
  @keyframes animotion-frictionSlide {
    0% {
      transform: translateX(200px);
    }
    30% {
      transform: translateX(100px);
    }
    60% {
      transform: translateX(40px);
    }
    80% {
      transform: translateX(10px);
    }
    100% {
      transform: translateX(0);
    }
  }
  
  @keyframes animotion-momentumCarry {
    0% {
      transform: translateX(0) rotate(0deg);
    }
    20% {
      transform: translateX(50px) rotate(30deg);
    }
    60% {
      transform: translateX(120px) rotate(60deg);
    }
    100% {
      transform: translateX(160px) rotate(70deg);
    }
  }
  
  @keyframes animotion-collisionBounce {
    0% {
      transform: translateX(0) scale(1);
    }
    45% {
      transform: translateX(50px) scale(1);
    }
    50% {
      transform: translateX(50px) scaleX(0.8) scaleY(1.1);
    }
    55% {
      transform: translateX(45px) scaleX(1) scaleY(1);
    }
    70% {
      transform: translateX(20px);
    }
    100% {
      transform: translateX(0) scale(1);
    }
  }
  
  @keyframes animotion-fluidFlow {
    0% {
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      transform: rotate(0deg);
    }
    50% {
      border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
      transform: rotate(180deg);
    }
    100% {
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      transform: rotate(360deg);
    }
  }
  
  @keyframes animotion-vortexPull {
    0% {
      transform: rotate(0deg) scale(1) translateX(60px);
      opacity: 1;
    }
    100% {
      transform: rotate(720deg) scale(0) translateX(0);
      opacity: 0;
    }
  }
  
  @keyframes animotion-tornadoSpin {
    0% {
      transform: rotate(0deg) translateY(0) scaleX(1);
    }
    25% {
      transform: rotate(90deg) translateY(-20px) scaleX(0.8);
    }
    50% {
      transform: rotate(180deg) translateY(-40px) scaleX(0.6);
    }
    75% {
      transform: rotate(270deg) translateY(-60px) scaleX(0.4);
    }
    100% {
      transform: rotate(360deg) translateY(-80px) scaleX(0.3);
    }
  }
  
  @keyframes animotion-earthquakeShake {
    0%, 100% {
      transform: translate(0, 0) rotate(0deg);
    }
    10% {
      transform: translate(-8px, -4px) rotate(-1deg);
    }
    20% {
      transform: translate(6px, 6px) rotate(1deg);
    }
    30% {
      transform: translate(-10px, 2px) rotate(-2deg);
    }
    40% {
      transform: translate(8px, -6px) rotate(1deg);
    }
    50% {
      transform: translate(-4px, 4px) rotate(-1deg);
    }
    60% {
      transform: translate(6px, -2px) rotate(0deg);
    }
    70% {
      transform: translate(-3px, 3px) rotate(1deg);
    }
    80% {
      transform: translate(2px, -2px) rotate(0deg);
    }
    90% {
      transform: translate(-1px, 1px) rotate(0deg);
    }
  }
  
  @keyframes animotion-avalancheSlide {
    0% {
      transform: translate(-100px, -100px) rotate(-30deg);
      opacity: 0;
    }
    30% {
      transform: translate(-30px, -20px) rotate(-10deg);
      opacity: 1;
    }
    100% {
      transform: translate(100px, 80px) rotate(15deg);
      opacity: 0.4;
    }
  }
  
  @keyframes animotion-bouncingBallPhysics {
    0% {
      transform: translateY(0);
    }
    15% {
      transform: translateY(200px) scaleY(0.7) scaleX(1.15);
    }
    20% {
      transform: translateY(200px) scaleY(0.7) scaleX(1.15);
    }
    35% {
      transform: translateY(60px);
    }
    50% {
      transform: translateY(200px) scaleY(0.8) scaleX(1.1);
    }
    55% {
      transform: translateY(200px) scaleY(0.8) scaleX(1.1);
    }
    65% {
      transform: translateY(120px);
    }
    78% {
      transform: translateY(200px) scaleY(0.9) scaleX(1.05);
    }
    90% {
      transform: translateY(170px);
    }
    100% {
      transform: translateY(200px) scaleY(1) scaleX(1);
    }
  }
  
  @keyframes animotion-dampedOscillation {
    0% {
      transform: translateX(60px);
    }
    10% {
      transform: translateX(-45px);
    }
    20% {
      transform: translateX(30px);
    }
    30% {
      transform: translateX(-20px);
    }
    40% {
      transform: translateX(12px);
    }
    50% {
      transform: translateX(-7px);
    }
    60% {
      transform: translateX(4px);
    }
    70% {
      transform: translateX(-2px);
    }
    80% {
      transform: translateX(1px);
    }
    100% {
      transform: translateX(0);
    }
  }
  
  @keyframes animotion-healthBarFill {
    0% {
      transform: scaleX(0);
      transform-origin: left;
    }
    70% {
      transform: scaleX(1.02);
    }
    100% {
      transform: scaleX(1);
    }
  }
  
  @keyframes animotion-healthBarDrain {
    0% {
      transform: scaleX(1);
      transform-origin: left;
    }
    100% {
      transform: scaleX(0);
      transform-origin: left;
    }
  }
  
  @keyframes animotion-xpGain {
    0% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateY(-40px) scale(1.2);
      opacity: 0;
    }
  }
  
  @keyframes animotion-levelUp {
    0% {
      transform: scale(0) rotate(-180deg);
      opacity: 0;
    }
    50% {
      transform: scale(1.3) rotate(0deg);
      opacity: 1;
      filter: brightness(1.5);
    }
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
      filter: brightness(1);
    }
  }
  
  @keyframes animotion-achievementUnlock {
    0% {
      transform: translateY(-60px) scale(0.5);
      opacity: 0;
    }
    50% {
      transform: translateY(10px) scale(1.1);
      opacity: 1;
    }
    70% {
      transform: translateY(-5px) scale(1);
    }
    100% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-comboCounter {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(1.5);
      filter: brightness(1.4);
    }
    50% {
      transform: scale(1.2);
      filter: brightness(1.2);
    }
    100% {
      transform: scale(1);
      filter: brightness(1);
    }
  }
  
  @keyframes animotion-damageFlash {
    0% {
      filter: brightness(1);
      transform: translateX(0);
    }
    10% {
      filter: brightness(3) saturate(0);
      transform: translateX(-5px);
    }
    20% {
      filter: brightness(1);
      transform: translateX(5px);
    }
    30% {
      filter: brightness(2) saturate(0.5);
      transform: translateX(-3px);
    }
    40% {
      filter: brightness(1);
      transform: translateX(0);
    }
    100% {
      filter: brightness(1);
      transform: translateX(0);
    }
  }
  
  @keyframes animotion-shieldActivate {
    0% {
      transform: scale(0);
      opacity: 0;
      box-shadow: 0 0 0 0 rgba(66, 165, 245, 0);
    }
    50% {
      transform: scale(1.2);
      opacity: 0.8;
      box-shadow: 0 0 30px 10px rgba(66, 165, 245, 0.4);
    }
    100% {
      transform: scale(1);
      opacity: 1;
      box-shadow: 0 0 15px 5px rgba(66, 165, 245, 0.2);
    }
  }
  
  @keyframes animotion-powerUp {
    0% {
      transform: scale(1);
      filter: brightness(1);
    }
    25% {
      transform: scale(1.05);
      filter: brightness(1.3) saturate(1.5);
    }
    50% {
      transform: scale(1.1);
      filter: brightness(1.6) saturate(2);
      box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.5);
    }
    75% {
      transform: scale(1.15);
      filter: brightness(2) saturate(2.5);
      box-shadow: 0 0 40px 10px rgba(255, 215, 0, 0.7);
    }
    100% {
      transform: scale(1.2);
      filter: brightness(1.2) saturate(1.2);
      box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.3);
    }
  }
  
  @keyframes animotion-respawn {
    0% {
      transform: scale(0);
      opacity: 0;
      filter: blur(10px);
    }
    30% {
      transform: scale(0.3);
      opacity: 0.3;
      filter: blur(6px);
    }
    60% {
      transform: scale(0.8);
      opacity: 0.7;
      filter: blur(2px);
    }
    80% {
      transform: scale(1.1);
      opacity: 1;
      filter: blur(0);
    }
    100% {
      transform: scale(1);
      opacity: 1;
      filter: blur(0);
    }
  }
  
  @keyframes animotion-scorePopUp {
    0% {
      transform: translateY(0) scale(0.5);
      opacity: 0;
    }
    30% {
      transform: translateY(-20px) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: translateY(-50px) scale(1);
      opacity: 0;
    }
  }
  
  @keyframes animotion-criticalHit {
    0% {
      transform: scale(1);
      filter: brightness(1);
    }
    15% {
      transform: scale(2);
      filter: brightness(3);
    }
    30% {
      transform: scale(0.8);
      filter: brightness(0.8);
    }
    50% {
      transform: scale(1.3);
      filter: brightness(1.5);
    }
    100% {
      transform: scale(1);
      filter: brightness(1);
    }
  }
  
  @keyframes animotion-healPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
      filter: brightness(1);
    }
    50% {
      box-shadow: 0 0 20px 8px rgba(76, 175, 80, 0.3);
      filter: brightness(1.2);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
      filter: brightness(1);
    }
  }
  
  @keyframes animotion-manaRecharge {
    0% {
      transform: scaleY(0);
      transform-origin: bottom;
      filter: brightness(1.5);
    }
    100% {
      transform: scaleY(1);
      transform-origin: bottom;
      filter: brightness(1);
    }
  }
  
  @keyframes animotion-staminaDrain {
    0% {
      transform: scaleX(1);
      transform-origin: right;
      opacity: 1;
    }
    100% {
      transform: scaleX(0);
      transform-origin: right;
      opacity: 0.5;
    }
  }
  
  @keyframes animotion-poisonDrip {
    0%, 100% {
      filter: hue-rotate(0deg) brightness(1);
    }
    25% {
      filter: hue-rotate(80deg) brightness(0.8);
    }
    50% {
      filter: hue-rotate(100deg) brightness(0.9);
    }
    75% {
      filter: hue-rotate(60deg) brightness(0.85);
    }
  }
  
  @keyframes animotion-freezeEffect {
    0% {
      filter: brightness(1) saturate(1) hue-rotate(0deg);
      transform: scale(1);
    }
    50% {
      filter: brightness(1.3) saturate(0.3) hue-rotate(190deg);
      transform: scale(0.98);
    }
    100% {
      filter: brightness(1.1) saturate(0.5) hue-rotate(200deg);
      transform: scale(0.97);
    }
  }
  
  @keyframes animotion-burnEffect {
    0%, 100% {
      filter: brightness(1) sepia(0);
      box-shadow: 0 0 0 0 rgba(255, 87, 34, 0);
    }
    25% {
      filter: brightness(1.3) sepia(50%);
      box-shadow: 0 0 10px 3px rgba(255, 87, 34, 0.4);
    }
    50% {
      filter: brightness(1.5) sepia(70%);
      box-shadow: 0 0 20px 5px rgba(255, 87, 34, 0.6);
    }
    75% {
      filter: brightness(1.2) sepia(40%);
      box-shadow: 0 0 15px 4px rgba(255, 87, 34, 0.3);
    }
  }
  
  @keyframes animotion-electricShock {
    0%, 100% {
      transform: translate(0, 0) skewX(0deg);
      filter: brightness(1);
    }
    5% {
      transform: translate(3px, -2px) skewX(2deg);
      filter: brightness(2);
    }
    10% {
      transform: translate(-2px, 1px) skewX(-1deg);
      filter: brightness(1);
    }
    15% {
      transform: translate(1px, -3px) skewX(1deg);
      filter: brightness(2.5);
    }
    20% {
      transform: translate(-3px, 2px) skewX(-2deg);
      filter: brightness(1);
    }
    25% {
      transform: translate(0, 0) skewX(0deg);
      filter: brightness(1.5);
    }
    30% {
      transform: translate(0, 0) skewX(0deg);
      filter: brightness(1);
    }
  }
  
  @keyframes animotion-teleport {
    0% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
      filter: blur(0);
    }
    30% {
      transform: scale(0.5) rotate(180deg);
      opacity: 0.5;
      filter: blur(5px);
    }
    50% {
      transform: scale(0) rotate(360deg);
      opacity: 0;
      filter: blur(10px);
    }
    70% {
      transform: scale(0) rotate(360deg);
      opacity: 0;
      filter: blur(10px);
    }
    85% {
      transform: scale(0.5) rotate(180deg);
      opacity: 0.5;
      filter: blur(5px);
    }
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
      filter: blur(0);
    }
  }
  
  /* ==========================================================================
     CATEGORY 17: ECOMMERCE (25)
     ========================================================================== */
  
  @keyframes animotion-addToCartBounce {
    0% {
      transform: scale(1);
    }
    20% {
      transform: scale(1.2);
    }
    40% {
      transform: scale(0.9);
    }
    60% {
      transform: scale(1.1);
    }
    80% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes animotion-cartShake {
    0%, 100% {
      transform: rotate(0deg);
    }
    15% {
      transform: rotate(6deg);
    }
    30% {
      transform: rotate(-5deg);
    }
    45% {
      transform: rotate(4deg);
    }
    60% {
      transform: rotate(-3deg);
    }
    75% {
      transform: rotate(2deg);
    }
    90% {
      transform: rotate(-1deg);
    }
  }
  
  @keyframes animotion-wishlistHeart {
    0% {
      transform: scale(1);
    }
    15% {
      transform: scale(1.35);
    }
    30% {
      transform: scale(1);
    }
    45% {
      transform: scale(1.15);
    }
    60% {
      transform: scale(1);
    }
  }
  
  @keyframes animotion-priceSlash {
    0% {
      clip-path: inset(0 100% 0 0);
      opacity: 0;
    }
    100% {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-saleBadgePop {
    0% {
      transform: scale(0) rotate(-45deg);
      opacity: 0;
    }
    60% {
      transform: scale(1.2) rotate(5deg);
      opacity: 1;
    }
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-productZoom {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.8);
    }
  }
  
  @keyframes animotion-quickViewSlide {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-sizeSelect {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
    50% {
      transform: scale(1.1);
      box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.5);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 2px rgba(66, 133, 244, 1);
    }
  }
  
  @keyframes animotion-colorSwatchPop {
    0% {
      transform: scale(0.8);
      opacity: 0.5;
    }
    50% {
      transform: scale(1.15);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-quantityBounce {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes animotion-checkoutStep {
    0% {
      transform: translateX(-20px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-shippingTruck {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  
  @keyframes animotion-deliveryDrop {
    0% {
      transform: translateY(-80px) rotate(-5deg);
      opacity: 0;
    }
    60% {
      transform: translateY(5px) rotate(2deg);
      opacity: 1;
    }
    80% {
      transform: translateY(-3px) rotate(0deg);
    }
    100% {
      transform: translateY(0) rotate(0deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-ratingStar {
    0% {
      transform: scale(0) rotate(-72deg);
      opacity: 0;
    }
    60% {
      transform: scale(1.2) rotate(10deg);
      opacity: 1;
    }
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-reviewSlide {
    0% {
      transform: translateX(40px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-couponPeel {
    0% {
      transform: perspective(800px) rotateY(0deg);
      transform-origin: left center;
    }
    100% {
      transform: perspective(800px) rotateY(-30deg);
      transform-origin: left center;
      box-shadow: 10px 0 20px rgba(0, 0, 0, 0.15);
    }
  }
  
  @keyframes animotion-discountFlash {
    0%, 100% {
      filter: brightness(1);
      transform: scale(1);
    }
    25% {
      filter: brightness(1.5);
      transform: scale(1.05);
    }
    50% {
      filter: brightness(1);
      transform: scale(1);
    }
    75% {
      filter: brightness(1.3);
      transform: scale(1.03);
    }
  }
  
  @keyframes animotion-stockLow {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }
  
  @keyframes animotion-newBadge {
    0% {
      transform: scale(0) rotate(-20deg);
      opacity: 0;
    }
    60% {
      transform: scale(1.15) rotate(5deg);
      opacity: 1;
    }
    80% {
      transform: scale(0.95) rotate(-2deg);
    }
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-trendingFire {
    0%, 100% {
      transform: scaleY(1) translateY(0);
      filter: brightness(1);
    }
    20% {
      transform: scaleY(1.1) translateY(-2px);
      filter: brightness(1.2);
    }
    40% {
      transform: scaleY(0.95) translateY(1px);
      filter: brightness(1);
    }
    60% {
      transform: scaleY(1.08) translateY(-3px);
      filter: brightness(1.3);
    }
    80% {
      transform: scaleY(0.98) translateY(0);
      filter: brightness(1.1);
    }
  }
  
  @keyframes animotion-compareSlide {
    0% {
      transform: translateX(50px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-filterDrop {
    0% {
      transform: translateY(-20px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-sortFlip {
    0% {
      transform: perspective(400px) rotateX(0deg);
    }
    50% {
      transform: perspective(400px) rotateX(90deg);
    }
    100% {
      transform: perspective(400px) rotateX(0deg);
    }
  }
  
  @keyframes animotion-gridToList {
    0% {
      transform: scale(0.9);
      opacity: 0.5;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-productCardFlip {
    0% {
      transform: perspective(1000px) rotateY(0deg);
    }
    100% {
      transform: perspective(1000px) rotateY(180deg);
    }
  }
  
  /* ==========================================================================
     CATEGORY 18: SOCIAL MEDIA (25)
     ========================================================================== */
  
  @keyframes animotion-likeHeart {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    40% {
      transform: scale(1.3);
      opacity: 1;
    }
    60% {
      transform: scale(0.9);
    }
    80% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-doubleTapHeart {
    0% {
      transform: scale(0) rotate(-15deg);
      opacity: 0;
    }
    30% {
      transform: scale(1.5) rotate(0deg);
      opacity: 1;
    }
    60% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
    100% {
      transform: scale(0) rotate(15deg);
      opacity: 0;
    }
  }
  
  @keyframes animotion-commentBubble {
    0% {
      transform: scale(0) translateY(10px);
      opacity: 0;
    }
    60% {
      transform: scale(1.05) translateY(-2px);
      opacity: 1;
    }
    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-shareBounce {
    0% {
      transform: scale(1);
    }
    30% {
      transform: scale(0.85);
    }
    60% {
      transform: scale(1.15);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes animotion-followPop {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    50% {
      transform: scale(1.2);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-storyRing {
    0% {
      transform: rotate(0deg);
      stroke-dashoffset: 0;
    }
    100% {
      transform: rotate(360deg);
      stroke-dashoffset: 0;
    }
  }
  
  @keyframes animotion-storyProgress {
    0% {
      transform: scaleX(0);
      transform-origin: left;
    }
    100% {
      transform: scaleX(1);
      transform-origin: left;
    }
  }
  
  @keyframes animotion-reelPlay {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.3);
      opacity: 0.7;
    }
    100% {
      transform: scale(0);
      opacity: 0;
    }
  }
  
  @keyframes animotion-notificationBell {
    0%, 100% {
      transform: rotate(0deg);
      transform-origin: top center;
    }
    10% {
      transform: rotate(15deg);
    }
    20% {
      transform: rotate(-13deg);
    }
    30% {
      transform: rotate(10deg);
    }
    40% {
      transform: rotate(-8deg);
    }
    50% {
      transform: rotate(5deg);
    }
    60% {
      transform: rotate(-3deg);
    }
    70% {
      transform: rotate(2deg);
    }
  }
  
  @keyframes animotion-messagePop {
    0% {
      transform: scale(0) translateY(20px);
      opacity: 0;
    }
    60% {
      transform: scale(1.08) translateY(-3px);
      opacity: 1;
    }
    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-statusDot {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5);
    }
    50% {
      transform: scale(1.2);
      box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
    }
  }
  
  @keyframes animotion-verifiedBadge {
    0% {
      transform: scale(0) rotate(-180deg);
      opacity: 0;
    }
    60% {
      transform: scale(1.15) rotate(10deg);
      opacity: 1;
    }
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-hashtagPop {
    0% {
      transform: scale(0.5) translateY(10px);
      opacity: 0;
    }
    60% {
      transform: scale(1.1) translateY(-2px);
      opacity: 1;
    }
    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-mentionHighlight {
    0% {
      background-size: 0% 100%;
    }
    100% {
      background-size: 100% 100%;
    }
  }
  
  @keyframes animotion-trendingArrow {
    0% {
      transform: translateY(10px) rotate(0deg);
      opacity: 0;
    }
    100% {
      transform: translateY(0) rotate(-45deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-liveIndicator {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.5;
      transform: scale(0.95);
    }
  }
  
  @keyframes animotion-pollBarFill {
    0% {
      transform: scaleX(0);
      transform-origin: left;
    }
    100% {
      transform: scaleX(1);
      transform-origin: left;
    }
  }
  
  @keyframes animotion-reactionFloat {
    0% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    50% {
      transform: translateY(-40px) scale(1.2);
      opacity: 0.8;
    }
    100% {
      transform: translateY(-80px) scale(0.8);
      opacity: 0;
    }
  }
  
  @keyframes animotion-voiceNote {
    0%, 100% {
      transform: scaleY(0.5);
    }
    25% {
      transform: scaleY(1.2);
    }
    50% {
      transform: scaleY(0.7);
    }
    75% {
      transform: scaleY(1);
    }
  }
  
  @keyframes animotion-readReceipt {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    50% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-groupAvatar {
    0% {
      transform: translateX(-10px) scale(0.8);
      opacity: 0;
    }
    100% {
      transform: translateX(0) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-profilePop {
    0% {
      transform: scale(0);
      border-radius: 50%;
      opacity: 0;
    }
    60% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-feedRefresh {
    0% {
      transform: translateY(-20px) rotate(0deg);
      opacity: 0;
    }
    50% {
      transform: translateY(0) rotate(180deg);
      opacity: 1;
    }
    100% {
      transform: translateY(0) rotate(360deg);
      opacity: 1;
    }
  }
  
  @keyframes animotion-infiniteScroll {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes animotion-contentLoad {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  
  /* ==========================================================================
     CATEGORY 19: DASHBOARD / DATA VIZ (25)
     ========================================================================== */
  
  @keyframes animotion-chartLineDraw {
    0% {
      stroke-dashoffset: 1000;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    100% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
  }
  
  @keyframes animotion-chartBarGrow {
    0% {
      transform: scaleY(0);
      transform-origin: bottom;
    }
    80% {
      transform: scaleY(1.03);
    }
    100% {
      transform: scaleY(1);
    }
  }
  
  @keyframes animotion-chartPieFill {
    0% {
      stroke-dashoffset: 314;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  
  @keyframes animotion-chartDonutFill {
    0% {
      stroke-dashoffset: 251;
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    100% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
  }
  
  @keyframes animotion-gaugeNeedle {
    0% {
      transform: rotate(-90deg);
      transform-origin: bottom center;
    }
    100% {
      transform: rotate(var(--gauge-angle, 45deg));
      transform-origin: bottom center;
    }
  }
  
  @keyframes animotion-sparkline {
    0% {
      stroke-dashoffset: 200;
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    100% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
  }
  
  @keyframes animotion-heatmapPulse {
    0%, 100% {
      opacity: 0.6;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
  }
  
  @keyframes animotion-treemapExpand {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-scatterPlot {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    60% {
      transform: scale(1.2);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-radarSweep {
    0% {
      transform: rotate(0deg);
      opacity: 0.8;
    }
    100% {
      transform: rotate(360deg);
      opacity: 0.8;
    }
  }
  
  @keyframes animotion-funnelFill {
    0% {
      clip-path: inset(100% 0 0 0);
      opacity: 0;
    }
    100% {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-waterfallStep {
    0% {
      transform: translateY(-20px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-bubbleChart {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    50% {
      opacity: 0.8;
    }
    100% {
      transform: scale(1);
      opacity: 0.7;
    }
  }
  
  @keyframes animotion-networkNode {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    50% {
      transform: scale(1.2);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-timelineReveal {
    0% {
      clip-path: inset(0 0 100% 0);
      opacity: 0;
    }
    100% {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-kpiCounter {
    0% {
      transform: translateY(30px);
      opacity: 0;
    }
    60% {
      transform: translateY(-3px);
      opacity: 1;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-metricCard {
    0% {
      transform: translateY(20px) scale(0.95);
      opacity: 0;
    }
    100% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-alertBlink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.2;
    }
  }
  
  @keyframes animotion-statusChange {
    0% {
      transform: scale(0.8);
      opacity: 0;
      filter: blur(2px);
    }
    60% {
      transform: scale(1.1);
      opacity: 1;
      filter: blur(0);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-dataRefresh {
    0% {
      transform: rotate(0deg);
      opacity: 0.5;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: rotate(360deg);
      opacity: 0.5;
    }
  }
  
  @keyframes animotion-tableRowSlide {
    0% {
      transform: translateX(-20px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-gridCellPop {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }
    70% {
      transform: scale(1.05);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes animotion-widgetExpand {
    0% {
      transform: scale(0.9);
      opacity: 0;
      max-height: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
      max-height: 500px;
    }
  }
  
  @keyframes animotion-panelSlide {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes animotion-dashboardLoad {
    0% {
      opacity: 0;
      transform: translateY(10px);
      filter: blur(4px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }