/*! =========================================================
 *  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);
  }
}