/**
 * FluxCSS Advanced Animations
 * Comprehensive animation system with professional-grade effects
 */

/* Fade Animations */
.my-fade-in {
  animation: fadeIn 0.6s ease-out;
}

.my-fade-out {
  animation: fadeOut 0.6s ease-out;
}

.my-fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

.my-fade-in-down {
  animation: fadeInDown 0.8s ease-out;
}

.my-fade-in-left {
  animation: fadeInLeft 0.8s ease-out;
}

.my-fade-in-right {
  animation: fadeInRight 0.8s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale Animations */
.my-scale-in {
  animation: scaleIn 0.5s ease-out;
}

.my-scale-out {
  animation: scaleOut 0.5s ease-out;
}

.my-bounce-in {
  animation: bounceIn 0.8s ease-out;
}

.my-zoom-in {
  animation: zoomIn 0.3s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Rotate Animations */
.my-rotate-in {
  animation: rotateIn 0.6s ease-out;
}

.my-flip-in {
  animation: flipIn 0.6s ease-out;
}

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes flipIn {
  from {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  to {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/* Slide Animations */
.my-slide-up {
  animation: slideUp 0.6s ease-out;
}

.my-slide-down {
  animation: slideDown 0.6s ease-out;
}

.my-slide-left {
  animation: slideLeft 0.6s ease-out;
}

.my-slide-right {
  animation: slideRight 0.6s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Pulse Animations */
.my-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.my-pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.my-pulse-fast {
  animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Bounce Animations */
.my-bounce {
  animation: bounce 1s infinite;
}

.my-bounce-slow {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0,-4px,0);
  }
}

/* Shake Animation */
.my-shake {
  animation: shake 0.5s ease-in-out;
}

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

/* Wobble Animation */
.my-wobble {
  animation: wobble 1s ease-in-out;
}

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

/* Float Animation */
.my-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* Glow Animation */
.my-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
  }
  to {
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.8), 0 0 40px rgba(102, 126, 234, 0.6);
  }
}

/* Delay Classes */
.my-delay-100 { animation-delay: 0.1s; }
.my-delay-200 { animation-delay: 0.2s; }
.my-delay-300 { animation-delay: 0.3s; }
.my-delay-500 { animation-delay: 0.5s; }
.my-delay-700 { animation-delay: 0.7s; }
.my-delay-1000 { animation-delay: 1s; }

/* Duration Classes */
.my-duration-75 { animation-duration: 75ms; }
.my-duration-100 { animation-duration: 100ms; }
.my-duration-150 { animation-duration: 150ms; }
.my-duration-200 { animation-duration: 200ms; }
.my-duration-300 { animation-duration: 300ms; }
.my-duration-500 { animation-duration: 500ms; }
.my-duration-700 { animation-duration: 700ms; }
.my-duration-1000 { animation-duration: 1000ms; }

/* Extended Duration Classes */
.my-duration-50 { animation-duration: 50ms; }
.my-duration-125 { animation-duration: 125ms; }
.my-duration-250 { animation-duration: 250ms; }
.my-duration-400 { animation-duration: 400ms; }
.my-duration-600 { animation-duration: 600ms; }
.my-duration-800 { animation-duration: 800ms; }
.my-duration-900 { animation-duration: 900ms; }
.my-duration-1200 { animation-duration: 1200ms; }
.my-duration-1500 { animation-duration: 1500ms; }
.my-duration-2000 { animation-duration: 2000ms; }
.my-duration-3000 { animation-duration: 3000ms; }
.my-duration-5000 { animation-duration: 5000ms; }

/* Extended Delay Classes */
.my-delay-50 { animation-delay: 50ms; }
.my-delay-75 { animation-delay: 75ms; }
.my-delay-125 { animation-delay: 125ms; }
.my-delay-150 { animation-delay: 150ms; }
.my-delay-250 { animation-delay: 250ms; }
.my-delay-400 { animation-delay: 400ms; }
.my-delay-600 { animation-delay: 600ms; }
.my-delay-800 { animation-delay: 800ms; }
.my-delay-900 { animation-delay: 900ms; }
.my-delay-1200 { animation-delay: 1200ms; }
.my-delay-1500 { animation-delay: 1500ms; }
.my-delay-2000 { animation-delay: 2000ms; }
.my-delay-3000 { animation-delay: 3000ms; }
.my-delay-5000 { animation-delay: 5000ms; }

/* Animation Fill Modes */
.my-fill-none { animation-fill-mode: none; }
.my-fill-forwards { animation-fill-mode: forwards; }
.my-fill-backwards { animation-fill-mode: backwards; }
.my-fill-both { animation-fill-mode: both; }

/* Animation Iteration Count */
.my-iterate-1 { animation-iteration-count: 1; }
.my-iterate-2 { animation-iteration-count: 2; }
.my-iterate-3 { animation-iteration-count: 3; }
.my-iterate-infinite { animation-iteration-count: infinite; }

/* Animation Direction */
.my-direction-normal { animation-direction: normal; }
.my-direction-reverse { animation-direction: reverse; }
.my-direction-alternate { animation-direction: alternate; }
.my-direction-alternate-reverse { animation-direction: alternate-reverse; }

/* Animation Play State */
.my-play-paused { animation-play-state: paused; }
.my-play-running { animation-play-state: running; }

/* Animation Timing Functions */
.my-ease-linear { animation-timing-function: linear; }
.my-ease-in { animation-timing-function: ease-in; }
.my-ease-out { animation-timing-function: ease-out; }
.my-ease-in-out { animation-timing-function: ease-in-out; }
.my-ease-in-sine { animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
.my-ease-out-sine { animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
.my-ease-in-out-sine { animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
.my-ease-in-quad { animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }
.my-ease-out-quad { animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); }
.my-ease-in-out-quad { animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
.my-ease-in-cubic { animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
.my-ease-out-cubic { animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
.my-ease-in-out-cubic { animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
.my-ease-in-quart { animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
.my-ease-out-quart { animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
.my-ease-in-out-quart { animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
.my-ease-in-quint { animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0); }
.my-ease-out-quint { animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.my-ease-in-out-quint { animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1); }
.my-ease-in-expo { animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
.my-ease-out-expo { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.my-ease-in-out-expo { animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1); }
.my-ease-in-circ { animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
.my-ease-out-circ { animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
.my-ease-in-out-circ { animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1); }
.my-ease-in-back { animation-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56); }
.my-ease-out-back { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
.my-ease-in-out-back { animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6); }

/* Advanced Fade Animations */
.my-fade-in-fast { animation: fadeIn 0.3s ease-out; }
.my-fade-in-slow { animation: fadeIn 1s ease-out; }
.my-fade-out-fast { animation: fadeOut 0.3s ease-out; }
.my-fade-out-slow { animation: fadeOut 1s ease-out; }

.my-fade-in-up-fast { animation: fadeInUp 0.4s ease-out; }
.my-fade-in-up-slow { animation: fadeInUp 1.2s ease-out; }
.my-fade-in-down-fast { animation: fadeInDown 0.4s ease-out; }
.my-fade-in-down-slow { animation: fadeInDown 1.2s ease-out; }
.my-fade-in-left-fast { animation: fadeInLeft 0.4s ease-out; }
.my-fade-in-left-slow { animation: fadeInLeft 1.2s ease-out; }
.my-fade-in-right-fast { animation: fadeInRight 0.4s ease-out; }
.my-fade-in-right-slow { animation: fadeInRight 1.2s ease-out; }

/* Advanced Scale Animations */
.my-scale-in-fast { animation: scaleIn 0.3s ease-out; }
.my-scale-in-slow { animation: scaleIn 0.8s ease-out; }
.my-scale-out-fast { animation: scaleOut 0.3s ease-out; }
.my-scale-out-slow { animation: scaleOut 0.8s ease-out; }

.my-bounce-in-fast { animation: bounceIn 0.5s ease-out; }
.my-bounce-in-slow { animation: bounceIn 1.2s ease-out; }
.my-zoom-in-fast { animation: zoomIn 0.2s ease-out; }
.my-zoom-in-slow { animation: zoomIn 0.6s ease-out; }

/* Advanced Rotate Animations */
.my-rotate-in-fast { animation: rotateIn 0.4s ease-out; }
.my-rotate-in-slow { animation: rotateIn 1s ease-out; }
.my-flip-in-fast { animation: flipIn 0.4s ease-out; }
.my-flip-in-slow { animation: flipIn 1s ease-out; }

/* Advanced Slide Animations */
.my-slide-up-fast { animation: slideUp 0.4s ease-out; }
.my-slide-up-slow { animation: slideUp 1s ease-out; }
.my-slide-down-fast { animation: slideDown 0.4s ease-out; }
.my-slide-down-slow { animation: slideDown 1s ease-out; }
.my-slide-left-fast { animation: slideLeft 0.4s ease-out; }
.my-slide-left-slow { animation: slideLeft 1s ease-out; }
.my-slide-right-fast { animation: slideRight 0.4s ease-out; }
.my-slide-right-slow { animation: slideRight 1s ease-out; }

/* Advanced Pulse Animations */
.my-pulse-very-slow { animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.my-pulse-very-fast { animation: pulse 0.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Advanced Bounce Animations */
.my-bounce-very-slow { animation: bounce 3s infinite; }
.my-bounce-very-fast { animation: bounce 0.5s infinite; }

/* Advanced Shake Animations */
.my-shake-fast { animation: shake 0.3s ease-in-out; }
.my-shake-slow { animation: shake 0.8s ease-in-out; }

/* Advanced Wobble Animations */
.my-wobble-fast { animation: wobble 0.5s ease-in-out; }
.my-wobble-slow { animation: wobble 2s ease-in-out; }

/* Advanced Float Animations */
.my-float-fast { animation: float 2s ease-in-out infinite; }
.my-float-slow { animation: float 5s ease-in-out infinite; }

/* Advanced Glow Animations */
.my-glow-fast { animation: glow 1s ease-in-out infinite alternate; }
.my-glow-slow { animation: glow 4s ease-in-out infinite alternate; }

/* New Animation Types */
.my-spin { animation: spin 1s linear infinite; }
.my-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.my-bounce-slow { animation: bounce 2s infinite; }
.my-bounce-fast { animation: bounce 0.5s infinite; }

/* New Keyframe Animations */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Additional Keyframe Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-200deg);
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@keyframes flipIn {
  from {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  to {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

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

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

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes glow {
  from {
    box-shadow: 0 0 20px #3b82f6;
  }
  to {
    box-shadow: 0 0 30px #3b82f6, 0 0 40px #3b82f6;
  }
}

/* Advanced Keyframe Animations */
@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}

@keyframes rubberBand {
  0% { transform: scale(1); }
  30% { transform: scaleX(1.25) scaleY(0.75); }
  40% { transform: scaleX(0.75) scaleY(1.25); }
  50% { transform: scaleX(1.15) scaleY(0.85); }
  65% { transform: scaleX(0.95) scaleY(1.05); }
  75% { transform: scaleX(1.05) scaleY(0.95); }
  100% { transform: scale(1); }
}

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

@keyframes 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 flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

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

@keyframes hinge {
  0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
  20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
  40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
  80% { transform: rotate(60deg) translateY(0); transform-origin: top left; animation-timing-function: ease-in-out; }
  100% { transform: translateY(700px); }
}

@keyframes jackInTheBox {
  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 lightSpeedIn {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    transform: skewX(-5deg);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate(-120deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate(120deg);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform-origin: center top;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(2000px, 0, 0);
    transform-origin: right center;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

/* Additional Keyframe Animations */
@keyframes fadeOutUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-30px);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(30px);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px);
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes slideOutDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes rotateOut {
  from {
    opacity: 1;
    transform: rotate(0deg);
  }
  to {
    opacity: 0;
    transform: rotate(200deg);
  }
}

@keyframes flipOut {
  from {
    opacity: 1;
    transform: rotateY(0deg);
  }
  to {
    opacity: 0;
    transform: rotateY(90deg);
  }
}

@keyframes bounceOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  20% {
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

/* Advanced Keyframe Animations */
@keyframes flipInX {
  from {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-20deg);
  }
  60% {
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    transform: perspective(400px) rotateX(0deg);
  }
}

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

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

@keyframes flipOutY {
  from {
    transform: perspective(400px) rotateY(0deg);
  }
  30% {
    transform: perspective(400px) rotateY(-20deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes rotateInDownLeft {
  from {
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }
  to {
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }
  to {
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }
  to {
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }
  to {
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

/* Additional Keyframe Animations */
@keyframes fadeOutUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-30px);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(30px);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px);
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes slideOutDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes rotateOut {
  from {
    opacity: 1;
    transform: rotate(0deg);
  }
  to {
    opacity: 0;
    transform: rotate(200deg);
  }
}

@keyframes flipOut {
  from {
    opacity: 1;
    transform: rotateY(0deg);
  }
  to {
    opacity: 0;
    transform: rotateY(90deg);
  }
}

@keyframes bounceOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  20% {
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

/* Additional Animation Classes */
.my-flip-in-x { animation: flipInX 1s; }
.my-flip-out-x { animation: flipOutX 1s; }
.my-flip-in-y { animation: flipInY 1s; }
.my-flip-out-y { animation: flipOutY 1s; }
.my-rotate-in-down-left { animation: rotateInDownLeft 1s; }
.my-rotate-in-down-right { animation: rotateInDownRight 1s; }
.my-rotate-in-up-left { animation: rotateInUpLeft 1s; }
.my-rotate-in-up-right { animation: rotateInUpRight 1s; }
.my-rotate-out-down-left { animation: rotateOutDownLeft 1s; }
.my-rotate-out-down-right { animation: rotateOutDownRight 1s; }
.my-rotate-out-up-left { animation: rotateOutUpLeft 1s; }
.my-rotate-out-up-right { animation: rotateOutUpRight 1s; }

/* Hover Versions */
.my-hover-flip-in-x:hover { animation: flipInX 1s; }
.my-hover-flip-out-x:hover { animation: flipOutX 1s; }
.my-hover-flip-in-y:hover { animation: flipInY 1s; }
.my-hover-flip-out-y:hover { animation: flipOutY 1s; }
.my-hover-rotate-in-down-left:hover { animation: rotateInDownLeft 1s; }
.my-hover-rotate-in-down-right:hover { animation: rotateInDownRight 1s; }
.my-hover-rotate-in-up-left:hover { animation: rotateInUpLeft 1s; }
.my-hover-rotate-in-up-right:hover { animation: rotateInUpRight 1s; }
.my-hover-rotate-out-down-left:hover { animation: rotateOutDownLeft 1s; }
.my-hover-rotate-out-down-right:hover { animation: rotateOutDownRight 1s; }
.my-hover-rotate-out-up-left:hover { animation: rotateOutUpLeft 1s; }
.my-hover-rotate-out-up-right:hover { animation: rotateOutUpRight 1s; }

/* Focus Versions */
.my-focus-flip-in-x:focus { animation: flipInX 1s; }
.my-focus-flip-out-x:focus { animation: flipOutX 1s; }
.my-focus-flip-in-y:focus { animation: flipInY 1s; }
.my-focus-flip-out-y:focus { animation: flipOutY 1s; }
.my-focus-rotate-in-down-left:focus { animation: rotateInDownLeft 1s; }
.my-focus-rotate-in-down-right:focus { animation: rotateInDownRight 1s; }
.my-focus-rotate-in-up-left:focus { animation: rotateInUpLeft 1s; }
.my-focus-rotate-in-up-right:focus { animation: rotateInUpRight 1s; }
.my-focus-rotate-out-down-left:focus { animation: rotateOutDownLeft 1s; }
.my-focus-rotate-out-down-right:focus { animation: rotateOutDownRight 1s; }
.my-focus-rotate-out-up-left:focus { animation: rotateOutUpLeft 1s; }
.my-focus-rotate-out-up-right:focus { animation: rotateOutUpRight 1s; }

/* Active Versions */
.my-active-flip-in-x:active { animation: flipInX 1s; }
.my-active-flip-out-x:active { animation: flipOutX 1s; }
.my-active-flip-in-y:active { animation: flipInY 1s; }
.my-active-flip-out-y:active { animation: flipOutY 1s; }
.my-active-rotate-in-down-left:active { animation: rotateInDownLeft 1s; }
.my-active-rotate-in-down-right:active { animation: rotateInDownRight 1s; }
.my-active-rotate-in-up-left:active { animation: rotateInUpLeft 1s; }
.my-active-rotate-in-up-right:active { animation: rotateInUpRight 1s; }
.my-active-rotate-out-down-left:active { animation: rotateOutDownLeft 1s; }
.my-active-rotate-out-down-right:active { animation: rotateOutDownRight 1s; }
.my-active-rotate-out-up-left:active { animation: rotateOutUpLeft 1s; }
.my-active-rotate-out-up-right:active { animation: rotateOutUpRight 1s; }

/* Additional Animation Classes */
.my-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }
.my-rubber-band { animation: rubberBand 1s; }
.my-tada { animation: tada 1s; }
.my-jello { animation: jello 1s; }
.my-flash { animation: flash 1s; }
.my-swing { animation: swing 1s; }
.my-hinge { animation: hinge 2s; }
.my-jack-in-the-box { animation: jackInTheBox 1s; }
.my-light-speed-in { animation: lightSpeedIn 1s; }
.my-light-speed-out { animation: lightSpeedOut 1s; }
.my-roll-in { animation: rollIn 1s; }
.my-roll-out { animation: rollOut 1s; }
.my-zoom-in-up { animation: zoomInUp 1s; }
.my-zoom-in-down { animation: zoomInDown 1s; }
.my-zoom-in-left { animation: zoomInLeft 1s; }
.my-zoom-in-right { animation: zoomInRight 1s; }
.my-zoom-out { animation: zoomOut 1s; }
.my-zoom-out-up { animation: zoomOutUp 1s; }
.my-zoom-out-down { animation: zoomOutDown 1s; }
.my-zoom-out-left { animation: zoomOutLeft 1s; }
.my-zoom-out-right { animation: zoomOutRight 1s; }

/* Additional Animation Utilities */
.my-animate-none { animation: none; }
.my-animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.my-animate-spin { animation: spin 1s linear infinite; }
.my-animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.my-animate-bounce { animation: bounce 1s infinite; }

/* Animation Duration Utilities */
.my-duration-75 { animation-duration: 75ms; }
.my-duration-100 { animation-duration: 100ms; }
.my-duration-150 { animation-duration: 150ms; }
.my-duration-200 { animation-duration: 200ms; }
.my-duration-300 { animation-duration: 300ms; }
.my-duration-500 { animation-duration: 500ms; }
.my-duration-700 { animation-duration: 700ms; }
.my-duration-1000 { animation-duration: 1000ms; }

/* Animation Delay Utilities */
.my-delay-75 { animation-delay: 75ms; }
.my-delay-100 { animation-delay: 100ms; }
.my-delay-150 { animation-delay: 150ms; }
.my-delay-200 { animation-delay: 200ms; }
.my-delay-300 { animation-delay: 300ms; }
.my-delay-500 { animation-delay: 500ms; }
.my-delay-700 { animation-delay: 700ms; }
.my-delay-1000 { animation-delay: 1000ms; }

/* Animation Iteration Count Utilities */
.my-iterate-1 { animation-iteration-count: 1; }
.my-iterate-2 { animation-iteration-count: 2; }
.my-iterate-3 { animation-iteration-count: 3; }
.my-iterate-infinite { animation-iteration-count: infinite; }

/* Animation Direction Utilities */
.my-direction-normal { animation-direction: normal; }
.my-direction-reverse { animation-direction: reverse; }
.my-direction-alternate { animation-direction: alternate; }
.my-direction-alternate-reverse { animation-direction: alternate-reverse; }

/* Animation Fill Mode Utilities */
.my-fill-none { animation-fill-mode: none; }
.my-fill-forwards { animation-fill-mode: forwards; }
.my-fill-backwards { animation-fill-mode: backwards; }
.my-fill-both { animation-fill-mode: both; }

/* Animation Play State Utilities */
.my-play-paused { animation-play-state: paused; }
.my-play-running { animation-play-state: running; }

/* Animation Timing Function Utilities */
.my-ease-linear { animation-timing-function: linear; }
.my-ease-in { animation-timing-function: ease-in; }
.my-ease-out { animation-timing-function: ease-out; }
.my-ease-in-out { animation-timing-function: ease-in-out; }

/* Advanced Animation Combinations */
.my-animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.my-animate-fade-in-down { animation: fadeInDown 0.6s ease-out; }
.my-animate-fade-in-left { animation: fadeInLeft 0.6s ease-out; }
.my-animate-fade-in-right { animation: fadeInRight 0.6s ease-out; }
.my-animate-fade-out-up { animation: fadeOutUp 0.6s ease-out; }
.my-animate-fade-out-down { animation: fadeOutDown 0.6s ease-out; }
.my-animate-fade-out-left { animation: fadeOutLeft 0.6s ease-out; }
.my-animate-fade-out-right { animation: fadeOutRight 0.6s ease-out; }

.my-animate-slide-in-up { animation: slideInUp 0.6s ease-out; }
.my-animate-slide-in-down { animation: slideInDown 0.6s ease-out; }
.my-animate-slide-in-left { animation: slideInLeft 0.6s ease-out; }
.my-animate-slide-in-right { animation: slideInRight 0.6s ease-out; }
.my-animate-slide-out-up { animation: slideOutUp 0.6s ease-out; }
.my-animate-slide-out-down { animation: slideOutDown 0.6s ease-out; }
.my-animate-slide-out-left { animation: slideOutLeft 0.6s ease-out; }
.my-animate-slide-out-right { animation: slideOutRight 0.6s ease-out; }

.my-animate-zoom-in-up { animation: zoomInUp 0.6s ease-out; }
.my-animate-zoom-in-down { animation: zoomInDown 0.6s ease-out; }
.my-animate-zoom-in-left { animation: zoomInLeft 0.6s ease-out; }
.my-animate-zoom-in-right { animation: zoomInRight 0.6s ease-out; }
.my-animate-zoom-out-up { animation: zoomOutUp 0.6s ease-out; }
.my-animate-zoom-out-down { animation: zoomOutDown 0.6s ease-out; }
.my-animate-zoom-out-left { animation: zoomOutLeft 0.6s ease-out; }
.my-animate-zoom-out-right { animation: zoomOutRight 0.6s ease-out; }

.my-animate-rotate-in { animation: rotateIn 0.6s ease-out; }
.my-animate-rotate-out { animation: rotateOut 0.6s ease-out; }
.my-animate-flip-in { animation: flipIn 0.6s ease-out; }
.my-animate-flip-out { animation: flipOut 0.6s ease-out; }

.my-animate-bounce-in { animation: bounceIn 0.6s ease-out; }
.my-animate-bounce-out { animation: bounceOut 0.6s ease-out; }
.my-animate-shake { animation: shake 0.6s ease-in-out; }
.my-animate-wobble { animation: wobble 0.6s ease-in-out; }

.my-animate-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }
.my-animate-rubber-band { animation: rubberBand 1s; }
.my-animate-tada { animation: tada 1s; }
.my-animate-jello { animation: jello 1s; }
.my-animate-flash { animation: flash 1s; }
.my-animate-swing { animation: swing 1s; }
.my-animate-hinge { animation: hinge 2s; }
.my-animate-jack-in-the-box { animation: jackInTheBox 1s; }

.my-animate-light-speed-in { animation: lightSpeedIn 1s; }
.my-animate-light-speed-out { animation: lightSpeedOut 1s; }
.my-animate-roll-in { animation: rollIn 1s; }
.my-animate-roll-out { animation: rollOut 1s; }

/* Hover Animation Combinations */
.my-hover-fade-in-up:hover { animation: fadeInUp 0.6s ease-out; }
.my-hover-fade-in-down:hover { animation: fadeInDown 0.6s ease-out; }
.my-hover-fade-in-left:hover { animation: fadeInLeft 0.6s ease-out; }
.my-hover-fade-in-right:hover { animation: fadeInRight 0.6s ease-out; }
.my-hover-fade-out-up:hover { animation: fadeOutUp 0.6s ease-out; }
.my-hover-fade-out-down:hover { animation: fadeOutDown 0.6s ease-out; }
.my-hover-fade-out-left:hover { animation: fadeOutLeft 0.6s ease-out; }
.my-hover-fade-out-right:hover { animation: fadeOutRight 0.6s ease-out; }

.my-hover-slide-in-up:hover { animation: slideInUp 0.6s ease-out; }
.my-hover-slide-in-down:hover { animation: slideInDown 0.6s ease-out; }
.my-hover-slide-in-left:hover { animation: slideInLeft 0.6s ease-out; }
.my-hover-slide-in-right:hover { animation: slideInRight 0.6s ease-out; }
.my-hover-slide-out-up:hover { animation: slideOutUp 0.6s ease-out; }
.my-hover-slide-out-down:hover { animation: slideOutDown 0.6s ease-out; }
.my-hover-slide-out-left:hover { animation: slideOutLeft 0.6s ease-out; }
.my-hover-slide-out-right:hover { animation: slideOutRight 0.6s ease-out; }

.my-hover-zoom-in-up:hover { animation: zoomInUp 0.6s ease-out; }
.my-hover-zoom-in-down:hover { animation: zoomInDown 0.6s ease-out; }
.my-hover-zoom-in-left:hover { animation: zoomInLeft 0.6s ease-out; }
.my-hover-zoom-in-right:hover { animation: zoomInRight 0.6s ease-out; }
.my-hover-zoom-out-up:hover { animation: zoomOutUp 0.6s ease-out; }
.my-hover-zoom-out-down:hover { animation: zoomOutDown 0.6s ease-out; }
.my-hover-zoom-out-left:hover { animation: zoomOutLeft 0.6s ease-out; }
.my-hover-zoom-out-right:hover { animation: zoomOutRight 0.6s ease-out; }

.my-hover-rotate-in:hover { animation: rotateIn 0.6s ease-out; }
.my-hover-rotate-out:hover { animation: rotateOut 0.6s ease-out; }
.my-hover-flip-in:hover { animation: flipIn 0.6s ease-out; }
.my-hover-flip-out:hover { animation: flipOut 0.6s ease-out; }

.my-hover-bounce-in:hover { animation: bounceIn 0.6s ease-out; }
.my-hover-bounce-out:hover { animation: bounceOut 0.6s ease-out; }
.my-hover-shake:hover { animation: shake 0.6s ease-in-out; }
.my-hover-wobble:hover { animation: wobble 0.6s ease-in-out; }

.my-hover-heartbeat:hover { animation: heartbeat 1.5s ease-in-out infinite; }
.my-hover-rubber-band:hover { animation: rubberBand 1s; }
.my-hover-tada:hover { animation: tada 1s; }
.my-hover-jello:hover { animation: jello 1s; }
.my-hover-flash:hover { animation: flash 1s; }
.my-hover-swing:hover { animation: swing 1s; }
.my-hover-hinge:hover { animation: hinge 2s; }
.my-hover-jack-in-the-box:hover { animation: jackInTheBox 1s; }

.my-hover-light-speed-in:hover { animation: lightSpeedIn 1s; }
.my-hover-light-speed-out:hover { animation: lightSpeedOut 1s; }
.my-hover-roll-in:hover { animation: rollIn 1s; }
.my-hover-roll-out:hover { animation: rollOut 1s; }

/* Focus Animation Combinations */
.my-focus-fade-in-up:focus { animation: fadeInUp 0.6s ease-out; }
.my-focus-fade-in-down:focus { animation: fadeInDown 0.6s ease-out; }
.my-focus-fade-in-left:focus { animation: fadeInLeft 0.6s ease-out; }
.my-focus-fade-in-right:focus { animation: fadeInRight 0.6s ease-out; }
.my-focus-fade-out-up:focus { animation: fadeOutUp 0.6s ease-out; }
.my-focus-fade-out-down:focus { animation: fadeOutDown 0.6s ease-out; }
.my-focus-fade-out-left:focus { animation: fadeOutLeft 0.6s ease-out; }
.my-focus-fade-out-right:focus { animation: fadeOutRight 0.6s ease-out; }

.my-focus-slide-in-up:focus { animation: slideInUp 0.6s ease-out; }
.my-focus-slide-in-down:focus { animation: slideInDown 0.6s ease-out; }
.my-focus-slide-in-left:focus { animation: slideInLeft 0.6s ease-out; }
.my-focus-slide-in-right:focus { animation: slideInRight 0.6s ease-out; }
.my-focus-slide-out-up:focus { animation: slideOutUp 0.6s ease-out; }
.my-focus-slide-out-down:focus { animation: slideOutDown 0.6s ease-out; }
.my-focus-slide-out-left:focus { animation: slideOutLeft 0.6s ease-out; }
.my-focus-slide-out-right:focus { animation: slideOutRight 0.6s ease-out; }

.my-focus-zoom-in-up:focus { animation: zoomInUp 0.6s ease-out; }
.my-focus-zoom-in-down:focus { animation: zoomInDown 0.6s ease-out; }
.my-focus-zoom-in-left:focus { animation: zoomInLeft 0.6s ease-out; }
.my-focus-zoom-in-right:focus { animation: zoomInRight 0.6s ease-out; }
.my-focus-zoom-out-up:focus { animation: zoomOutUp 0.6s ease-out; }
.my-focus-zoom-out-down:focus { animation: zoomOutDown 0.6s ease-out; }
.my-focus-zoom-out-left:focus { animation: zoomOutLeft 0.6s ease-out; }
.my-focus-zoom-out-right:focus { animation: zoomOutRight 0.6s ease-out; }

.my-focus-rotate-in:focus { animation: rotateIn 0.6s ease-out; }
.my-focus-rotate-out:focus { animation: rotateOut 0.6s ease-out; }
.my-focus-flip-in:focus { animation: flipIn 0.6s ease-out; }
.my-focus-flip-out:focus { animation: flipOut 0.6s ease-out; }

.my-focus-bounce-in:focus { animation: bounceIn 0.6s ease-out; }
.my-focus-bounce-out:focus { animation: bounceOut 0.6s ease-out; }
.my-focus-shake:focus { animation: shake 0.6s ease-in-out; }
.my-focus-wobble:focus { animation: wobble 0.6s ease-in-out; }

.my-focus-heartbeat:focus { animation: heartbeat 1.5s ease-in-out infinite; }
.my-focus-rubber-band:focus { animation: rubberBand 1s; }
.my-focus-tada:focus { animation: tada 1s; }
.my-focus-jello:focus { animation: jello 1s; }
.my-focus-flash:focus { animation: flash 1s; }
.my-focus-swing:focus { animation: swing 1s; }
.my-focus-hinge:focus { animation: hinge 2s; }
.my-focus-jack-in-the-box:focus { animation: jackInTheBox 1s; }

.my-focus-light-speed-in:focus { animation: lightSpeedIn 1s; }
.my-focus-light-speed-out:focus { animation: lightSpeedOut 1s; }
.my-focus-roll-in:focus { animation: rollIn 1s; }
.my-focus-roll-out:focus { animation: rollOut 1s; }

/* Active Animation Combinations */
.my-active-fade-in-up:active { animation: fadeInUp 0.6s ease-out; }
.my-active-fade-in-down:active { animation: fadeInDown 0.6s ease-out; }
.my-active-fade-in-left:active { animation: fadeInLeft 0.6s ease-out; }
.my-active-fade-in-right:active { animation: fadeInRight 0.6s ease-out; }
.my-active-fade-out-up:active { animation: fadeOutUp 0.6s ease-out; }
.my-active-fade-out-down:active { animation: fadeOutDown 0.6s ease-out; }
.my-active-fade-out-left:active { animation: fadeOutLeft 0.6s ease-out; }
.my-active-fade-out-right:active { animation: fadeOutRight 0.6s ease-out; }

.my-active-slide-in-up:active { animation: slideInUp 0.6s ease-out; }
.my-active-slide-in-down:active { animation: slideInDown 0.6s ease-out; }
.my-active-slide-in-left:active { animation: slideInLeft 0.6s ease-out; }
.my-active-slide-in-right:active { animation: slideInRight 0.6s ease-out; }
.my-active-slide-out-up:active { animation: slideOutUp 0.6s ease-out; }
.my-active-slide-out-down:active { animation: slideOutDown 0.6s ease-out; }
.my-active-slide-out-left:active { animation: slideOutLeft 0.6s ease-out; }
.my-active-slide-out-right:active { animation: slideOutRight 0.6s ease-out; }

.my-active-zoom-in-up:active { animation: zoomInUp 0.6s ease-out; }
.my-active-zoom-in-down:active { animation: zoomInDown 0.6s ease-out; }
.my-active-zoom-in-left:active { animation: zoomInLeft 0.6s ease-out; }
.my-active-zoom-in-right:active { animation: zoomInRight 0.6s ease-out; }
.my-active-zoom-out-up:active { animation: zoomOutUp 0.6s ease-out; }
.my-active-zoom-out-down:active { animation: zoomOutDown 0.6s ease-out; }
.my-active-zoom-out-left:active { animation: zoomOutLeft 0.6s ease-out; }
.my-active-zoom-out-right:active { animation: zoomOutRight 0.6s ease-out; }

.my-active-rotate-in:active { animation: rotateIn 0.6s ease-out; }
.my-active-rotate-out:active { animation: rotateOut 0.6s ease-out; }
.my-active-flip-in:active { animation: flipIn 0.6s ease-out; }
.my-active-flip-out:active { animation: flipOut 0.6s ease-out; }

.my-active-bounce-in:active { animation: bounceIn 0.6s ease-out; }
.my-active-bounce-out:active { animation: bounceOut 0.6s ease-out; }
.my-active-shake:active { animation: shake 0.6s ease-in-out; }
.my-active-wobble:active { animation: wobble 0.6s ease-in-out; }

.my-active-heartbeat:active { animation: heartbeat 1.5s ease-in-out infinite; }
.my-active-rubber-band:active { animation: rubberBand 1s; }
.my-active-tada:active { animation: tada 1s; }
.my-active-jello:active { animation: jello 1s; }
.my-active-flash:active { animation: flash 1s; }
.my-active-swing:active { animation: swing 1s; }
.my-active-hinge:active { animation: hinge 2s; }
.my-active-jack-in-the-box:active { animation: jackInTheBox 1s; }

.my-active-light-speed-in:active { animation: lightSpeedIn 1s; }
.my-active-light-speed-out:active { animation: lightSpeedOut 1s; }
.my-active-roll-in:active { animation: rollIn 1s; }
.my-active-roll-out:active { animation: rollOut 1s; }

/* Hover Versions */
.my-hover-heartbeat:hover { animation: heartbeat 1.5s ease-in-out infinite; }
.my-hover-rubber-band:hover { animation: rubberBand 1s; }
.my-hover-tada:hover { animation: tada 1s; }
.my-hover-jello:hover { animation: jello 1s; }
.my-hover-flash:hover { animation: flash 1s; }
.my-hover-swing:hover { animation: swing 1s; }
.my-hover-hinge:hover { animation: hinge 2s; }
.my-hover-jack-in-the-box:hover { animation: jackInTheBox 1s; }
.my-hover-light-speed-in:hover { animation: lightSpeedIn 1s; }
.my-hover-light-speed-out:hover { animation: lightSpeedOut 1s; }
.my-hover-roll-in:hover { animation: rollIn 1s; }
.my-hover-roll-out:hover { animation: rollOut 1s; }
.my-hover-zoom-in-up:hover { animation: zoomInUp 1s; }
.my-hover-zoom-in-down:hover { animation: zoomInDown 1s; }
.my-hover-zoom-in-left:hover { animation: zoomInLeft 1s; }
.my-hover-zoom-in-right:hover { animation: zoomInRight 1s; }
.my-hover-zoom-out:hover { animation: zoomOut 1s; }
.my-hover-zoom-out-up:hover { animation: zoomOutUp 1s; }
.my-hover-zoom-out-down:hover { animation: zoomOutDown 1s; }
.my-hover-zoom-out-left:hover { animation: zoomOutLeft 1s; }
.my-hover-zoom-out-right:hover { animation: zoomOutRight 1s; }

/* Focus Versions */
.my-focus-heartbeat:focus { animation: heartbeat 1.5s ease-in-out infinite; }
.my-focus-rubber-band:focus { animation: rubberBand 1s; }
.my-focus-tada:focus { animation: tada 1s; }
.my-focus-jello:focus { animation: jello 1s; }
.my-focus-flash:focus { animation: flash 1s; }
.my-focus-swing:focus { animation: swing 1s; }
.my-focus-hinge:focus { animation: hinge 2s; }
.my-focus-jack-in-the-box:focus { animation: jackInTheBox 1s; }
.my-focus-light-speed-in:focus { animation: lightSpeedIn 1s; }
.my-focus-light-speed-out:focus { animation: lightSpeedOut 1s; }
.my-focus-roll-in:focus { animation: rollIn 1s; }
.my-focus-roll-out:focus { animation: rollOut 1s; }
.my-focus-zoom-in-up:focus { animation: zoomInUp 1s; }
.my-focus-zoom-in-down:focus { animation: zoomInDown 1s; }
.my-focus-zoom-in-left:focus { animation: zoomInLeft 1s; }
.my-focus-zoom-in-right:focus { animation: zoomInRight 1s; }
.my-focus-zoom-out:focus { animation: zoomOut 1s; }
.my-focus-zoom-out-up:focus { animation: zoomOutUp 1s; }
.my-focus-zoom-out-down:focus { animation: zoomOutDown 1s; }
.my-focus-zoom-out-left:focus { animation: zoomOutLeft 1s; }
.my-focus-zoom-out-right:focus { animation: zoomOutRight 1s; }

/* Active Versions */
.my-active-heartbeat:active { animation: heartbeat 1.5s ease-in-out infinite; }
.my-active-rubber-band:active { animation: rubberBand 1s; }
.my-active-tada:active { animation: tada 1s; }
.my-active-jello:active { animation: jello 1s; }
.my-active-flash:active { animation: flash 1s; }
.my-active-swing:active { animation: swing 1s; }
.my-active-hinge:active { animation: hinge 2s; }
.my-active-jack-in-the-box:active { animation: jackInTheBox 1s; }
.my-active-light-speed-in:active { animation: lightSpeedIn 1s; }
.my-active-light-speed-out:active { animation: lightSpeedOut 1s; }
.my-active-roll-in:active { animation: rollIn 1s; }
.my-active-roll-out:active { animation: rollOut 1s; }
.my-active-zoom-in-up:active { animation: zoomInUp 1s; }
.my-active-zoom-in-down:active { animation: zoomInDown 1s; }
.my-active-zoom-in-left:active { animation: zoomInLeft 1s; }
.my-active-zoom-in-right:active { animation: zoomInRight 1s; }
.my-active-zoom-out:active { animation: zoomOut 1s; }
.my-active-zoom-out-up:active { animation: zoomOutUp 1s; }
.my-active-zoom-out-down:active { animation: zoomOutDown 1s; }
.my-active-zoom-out-left:active { animation: zoomOutLeft 1s; }
.my-active-zoom-out-right:active { animation: zoomOutRight 1s; }

/* Additional Animation Utilities */
.my-animate-none { animation: none; }
.my-animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.my-animate-spin { animation: spin 1s linear infinite; }
.my-animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.my-animate-bounce { animation: bounce 1s infinite; }

/* Animation Duration Utilities */
.my-duration-75 { animation-duration: 75ms; }
.my-duration-100 { animation-duration: 100ms; }
.my-duration-150 { animation-duration: 150ms; }
.my-duration-200 { animation-duration: 200ms; }
.my-duration-300 { animation-duration: 300ms; }
.my-duration-500 { animation-duration: 500ms; }
.my-duration-700 { animation-duration: 700ms; }
.my-duration-1000 { animation-duration: 1000ms; }

/* Animation Delay Utilities */
.my-delay-75 { animation-delay: 75ms; }
.my-delay-100 { animation-delay: 100ms; }
.my-delay-150 { animation-delay: 150ms; }
.my-delay-200 { animation-delay: 200ms; }
.my-delay-300 { animation-delay: 300ms; }
.my-delay-500 { animation-delay: 500ms; }
.my-delay-700 { animation-delay: 700ms; }
.my-delay-1000 { animation-delay: 1000ms; }

/* Animation Iteration Count Utilities */
.my-iterate-1 { animation-iteration-count: 1; }
.my-iterate-2 { animation-iteration-count: 2; }
.my-iterate-3 { animation-iteration-count: 3; }
.my-iterate-infinite { animation-iteration-count: infinite; }

/* Animation Direction Utilities */
.my-direction-normal { animation-direction: normal; }
.my-direction-reverse { animation-direction: reverse; }
.my-direction-alternate { animation-direction: alternate; }
.my-direction-alternate-reverse { animation-direction: alternate-reverse; }

/* Animation Fill Mode Utilities */
.my-fill-none { animation-fill-mode: none; }
.my-fill-forwards { animation-fill-mode: forwards; }
.my-fill-backwards { animation-fill-mode: backwards; }
.my-fill-both { animation-fill-mode: both; }

/* Animation Play State Utilities */
.my-play-paused { animation-play-state: paused; }
.my-play-running { animation-play-state: running; }

/* Animation Timing Function Utilities */
.my-ease-linear { animation-timing-function: linear; }
.my-ease-in { animation-timing-function: ease-in; }
.my-ease-out { animation-timing-function: ease-out; }
.my-ease-in-out { animation-timing-function: ease-in-out; }

/* Advanced Animation Combinations */
.my-animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.my-animate-fade-in-down { animation: fadeInDown 0.6s ease-out; }
.my-animate-fade-in-left { animation: fadeInLeft 0.6s ease-out; }
.my-animate-fade-in-right { animation: fadeInRight 0.6s ease-out; }
.my-animate-fade-out-up { animation: fadeOutUp 0.6s ease-out; }
.my-animate-fade-out-down { animation: fadeOutDown 0.6s ease-out; }
.my-animate-fade-out-left { animation: fadeOutLeft 0.6s ease-out; }
.my-animate-fade-out-right { animation: fadeOutRight 0.6s ease-out; }

.my-animate-slide-in-up { animation: slideInUp 0.6s ease-out; }
.my-animate-slide-in-down { animation: slideInDown 0.6s ease-out; }
.my-animate-slide-in-left { animation: slideInLeft 0.6s ease-out; }
.my-animate-slide-in-right { animation: slideInRight 0.6s ease-out; }
.my-animate-slide-out-up { animation: slideOutUp 0.6s ease-out; }
.my-animate-slide-out-down { animation: slideOutDown 0.6s ease-out; }
.my-animate-slide-out-left { animation: slideOutLeft 0.6s ease-out; }
.my-animate-slide-out-right { animation: slideOutRight 0.6s ease-out; }

.my-animate-zoom-in-up { animation: zoomInUp 0.6s ease-out; }
.my-animate-zoom-in-down { animation: zoomInDown 0.6s ease-out; }
.my-animate-zoom-in-left { animation: zoomInLeft 0.6s ease-out; }
.my-animate-zoom-in-right { animation: zoomInRight 0.6s ease-out; }
.my-animate-zoom-out-up { animation: zoomOutUp 0.6s ease-out; }
.my-animate-zoom-out-down { animation: zoomOutDown 0.6s ease-out; }
.my-animate-zoom-out-left { animation: zoomOutLeft 0.6s ease-out; }
.my-animate-zoom-out-right { animation: zoomOutRight 0.6s ease-out; }

.my-animate-rotate-in { animation: rotateIn 0.6s ease-out; }
.my-animate-rotate-out { animation: rotateOut 0.6s ease-out; }
.my-animate-flip-in { animation: flipIn 0.6s ease-out; }
.my-animate-flip-out { animation: flipOut 0.6s ease-out; }

.my-animate-bounce-in { animation: bounceIn 0.6s ease-out; }
.my-animate-bounce-out { animation: bounceOut 0.6s ease-out; }
.my-animate-shake { animation: shake 0.6s ease-in-out; }
.my-animate-wobble { animation: wobble 0.6s ease-in-out; }

.my-animate-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }
.my-animate-rubber-band { animation: rubberBand 1s; }
.my-animate-tada { animation: tada 1s; }
.my-animate-jello { animation: jello 1s; }
.my-animate-flash { animation: flash 1s; }
.my-animate-swing { animation: swing 1s; }
.my-animate-hinge { animation: hinge 2s; }
.my-animate-jack-in-the-box { animation: jackInTheBox 1s; }

.my-animate-light-speed-in { animation: lightSpeedIn 1s; }
.my-animate-light-speed-out { animation: lightSpeedOut 1s; }
.my-animate-roll-in { animation: rollIn 1s; }
.my-animate-roll-out { animation: rollOut 1s; }

/* Hover Animation Combinations */
.my-hover-fade-in-up:hover { animation: fadeInUp 0.6s ease-out; }
.my-hover-fade-in-down:hover { animation: fadeInDown 0.6s ease-out; }
.my-hover-fade-in-left:hover { animation: fadeInLeft 0.6s ease-out; }
.my-hover-fade-in-right:hover { animation: fadeInRight 0.6s ease-out; }
.my-hover-fade-out-up:hover { animation: fadeOutUp 0.6s ease-out; }
.my-hover-fade-out-down:hover { animation: fadeOutDown 0.6s ease-out; }
.my-hover-fade-out-left:hover { animation: fadeOutLeft 0.6s ease-out; }
.my-hover-fade-out-right:hover { animation: fadeOutRight 0.6s ease-out; }

.my-hover-slide-in-up:hover { animation: slideInUp 0.6s ease-out; }
.my-hover-slide-in-down:hover { animation: slideInDown 0.6s ease-out; }
.my-hover-slide-in-left:hover { animation: slideInLeft 0.6s ease-out; }
.my-hover-slide-in-right:hover { animation: slideInRight 0.6s ease-out; }
.my-hover-slide-out-up:hover { animation: slideOutUp 0.6s ease-out; }
.my-hover-slide-out-down:hover { animation: slideOutDown 0.6s ease-out; }
.my-hover-slide-out-left:hover { animation: slideOutLeft 0.6s ease-out; }
.my-hover-slide-out-right:hover { animation: slideOutRight 0.6s ease-out; }

.my-hover-zoom-in-up:hover { animation: zoomInUp 0.6s ease-out; }
.my-hover-zoom-in-down:hover { animation: zoomInDown 0.6s ease-out; }
.my-hover-zoom-in-left:hover { animation: zoomInLeft 0.6s ease-out; }
.my-hover-zoom-in-right:hover { animation: zoomInRight 0.6s ease-out; }
.my-hover-zoom-out-up:hover { animation: zoomOutUp 0.6s ease-out; }
.my-hover-zoom-out-down:hover { animation: zoomOutDown 0.6s ease-out; }
.my-hover-zoom-out-left:hover { animation: zoomOutLeft 0.6s ease-out; }
.my-hover-zoom-out-right:hover { animation: zoomOutRight 0.6s ease-out; }

.my-hover-rotate-in:hover { animation: rotateIn 0.6s ease-out; }
.my-hover-rotate-out:hover { animation: rotateOut 0.6s ease-out; }
.my-hover-flip-in:hover { animation: flipIn 0.6s ease-out; }
.my-hover-flip-out:hover { animation: flipOut 0.6s ease-out; }

.my-hover-bounce-in:hover { animation: bounceIn 0.6s ease-out; }
.my-hover-bounce-out:hover { animation: bounceOut 0.6s ease-out; }
.my-hover-shake:hover { animation: shake 0.6s ease-in-out; }
.my-hover-wobble:hover { animation: wobble 0.6s ease-in-out; }

.my-hover-heartbeat:hover { animation: heartbeat 1.5s ease-in-out infinite; }
.my-hover-rubber-band:hover { animation: rubberBand 1s; }
.my-hover-tada:hover { animation: tada 1s; }
.my-hover-jello:hover { animation: jello 1s; }
.my-hover-flash:hover { animation: flash 1s; }
.my-hover-swing:hover { animation: swing 1s; }
.my-hover-hinge:hover { animation: hinge 2s; }
.my-hover-jack-in-the-box:hover { animation: jackInTheBox 1s; }

.my-hover-light-speed-in:hover { animation: lightSpeedIn 1s; }
.my-hover-light-speed-out:hover { animation: lightSpeedOut 1s; }
.my-hover-roll-in:hover { animation: rollIn 1s; }
.my-hover-roll-out:hover { animation: rollOut 1s; }

/* Focus Animation Combinations */
.my-focus-fade-in-up:focus { animation: fadeInUp 0.6s ease-out; }
.my-focus-fade-in-down:focus { animation: fadeInDown 0.6s ease-out; }
.my-focus-fade-in-left:focus { animation: fadeInLeft 0.6s ease-out; }
.my-focus-fade-in-right:focus { animation: fadeInRight 0.6s ease-out; }
.my-focus-fade-out-up:focus { animation: fadeOutUp 0.6s ease-out; }
.my-focus-fade-out-down:focus { animation: fadeOutDown 0.6s ease-out; }
.my-focus-fade-out-left:focus { animation: fadeOutLeft 0.6s ease-out; }
.my-focus-fade-out-right:focus { animation: fadeOutRight 0.6s ease-out; }

.my-focus-slide-in-up:focus { animation: slideInUp 0.6s ease-out; }
.my-focus-slide-in-down:focus { animation: slideInDown 0.6s ease-out; }
.my-focus-slide-in-left:focus { animation: slideInLeft 0.6s ease-out; }
.my-focus-slide-in-right:focus { animation: slideInRight 0.6s ease-out; }
.my-focus-slide-out-up:focus { animation: slideOutUp 0.6s ease-out; }
.my-focus-slide-out-down:focus { animation: slideOutDown 0.6s ease-out; }
.my-focus-slide-out-left:focus { animation: slideOutLeft 0.6s ease-out; }
.my-focus-slide-out-right:focus { animation: slideOutRight 0.6s ease-out; }

.my-focus-zoom-in-up:focus { animation: zoomInUp 0.6s ease-out; }
.my-focus-zoom-in-down:focus { animation: zoomInDown 0.6s ease-out; }
.my-focus-zoom-in-left:focus { animation: zoomInLeft 0.6s ease-out; }
.my-focus-zoom-in-right:focus { animation: zoomInRight 0.6s ease-out; }
.my-focus-zoom-out-up:focus { animation: zoomOutUp 0.6s ease-out; }
.my-focus-zoom-out-down:focus { animation: zoomOutDown 0.6s ease-out; }
.my-focus-zoom-out-left:focus { animation: zoomOutLeft 0.6s ease-out; }
.my-focus-zoom-out-right:focus { animation: zoomOutRight 0.6s ease-out; }

.my-focus-rotate-in:focus { animation: rotateIn 0.6s ease-out; }
.my-focus-rotate-out:focus { animation: rotateOut 0.6s ease-out; }
.my-focus-flip-in:focus { animation: flipIn 0.6s ease-out; }
.my-focus-flip-out:focus { animation: flipOut 0.6s ease-out; }

.my-focus-bounce-in:focus { animation: bounceIn 0.6s ease-out; }
.my-focus-bounce-out:focus { animation: bounceOut 0.6s ease-out; }
.my-focus-shake:focus { animation: shake 0.6s ease-in-out; }
.my-focus-wobble:focus { animation: wobble 0.6s ease-in-out; }

.my-focus-heartbeat:focus { animation: heartbeat 1.5s ease-in-out infinite; }
.my-focus-rubber-band:focus { animation: rubberBand 1s; }
.my-focus-tada:focus { animation: tada 1s; }
.my-focus-jello:focus { animation: jello 1s; }
.my-focus-flash:focus { animation: flash 1s; }
.my-focus-swing:focus { animation: swing 1s; }
.my-focus-hinge:focus { animation: hinge 2s; }
.my-focus-jack-in-the-box:focus { animation: jackInTheBox 1s; }

.my-focus-light-speed-in:focus { animation: lightSpeedIn 1s; }
.my-focus-light-speed-out:focus { animation: lightSpeedOut 1s; }
.my-focus-roll-in:focus { animation: rollIn 1s; }
.my-focus-roll-out:focus { animation: rollOut 1s; }

/* Active Animation Combinations */
.my-active-fade-in-up:active { animation: fadeInUp 0.6s ease-out; }
.my-active-fade-in-down:active { animation: fadeInDown 0.6s ease-out; }
.my-active-fade-in-left:active { animation: fadeInLeft 0.6s ease-out; }
.my-active-fade-in-right:active { animation: fadeInRight 0.6s ease-out; }
.my-active-fade-out-up:active { animation: fadeOutUp 0.6s ease-out; }
.my-active-fade-out-down:active { animation: fadeOutDown 0.6s ease-out; }
.my-active-fade-out-left:active { animation: fadeOutLeft 0.6s ease-out; }
.my-active-fade-out-right:active { animation: fadeOutRight 0.6s ease-out; }

.my-active-slide-in-up:active { animation: slideInUp 0.6s ease-out; }
.my-active-slide-in-down:active { animation: slideInDown 0.6s ease-out; }
.my-active-slide-in-left:active { animation: slideInLeft 0.6s ease-out; }
.my-active-slide-in-right:active { animation: slideInRight 0.6s ease-out; }
.my-active-slide-out-up:active { animation: slideOutUp 0.6s ease-out; }
.my-active-slide-out-down:active { animation: slideOutDown 0.6s ease-out; }
.my-active-slide-out-left:active { animation: slideOutLeft 0.6s ease-out; }
.my-active-slide-out-right:active { animation: slideOutRight 0.6s ease-out; }

.my-active-zoom-in-up:active { animation: zoomInUp 0.6s ease-out; }
.my-active-zoom-in-down:active { animation: zoomInDown 0.6s ease-out; }
.my-active-zoom-in-left:active { animation: zoomInLeft 0.6s ease-out; }
.my-active-zoom-in-right:active { animation: zoomInRight 0.6s ease-out; }
.my-active-zoom-out-up:active { animation: zoomOutUp 0.6s ease-out; }
.my-active-zoom-out-down:active { animation: zoomOutDown 0.6s ease-out; }
.my-active-zoom-out-left:active { animation: zoomOutLeft 0.6s ease-out; }
.my-active-zoom-out-right:active { animation: zoomOutRight 0.6s ease-out; }

.my-active-rotate-in:active { animation: rotateIn 0.6s ease-out; }
.my-active-rotate-out:active { animation: rotateOut 0.6s ease-out; }
.my-active-flip-in:active { animation: flipIn 0.6s ease-out; }
.my-active-flip-out:active { animation: flipOut 0.6s ease-out; }

.my-active-bounce-in:active { animation: bounceIn 0.6s ease-out; }
.my-active-bounce-out:active { animation: bounceOut 0.6s ease-out; }
.my-active-shake:active { animation: shake 0.6s ease-in-out; }
.my-active-wobble:active { animation: wobble 0.6s ease-in-out; }

.my-active-heartbeat:active { animation: heartbeat 1.5s ease-in-out infinite; }
.my-active-rubber-band:active { animation: rubberBand 1s; }
.my-active-tada:active { animation: tada 1s; }
.my-active-jello:active { animation: jello 1s; }
.my-active-flash:active { animation: flash 1s; }
.my-active-swing:active { animation: swing 1s; }
.my-active-hinge:active { animation: hinge 2s; }
.my-active-jack-in-the-box:active { animation: jackInTheBox 1s; }

.my-active-light-speed-in:active { animation: lightSpeedIn 1s; }
.my-active-light-speed-out:active { animation: lightSpeedOut 1s; }
.my-active-roll-in:active { animation: rollIn 1s; }
.my-active-roll-out:active { animation: rollOut 1s; }

/* Additional Animation Utilities */
.my-animate-none { animation: none; }
.my-animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.my-animate-spin { animation: spin 1s linear infinite; }
.my-animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.my-animate-bounce { animation: bounce 1s infinite; }

/* Animation Duration Utilities */
.my-duration-75 { animation-duration: 75ms; }
.my-duration-100 { animation-duration: 100ms; }
.my-duration-150 { animation-duration: 150ms; }
.my-duration-200 { animation-duration: 200ms; }
.my-duration-300 { animation-duration: 300ms; }
.my-duration-500 { animation-duration: 500ms; }
.my-duration-700 { animation-duration: 700ms; }
.my-duration-1000 { animation-duration: 1000ms; }

/* Animation Delay Utilities */
.my-delay-75 { animation-delay: 75ms; }
.my-delay-100 { animation-delay: 100ms; }
.my-delay-150 { animation-delay: 150ms; }
.my-delay-200 { animation-delay: 200ms; }
.my-delay-300 { animation-delay: 300ms; }
.my-delay-500 { animation-delay: 500ms; }
.my-delay-700 { animation-delay: 700ms; }
.my-delay-1000 { animation-delay: 1000ms; }

/* Animation Iteration Count Utilities */
.my-iterate-1 { animation-iteration-count: 1; }
.my-iterate-2 { animation-iteration-count: 2; }
.my-iterate-3 { animation-iteration-count: 3; }
.my-iterate-infinite { animation-iteration-count: infinite; }

/* Animation Direction Utilities */
.my-direction-normal { animation-direction: normal; }
.my-direction-reverse { animation-direction: reverse; }
.my-direction-alternate { animation-direction: alternate; }
.my-direction-alternate-reverse { animation-direction: alternate-reverse; }

/* Animation Fill Mode Utilities */
.my-fill-none { animation-fill-mode: none; }
.my-fill-forwards { animation-fill-mode: forwards; }
.my-fill-backwards { animation-fill-mode: backwards; }
.my-fill-both { animation-fill-mode: both; }

/* Animation Play State Utilities */
.my-play-paused { animation-play-state: paused; }
.my-play-running { animation-play-state: running; }

/* Animation Timing Function Utilities */
.my-ease-linear { animation-timing-function: linear; }
.my-ease-in { animation-timing-function: ease-in; }
.my-ease-out { animation-timing-function: ease-out; }
.my-ease-in-out { animation-timing-function: ease-in-out; }

/* Advanced Animation Combinations */
.my-animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.my-animate-fade-in-down { animation: fadeInDown 0.6s ease-out; }
.my-animate-fade-in-left { animation: fadeInLeft 0.6s ease-out; }
.my-animate-fade-in-right { animation: fadeInRight 0.6s ease-out; }
.my-animate-fade-out-up { animation: fadeOutUp 0.6s ease-out; }
.my-animate-fade-out-down { animation: fadeOutDown 0.6s ease-out; }
.my-animate-fade-out-left { animation: fadeOutLeft 0.6s ease-out; }
.my-animate-fade-out-right { animation: fadeOutRight 0.6s ease-out; }

.my-animate-slide-in-up { animation: slideInUp 0.6s ease-out; }
.my-animate-slide-in-down { animation: slideInDown 0.6s ease-out; }
.my-animate-slide-in-left { animation: slideInLeft 0.6s ease-out; }
.my-animate-slide-in-right { animation: slideInRight 0.6s ease-out; }
.my-animate-slide-out-up { animation: slideOutUp 0.6s ease-out; }
.my-animate-slide-out-down { animation: slideOutDown 0.6s ease-out; }
.my-animate-slide-out-left { animation: slideOutLeft 0.6s ease-out; }
.my-animate-slide-out-right { animation: slideOutRight 0.6s ease-out; }

.my-animate-zoom-in-up { animation: zoomInUp 0.6s ease-out; }
.my-animate-zoom-in-down { animation: zoomInDown 0.6s ease-out; }
.my-animate-zoom-in-left { animation: zoomInLeft 0.6s ease-out; }
.my-animate-zoom-in-right { animation: zoomInRight 0.6s ease-out; }
.my-animate-zoom-out-up { animation: zoomOutUp 0.6s ease-out; }
.my-animate-zoom-out-down { animation: zoomOutDown 0.6s ease-out; }
.my-animate-zoom-out-left { animation: zoomOutLeft 0.6s ease-out; }
.my-animate-zoom-out-right { animation: zoomOutRight 0.6s ease-out; }

.my-animate-rotate-in { animation: rotateIn 0.6s ease-out; }
.my-animate-rotate-out { animation: rotateOut 0.6s ease-out; }
.my-animate-flip-in { animation: flipIn 0.6s ease-out; }
.my-animate-flip-out { animation: flipOut 0.6s ease-out; }

.my-animate-bounce-in { animation: bounceIn 0.6s ease-out; }
.my-animate-bounce-out { animation: bounceOut 0.6s ease-out; }
.my-animate-shake { animation: shake 0.6s ease-in-out; }
.my-animate-wobble { animation: wobble 0.6s ease-in-out; }

.my-animate-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }
.my-animate-rubber-band { animation: rubberBand 1s; }
.my-animate-tada { animation: tada 1s; }
.my-animate-jello { animation: jello 1s; }
.my-animate-flash { animation: flash 1s; }
.my-animate-swing { animation: swing 1s; }
.my-animate-hinge { animation: hinge 2s; }
.my-animate-jack-in-the-box { animation: jackInTheBox 1s; }

.my-animate-light-speed-in { animation: lightSpeedIn 1s; }
.my-animate-light-speed-out { animation: lightSpeedOut 1s; }
.my-animate-roll-in { animation: rollIn 1s; }
.my-animate-roll-out { animation: rollOut 1s; }

/* Hover Animation Combinations */
.my-hover-fade-in-up:hover { animation: fadeInUp 0.6s ease-out; }
.my-hover-fade-in-down:hover { animation: fadeInDown 0.6s ease-out; }
.my-hover-fade-in-left:hover { animation: fadeInLeft 0.6s ease-out; }
.my-hover-fade-in-right:hover { animation: fadeInRight 0.6s ease-out; }
.my-hover-fade-out-up:hover { animation: fadeOutUp 0.6s ease-out; }
.my-hover-fade-out-down:hover { animation: fadeOutDown 0.6s ease-out; }
.my-hover-fade-out-left:hover { animation: fadeOutLeft 0.6s ease-out; }
.my-hover-fade-out-right:hover { animation: fadeOutRight 0.6s ease-out; }

.my-hover-slide-in-up:hover { animation: slideInUp 0.6s ease-out; }
.my-hover-slide-in-down:hover { animation: slideInDown 0.6s ease-out; }
.my-hover-slide-in-left:hover { animation: slideInLeft 0.6s ease-out; }
.my-hover-slide-in-right:hover { animation: slideInRight 0.6s ease-out; }
.my-hover-slide-out-up:hover { animation: slideOutUp 0.6s ease-out; }
.my-hover-slide-out-down:hover { animation: slideOutDown 0.6s ease-out; }
.my-hover-slide-out-left:hover { animation: slideOutLeft 0.6s ease-out; }
.my-hover-slide-out-right:hover { animation: slideOutRight 0.6s ease-out; }

.my-hover-zoom-in-up:hover { animation: zoomInUp 0.6s ease-out; }
.my-hover-zoom-in-down:hover { animation: zoomInDown 0.6s ease-out; }
.my-hover-zoom-in-left:hover { animation: zoomInLeft 0.6s ease-out; }
.my-hover-zoom-in-right:hover { animation: zoomInRight 0.6s ease-out; }
.my-hover-zoom-out-up:hover { animation: zoomOutUp 0.6s ease-out; }
.my-hover-zoom-out-down:hover { animation: zoomOutDown 0.6s ease-out; }
.my-hover-zoom-out-left:hover { animation: zoomOutLeft 0.6s ease-out; }
.my-hover-zoom-out-right:hover { animation: zoomOutRight 0.6s ease-out; }

.my-hover-rotate-in:hover { animation: rotateIn 0.6s ease-out; }
.my-hover-rotate-out:hover { animation: rotateOut 0.6s ease-out; }
.my-hover-flip-in:hover { animation: flipIn 0.6s ease-out; }
.my-hover-flip-out:hover { animation: flipOut 0.6s ease-out; }

.my-hover-bounce-in:hover { animation: bounceIn 0.6s ease-out; }
.my-hover-bounce-out:hover { animation: bounceOut 0.6s ease-out; }
.my-hover-shake:hover { animation: shake 0.6s ease-in-out; }
.my-hover-wobble:hover { animation: wobble 0.6s ease-in-out; }

.my-hover-heartbeat:hover { animation: heartbeat 1.5s ease-in-out infinite; }
.my-hover-rubber-band:hover { animation: rubberBand 1s; }
.my-hover-tada:hover { animation: tada 1s; }
.my-hover-jello:hover { animation: jello 1s; }
.my-hover-flash:hover { animation: flash 1s; }
.my-hover-swing:hover { animation: swing 1s; }
.my-hover-hinge:hover { animation: hinge 2s; }
.my-hover-jack-in-the-box:hover { animation: jackInTheBox 1s; }

.my-hover-light-speed-in:hover { animation: lightSpeedIn 1s; }
.my-hover-light-speed-out:hover { animation: lightSpeedOut 1s; }
.my-hover-roll-in:hover { animation: rollIn 1s; }
.my-hover-roll-out:hover { animation: rollOut 1s; }

/* Focus Animation Combinations */
.my-focus-fade-in-up:focus { animation: fadeInUp 0.6s ease-out; }
.my-focus-fade-in-down:focus { animation: fadeInDown 0.6s ease-out; }
.my-focus-fade-in-left:focus { animation: fadeInLeft 0.6s ease-out; }
.my-focus-fade-in-right:focus { animation: fadeInRight 0.6s ease-out; }
.my-focus-fade-out-up:focus { animation: fadeOutUp 0.6s ease-out; }
.my-focus-fade-out-down:focus { animation: fadeOutDown 0.6s ease-out; }
.my-focus-fade-out-left:focus { animation: fadeOutLeft 0.6s ease-out; }
.my-focus-fade-out-right:focus { animation: fadeOutRight 0.6s ease-out; }

.my-focus-slide-in-up:focus { animation: slideInUp 0.6s ease-out; }
.my-focus-slide-in-down:focus { animation: slideInDown 0.6s ease-out; }
.my-focus-slide-in-left:focus { animation: slideInLeft 0.6s ease-out; }
.my-focus-slide-in-right:focus { animation: slideInRight 0.6s ease-out; }
.my-focus-slide-out-up:focus { animation: slideOutUp 0.6s ease-out; }
.my-focus-slide-out-down:focus { animation: slideOutDown 0.6s ease-out; }
.my-focus-slide-out-left:focus { animation: slideOutLeft 0.6s ease-out; }
.my-focus-slide-out-right:focus { animation: slideOutRight 0.6s ease-out; }

.my-focus-zoom-in-up:focus { animation: zoomInUp 0.6s ease-out; }
.my-focus-zoom-in-down:focus { animation: zoomInDown 0.6s ease-out; }
.my-focus-zoom-in-left:focus { animation: zoomInLeft 0.6s ease-out; }
.my-focus-zoom-in-right:focus { animation: zoomInRight 0.6s ease-out; }
.my-focus-zoom-out-up:focus { animation: zoomOutUp 0.6s ease-out; }
.my-focus-zoom-out-down:focus { animation: zoomOutDown 0.6s ease-out; }
.my-focus-zoom-out-left:focus { animation: zoomOutLeft 0.6s ease-out; }
.my-focus-zoom-out-right:focus { animation: zoomOutRight 0.6s ease-out; }

.my-focus-rotate-in:focus { animation: rotateIn 0.6s ease-out; }
.my-focus-rotate-out:focus { animation: rotateOut 0.6s ease-out; }
.my-focus-flip-in:focus { animation: flipIn 0.6s ease-out; }
.my-focus-flip-out:focus { animation: flipOut 0.6s ease-out; }

.my-focus-bounce-in:focus { animation: bounceIn 0.6s ease-out; }
.my-focus-bounce-out:focus { animation: bounceOut 0.6s ease-out; }
.my-focus-shake:focus { animation: shake 0.6s ease-in-out; }
.my-focus-wobble:focus { animation: wobble 0.6s ease-in-out; }

.my-focus-heartbeat:focus { animation: heartbeat 1.5s ease-in-out infinite; }
.my-focus-rubber-band:focus { animation: rubberBand 1s; }
.my-focus-tada:focus { animation: tada 1s; }
.my-focus-jello:focus { animation: jello 1s; }
.my-focus-flash:focus { animation: flash 1s; }
.my-focus-swing:focus { animation: swing 1s; }
.my-focus-hinge:focus { animation: hinge 2s; }
.my-focus-jack-in-the-box:focus { animation: jackInTheBox 1s; }

.my-focus-light-speed-in:focus { animation: lightSpeedIn 1s; }
.my-focus-light-speed-out:focus { animation: lightSpeedOut 1s; }
.my-focus-roll-in:focus { animation: rollIn 1s; }
.my-focus-roll-out:focus { animation: rollOut 1s; }

/* Active Animation Combinations */
.my-active-fade-in-up:active { animation: fadeInUp 0.6s ease-out; }
.my-active-fade-in-down:active { animation: fadeInDown 0.6s ease-out; }
.my-active-fade-in-left:active { animation: fadeInLeft 0.6s ease-out; }
.my-active-fade-in-right:active { animation: fadeInRight 0.6s ease-out; }
.my-active-fade-out-up:active { animation: fadeOutUp 0.6s ease-out; }
.my-active-fade-out-down:active { animation: fadeOutDown 0.6s ease-out; }
.my-active-fade-out-left:active { animation: fadeOutLeft 0.6s ease-out; }
.my-active-fade-out-right:active { animation: fadeOutRight 0.6s ease-out; }

.my-active-slide-in-up:active { animation: slideInUp 0.6s ease-out; }
.my-active-slide-in-down:active { animation: slideInDown 0.6s ease-out; }
.my-active-slide-in-left:active { animation: slideInLeft 0.6s ease-out; }
.my-active-slide-in-right:active { animation: slideInRight 0.6s ease-out; }
.my-active-slide-out-up:active { animation: slideOutUp 0.6s ease-out; }
.my-active-slide-out-down:active { animation: slideOutDown 0.6s ease-out; }
.my-active-slide-out-left:active { animation: slideOutLeft 0.6s ease-out; }
.my-active-slide-out-right:active { animation: slideOutRight 0.6s ease-out; }

.my-active-zoom-in-up:active { animation: zoomInUp 0.6s ease-out; }
.my-active-zoom-in-down:active { animation: zoomInDown 0.6s ease-out; }
.my-active-zoom-in-left:active { animation: zoomInLeft 0.6s ease-out; }
.my-active-zoom-in-right:active { animation: zoomInRight 0.6s ease-out; }
.my-active-zoom-out-up:active { animation: zoomOutUp 0.6s ease-out; }
.my-active-zoom-out-down:active { animation: zoomOutDown 0.6s ease-out; }
.my-active-zoom-out-left:active { animation: zoomOutLeft 0.6s ease-out; }
.my-active-zoom-out-right:active { animation: zoomOutRight 0.6s ease-out; }

.my-active-rotate-in:active { animation: rotateIn 0.6s ease-out; }
.my-active-rotate-out:active { animation: rotateOut 0.6s ease-out; }
.my-active-flip-in:active { animation: flipIn 0.6s ease-out; }
.my-active-flip-out:active { animation: flipOut 0.6s ease-out; }

.my-active-bounce-in:active { animation: bounceIn 0.6s ease-out; }
.my-active-bounce-out:active { animation: bounceOut 0.6s ease-out; }
.my-active-shake:active { animation: shake 0.6s ease-in-out; }
.my-active-wobble:active { animation: wobble 0.6s ease-in-out; }

.my-active-heartbeat:active { animation: heartbeat 1.5s ease-in-out infinite; }
.my-active-rubber-band:active { animation: rubberBand 1s; }
.my-active-tada:active { animation: tada 1s; }
.my-active-jello:active { animation: jello 1s; }
.my-active-flash:active { animation: flash 1s; }
.my-active-swing:active { animation: swing 1s; }
.my-active-hinge:active { animation: hinge 2s; }
.my-active-jack-in-the-box:active { animation: jackInTheBox 1s; }

.my-active-light-speed-in:active { animation: lightSpeedIn 1s; }
.my-active-light-speed-out:active { animation: lightSpeedOut 1s; }
.my-active-roll-in:active { animation: rollIn 1s; }
.my-active-roll-out:active { animation: rollOut 1s; }

/* Hover Animations */
.my-hover-bounce:hover { animation: bounce 0.5s ease-in-out; }
.my-hover-pulse:hover { animation: pulse 2s infinite; }
.my-hover-shake:hover { animation: shake 0.5s ease-in-out; }
.my-hover-wobble:hover { animation: wobble 1s ease-in-out; }
.my-hover-float:hover { animation: float 3s ease-in-out infinite; }
.my-hover-glow:hover { animation: glow 2s ease-in-out infinite alternate; }
.my-hover-spin:hover { animation: spin 1s linear infinite; }
.my-hover-ping:hover { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* Focus Animations */
.my-focus-bounce:focus { animation: bounce 0.5s ease-in-out; }
.my-focus-pulse:focus { animation: pulse 2s infinite; }
.my-focus-shake:focus { animation: shake 0.5s ease-in-out; }
.my-focus-wobble:focus { animation: wobble 1s ease-in-out; }
.my-focus-float:focus { animation: float 3s ease-in-out infinite; }
.my-focus-glow:focus { animation: glow 2s ease-in-out infinite alternate; }
.my-focus-spin:focus { animation: spin 1s linear infinite; }
.my-focus-ping:focus { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* Active Animations */
.my-active-bounce:active { animation: bounce 0.5s ease-in-out; }
.my-active-pulse:active { animation: pulse 2s infinite; }
.my-active-shake:active { animation: shake 0.5s ease-in-out; }
.my-active-wobble:active { animation: wobble 1s ease-in-out; }
.my-active-float:active { animation: float 3s ease-in-out infinite; }
.my-active-glow:active { animation: glow 2s ease-in-out infinite alternate; }
.my-active-spin:active { animation: spin 1s linear infinite; }
.my-active-ping:active { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* Group Hover Animations */
.group:hover .my-group-hover-bounce { animation: bounce 0.5s ease-in-out; }
.group:hover .my-group-hover-pulse { animation: pulse 2s infinite; }
.group:hover .my-group-hover-shake { animation: shake 0.5s ease-in-out; }
.group:hover .my-group-hover-wobble { animation: wobble 1s ease-in-out; }
.group:hover .my-group-hover-float { animation: float 3s ease-in-out infinite; }
.group:hover .my-group-hover-glow { animation: glow 2s ease-in-out infinite alternate; }
.group:hover .my-group-hover-spin { animation: spin 1s linear infinite; }
.group:hover .my-group-hover-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* Responsive Animations */
@media (min-width: 640px) {
  .my-sm\:fade-in { animation: fadeIn 0.6s ease-out; }
  .my-sm\:fade-out { animation: fadeOut 0.6s ease-out; }
  .my-sm\:fade-in-up { animation: fadeInUp 0.8s ease-out; }
  .my-sm\:fade-in-down { animation: fadeInDown 0.8s ease-out; }
  .my-sm\:fade-in-left { animation: fadeInLeft 0.8s ease-out; }
  .my-sm\:fade-in-right { animation: fadeInRight 0.8s ease-out; }
  .my-sm\:scale-in { animation: scaleIn 0.5s ease-out; }
  .my-sm\:scale-out { animation: scaleOut 0.5s ease-out; }
  .my-sm\:bounce-in { animation: bounceIn 0.8s ease-out; }
  .my-sm\:zoom-in { animation: zoomIn 0.3s ease-out; }
  .my-sm\:rotate-in { animation: rotateIn 0.6s ease-out; }
  .my-sm\:flip-in { animation: flipIn 0.6s ease-out; }
  .my-sm\:slide-up { animation: slideUp 0.6s ease-out; }
  .my-sm\:slide-down { animation: slideDown 0.6s ease-out; }
  .my-sm\:slide-left { animation: slideLeft 0.6s ease-out; }
  .my-sm\:slide-right { animation: slideRight 0.6s ease-out; }
  .my-sm\:pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  .my-sm\:bounce { animation: bounce 1s infinite; }
  .my-sm\:shake { animation: shake 0.5s ease-in-out; }
  .my-sm\:wobble { animation: wobble 1s ease-in-out; }
  .my-sm\:float { animation: float 3s ease-in-out infinite; }
  .my-sm\:glow { animation: glow 2s ease-in-out infinite alternate; }
  .my-sm\:spin { animation: spin 1s linear infinite; }
  .my-sm\:ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
}

@media (min-width: 768px) {
  .my-md\:fade-in { animation: fadeIn 0.6s ease-out; }
  .my-md\:fade-out { animation: fadeOut 0.6s ease-out; }
  .my-md\:fade-in-up { animation: fadeInUp 0.8s ease-out; }
  .my-md\:fade-in-down { animation: fadeInDown 0.8s ease-out; }
  .my-md\:fade-in-left { animation: fadeInLeft 0.8s ease-out; }
  .my-md\:fade-in-right { animation: fadeInRight 0.8s ease-out; }
  .my-md\:scale-in { animation: scaleIn 0.5s ease-out; }
  .my-md\:scale-out { animation: scaleOut 0.5s ease-out; }
  .my-md\:bounce-in { animation: bounceIn 0.8s ease-out; }
  .my-md\:zoom-in { animation: zoomIn 0.3s ease-out; }
  .my-md\:rotate-in { animation: rotateIn 0.6s ease-out; }
  .my-md\:flip-in { animation: flipIn 0.6s ease-out; }
  .my-md\:slide-up { animation: slideUp 0.6s ease-out; }
  .my-md\:slide-down { animation: slideDown 0.6s ease-out; }
  .my-md\:slide-left { animation: slideLeft 0.6s ease-out; }
  .my-md\:slide-right { animation: slideRight 0.6s ease-out; }
  .my-md\:pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  .my-md\:bounce { animation: bounce 1s infinite; }
  .my-md\:shake { animation: shake 0.5s ease-in-out; }
  .my-md\:wobble { animation: wobble 1s ease-in-out; }
  .my-md\:float { animation: float 3s ease-in-out infinite; }
  .my-md\:glow { animation: glow 2s ease-in-out infinite alternate; }
  .my-md\:spin { animation: spin 1s linear infinite; }
  .my-md\:ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
}

@media (min-width: 1024px) {
  .my-lg\:fade-in { animation: fadeIn 0.6s ease-out; }
  .my-lg\:fade-out { animation: fadeOut 0.6s ease-out; }
  .my-lg\:fade-in-up { animation: fadeInUp 0.8s ease-out; }
  .my-lg\:fade-in-down { animation: fadeInDown 0.8s ease-out; }
  .my-lg\:fade-in-left { animation: fadeInLeft 0.8s ease-out; }
  .my-lg\:fade-in-right { animation: fadeInRight 0.8s ease-out; }
  .my-lg\:scale-in { animation: scaleIn 0.5s ease-out; }
  .my-lg\:scale-out { animation: scaleOut 0.5s ease-out; }
  .my-lg\:bounce-in { animation: bounceIn 0.8s ease-out; }
  .my-lg\:zoom-in { animation: zoomIn 0.3s ease-out; }
  .my-lg\:rotate-in { animation: rotateIn 0.6s ease-out; }
  .my-lg\:flip-in { animation: flipIn 0.6s ease-out; }
  .my-lg\:slide-up { animation: slideUp 0.6s ease-out; }
  .my-lg\:slide-down { animation: slideDown 0.6s ease-out; }
  .my-lg\:slide-left { animation: slideLeft 0.6s ease-out; }
  .my-lg\:slide-right { animation: slideRight 0.6s ease-out; }
  .my-lg\:pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  .my-lg\:bounce { animation: bounce 1s infinite; }
  .my-lg\:shake { animation: shake 0.5s ease-in-out; }
  .my-lg\:wobble { animation: wobble 1s ease-in-out; }
  .my-lg\:float { animation: float 3s ease-in-out infinite; }
  .my-lg\:glow { animation: glow 2s ease-in-out infinite alternate; }
  .my-lg\:spin { animation: spin 1s linear infinite; }
  .my-lg\:ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
}

@media (min-width: 1280px) {
  .my-xl\:fade-in { animation: fadeIn 0.6s ease-out; }
  .my-xl\:fade-out { animation: fadeOut 0.6s ease-out; }
  .my-xl\:fade-in-up { animation: fadeInUp 0.8s ease-out; }
  .my-xl\:fade-in-down { animation: fadeInDown 0.8s ease-out; }
  .my-xl\:fade-in-left { animation: fadeInLeft 0.8s ease-out; }
  .my-xl\:fade-in-right { animation: fadeInRight 0.8s ease-out; }
  .my-xl\:scale-in { animation: scaleIn 0.5s ease-out; }
  .my-xl\:scale-out { animation: scaleOut 0.5s ease-out; }
  .my-xl\:bounce-in { animation: bounceIn 0.8s ease-out; }
  .my-xl\:zoom-in { animation: zoomIn 0.3s ease-out; }
  .my-xl\:rotate-in { animation: rotateIn 0.6s ease-out; }
  .my-xl\:flip-in { animation: flipIn 0.6s ease-out; }
  .my-xl\:slide-up { animation: slideUp 0.6s ease-out; }
  .my-xl\:slide-down { animation: slideDown 0.6s ease-out; }
  .my-xl\:slide-left { animation: slideLeft 0.6s ease-out; }
  .my-xl\:slide-right { animation: slideRight 0.6s ease-out; }
  .my-xl\:pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  .my-xl\:bounce { animation: bounce 1s infinite; }
  .my-xl\:shake { animation: shake 0.5s ease-in-out; }
  .my-xl\:wobble { animation: wobble 1s ease-in-out; }
  .my-xl\:float { animation: float 3s ease-in-out infinite; }
  .my-xl\:glow { animation: glow 2s ease-in-out infinite alternate; }
  .my-xl\:spin { animation: spin 1s linear infinite; }
  .my-xl\:ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
}

@media (min-width: 1536px) {
  .my-2xl\:fade-in { animation: fadeIn 0.6s ease-out; }
  .my-2xl\:fade-out { animation: fadeOut 0.6s ease-out; }
  .my-2xl\:fade-in-up { animation: fadeInUp 0.8s ease-out; }
  .my-2xl\:fade-in-down { animation: fadeInDown 0.8s ease-out; }
  .my-2xl\:fade-in-left { animation: fadeInLeft 0.8s ease-out; }
  .my-2xl\:fade-in-right { animation: fadeInRight 0.8s ease-out; }
  .my-2xl\:scale-in { animation: scaleIn 0.5s ease-out; }
  .my-2xl\:scale-out { animation: scaleOut 0.5s ease-out; }
  .my-2xl\:bounce-in { animation: bounceIn 0.8s ease-out; }
  .my-2xl\:zoom-in { animation: zoomIn 0.3s ease-out; }
  .my-2xl\:rotate-in { animation: rotateIn 0.6s ease-out; }
  .my-2xl\:flip-in { animation: flipIn 0.6s ease-out; }
  .my-2xl\:slide-up { animation: slideUp 0.6s ease-out; }
  .my-2xl\:slide-down { animation: slideDown 0.6s ease-out; }
  .my-2xl\:slide-left { animation: slideLeft 0.6s ease-out; }
  .my-2xl\:slide-right { animation: slideRight 0.6s ease-out; }
  .my-2xl\:pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  .my-2xl\:bounce { animation: bounce 1s infinite; }
  .my-2xl\:shake { animation: shake 0.5s ease-in-out; }
  .my-2xl\:wobble { animation: wobble 1s ease-in-out; }
  .my-2xl\:float { animation: float 3s ease-in-out infinite; }
  .my-2xl\:glow { animation: glow 2s ease-in-out infinite alternate; }
  .my-2xl\:spin { animation: spin 1s linear infinite; }
  .my-2xl\:ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
}