diff --git a/src/index.css b/src/index.css
index 335a4d7..c1dfa92 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,910 +1,918 @@
-/**
- * tailwind-animations
- * Tailwind CSS v4 Plugin - CSS-only implementation
- * 
- * @author Miguel Ángel Durán (@midudev) & su maravillosa comunidad
- * @license MIT
- */
-
-/* ============================================
-   Theme Configuration
-   ============================================ */
-
-@theme inline {
-  /* Animation Delay Values - using tw-anim- prefix to avoid conflicts */
-  --tw-anim-delay-none: 0ms;
-  --tw-anim-delay-0: 0ms;
-  --tw-anim-delay-100: 100ms;
-  --tw-anim-delay-150: 150ms;
-  --tw-anim-delay-200: 200ms;
-  --tw-anim-delay-250: 250ms;
-  --tw-anim-delay-300: 300ms;
-  --tw-anim-delay-400: 400ms;
-  --tw-anim-delay-500: 500ms;
-  --tw-anim-delay-700: 700ms;
-  --tw-anim-delay-800: 800ms;
-  --tw-anim-delay-900: 900ms;
-  --tw-anim-delay-1000: 1000ms;
-
-  /* Animation Duration Values */
-  --tw-anim-duration-none: 0ms;
-  --tw-anim-duration-slower: 500ms;
-  --tw-anim-duration-slow: 400ms;
-  --tw-anim-duration-normal: 300ms;
-  --tw-anim-duration-fast: 200ms;
-  --tw-anim-duration-faster: 100ms;
-  --tw-anim-duration-0: 0ms;
-  --tw-anim-duration-100: 100ms;
-  --tw-anim-duration-150: 150ms;
-  --tw-anim-duration-200: 200ms;
-  --tw-anim-duration-250: 250ms;
-  --tw-anim-duration-300: 300ms;
-  --tw-anim-duration-400: 400ms;
-  --tw-anim-duration-500: 500ms;
-  --tw-anim-duration-700: 700ms;
-  --tw-anim-duration-800: 800ms;
-  --tw-anim-duration-900: 900ms;
-  --tw-anim-duration-1000: 1000ms;
-
-  /* Animation Iteration Count Values */
-  --tw-anim-iteration-count-none: 0;
-  --tw-anim-iteration-count-once: 1;
-  --tw-anim-iteration-count-twice: 2;
-  --tw-anim-iteration-count-thrice: 3;
-  --tw-anim-iteration-count-infinite: infinite;
-
-  /* Animation Fill Mode Values */
-  --tw-anim-fill-mode-none: none;
-  --tw-anim-fill-mode-forwards: forwards;
-  --tw-anim-fill-mode-backwards: backwards;
-  --tw-anim-fill-mode-both: both;
-
-  /* Animation Steps Values */
-  --tw-anim-steps-none: 0;
-  --tw-anim-steps-retro: 8;
-  --tw-anim-steps-normal: 16;
-  --tw-anim-steps-modern: 24;
-
-  /* Animation Cubic Bezier Values */
-  --tw-anim-bezier-sine-in: cubic-bezier(0.12, 0, 0.39, 0);
-  --tw-anim-bezier-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);
-  --tw-anim-bezier-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-  --tw-anim-bezier-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-  --tw-anim-bezier-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  --tw-anim-bezier-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-  --tw-anim-bezier-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  --tw-anim-bezier-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);
-  --tw-anim-bezier-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --tw-anim-bezier-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-  --tw-anim-bezier-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);
-  --tw-anim-bezier-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);
-  --tw-anim-bezier-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-  --tw-anim-bezier-quint-out: cubic-bezier(0.23, 1, 0.32, 1);
-  --tw-anim-bezier-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);
-  --tw-anim-bezier-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);
-  --tw-anim-bezier-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
-  --tw-anim-bezier-expo-in-out: cubic-bezier(1, 0, 0, 1);
-  --tw-anim-bezier-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-  --tw-anim-bezier-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);
-  --tw-anim-bezier-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  --tw-anim-bezier-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
-  --tw-anim-bezier-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  --tw-anim-bezier-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-
-  /* Animation Range Values */
-  --tw-anim-range-normal: normal;
-  --tw-anim-range-cover: cover;
-  --tw-anim-range-contain: contain;
-  --tw-anim-range-entry: entry;
-  --tw-anim-range-exit: exit;
-  --tw-anim-range-gradual: 10% 90%;
-  --tw-anim-range-moderate: 20% 80%;
-  --tw-anim-range-brisk: 30% 70%;
-  --tw-anim-range-rapid: 40% 60%;
-
-  /* Timeline Values */
-  --tw-timeline-none: none;
-  --tw-timeline-auto: auto;
-  --tw-timeline-scroll: scroll();
-  --tw-timeline-scroll-x: scroll(x);
-  --tw-timeline-scroll-y: scroll(y);
-  --tw-timeline-scroll-block: scroll(block);
-  --tw-timeline-scroll-inline: scroll(inline);
-  --tw-timeline-view: view();
-  --tw-timeline-view-x: view(x);
-  --tw-timeline-view-y: view(y);
-  --tw-timeline-view-block: view(block);
-  --tw-timeline-view-inline: view(inline);
-
-  /* Scroll/View Timeline Axis Values */
-  --tw-scroll-timeline-axis-block: block;
-  --tw-scroll-timeline-axis-inline: inline;
-  --tw-scroll-timeline-axis-x: x;
-  --tw-scroll-timeline-axis-y: y;
-  --tw-view-timeline-axis-block: block;
-  --tw-view-timeline-axis-inline: inline;
-  --tw-view-timeline-axis-x: x;
-  --tw-view-timeline-axis-y: y;
-
-  /* ============================================
-     Predefined Animations
-     ============================================ */
-
-  --animate-blurred-fade-in: blurred-fade-in 0.9s ease-in-out both;
-  --animate-fade-in: fade-in 0.6s ease-in both;
-  --animate-fade-out: fade-out 0.6s ease-out both;
-  --animate-slide-in-top: slide-in-top 0.6s ease-out both;
-  --animate-slide-in-bottom: slide-in-bottom 0.6s ease-out both;
-  --animate-slide-out-top: slide-out-top 0.6s ease-out both;
-  --animate-slide-out-bottom: slide-out-bottom 0.6s ease-out both;
-  --animate-zoom-in: zoom-in 0.6s ease-out both;
-  --animate-zoom-out: zoom-out 0.6s ease-out both;
-  --animate-rotate-90: rotate-90 1s ease-in-out both;
-  --animate-rotate-180: rotate-180 1s ease-in-out both;
-  --animate-rotate-360: rotate-360 1s linear both;
-  --animate-flip-horizontal: flip-horizontal 1s ease-in-out both;
-  --animate-flip-vertical: flip-vertical 1s ease-in-out both;
-  --animate-bouncing: bouncing 1s ease-in-out both;
-  --animate-swing: swing 1s ease-in-out both;
-  --animate-wobble: wobble 1s ease-in-out both;
-  --animate-pulsing: pulsing 1s ease-in-out both;
-  --animate-shake: shake 0.5s ease-in-out both;
-  --animate-tada: tada 1s ease-in-out both;
-  --animate-jump: jump 1s ease-in-out both;
-  --animate-hang: hang 1s ease-in-out both;
-  --animate-roll-in: roll-in 1s ease-in-out both;
-  --animate-roll-out: roll-out 1s ease-in-out both;
-  --animate-float: float 1s ease-in-out both;
-  --animate-sink: sink 1s ease-in-out both;
-  --animate-flash: flash 1s ease-in-out both;
-  --animate-jiggle: jiggle 0.5s ease-in-out both;
-  --animate-rubber-band: rubber-band 1s ease-in-out both;
-  --animate-scale: scale 0.6s ease-out both;
-  --animate-slide-in-left: slide-in-left 0.6s ease-out both;
-  --animate-slide-in-right: slide-in-right 0.6s ease-out both;
-  --animate-slide-out-left: slide-out-left 0.6s ease-out both;
-  --animate-slide-out-right: slide-out-right 0.6s ease-out both;
-  --animate-spin-clockwise: spin-clockwise 0.6s linear both;
-  --animate-spin-counter-clockwise: spin-counter-clockwise 0.6s linear both;
-  --animate-flip-x: flip-x 0.6s ease-out both;
-  --animate-flip-y: flip-y 0.6s ease-out both;
-  --animate-blink: blink 0.5s both;
-  --animate-pop: pop 0.6s ease-out both;
-  --animate-expand-horizontally: expand-horizontally 0.6s ease-out both;
-  --animate-contract-horizontally: contract-horizontally 0.6s ease-out both;
-  --animate-expand-vertically: expand-vertically 0.6s ease-out both;
-  --animate-contract-vertically: contract-vertically 0.6s ease-out both;
-  --animate-fade-in-up: fade-in-up 0.6s ease-in-out both;
-  --animate-fade-in-down: fade-in-down 0.6s ease-in-out both;
-  --animate-fade-in-left: fade-in-left 0.6s ease-in-out both;
-  --animate-fade-in-right: fade-in-right 0.6s ease-in-out both;
-  --animate-fade-out-up: fade-out-up 0.6s ease-out both;
-  --animate-fade-out-down: fade-out-down 0.6s ease-out both;
-  --animate-fade-out-left: fade-out-left 0.6s ease-out both;
-  --animate-fade-out-right: fade-out-right 0.6s ease-out both;
-  --animate-sway: sway 0.6s ease-out both;
-  --animate-flip-in-x: flip-in-x 0.6s ease-out both;
-  --animate-flip-in-y: flip-in-y 0.6s ease-out both;
-  --animate-flip-out-x: flip-out-x 0.6s ease-out both;
-  --animate-flip-out-y: flip-out-y 0.6s ease-out both;
-  --animate-rotate-in: rotate-in 0.6s ease-out both;
-  --animate-rotate-out: rotate-out 0.6s ease-out both;
-  --animate-slide-rotate-in: slide-rotate-in 0.6s ease-out both;
-  --animate-slide-rotate-out: slide-rotate-out 0.6s ease-out both;
-  --animate-heartbeat: heartbeat 0.6s ease-out both;
-  --animate-horizontal-vibration: horizontal-vibration 0.3s linear infinite both;
-  --animate-rotational-wave: rotational-wave 2s ease-in-out infinite both;
-  --animate-skew: skew 0.5s ease-in-out both;
-  --animate-skew-right: skew-right 0.5s ease-in-out both;
-  --animate-vertical-bounce: vertical-bounce 0.6s ease-in-out both;
-  --animate-horizontal-bounce: horizontal-bounce 0.6s ease-in-out both;
-  --animate-tilt: tilt 0.6s ease-in-out both;
-  --animate-squeeze: squeeze 0.6s ease-in-out both;
-  --animate-slide-up-fade: slide-up-fade 0.6s ease-out both;
-  --animate-bounce-fade-in: bounce-fade-in 0.6s ease-out both;
-  --animate-swing-drop-in: swing-drop-in 0.6s ease-out both;
-  --animate-pulse-fade-in: pulse-fade-in 0.6s ease-out both;
-  --animate-impulse-rotation-right: impulse-rotation-right 1s ease-in-out both;
-  --animate-impulse-rotation-left: impulse-rotation-left 1s ease-in-out both;
-  --animate-dancing: dancing 1s ease-in-out both;
-  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  --animate-jelly: jelly 1s ease-out forwards;
-
-  /* ============================================
-     Keyframes
-     ============================================ */
-
-  @keyframes fade-in {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
-  }
-
-  @keyframes fade-out {
-    0% { opacity: 1; }
-    100% { opacity: 0; }
-  }
-
-  @keyframes slide-in-top {
-    0% { transform: translateY(-20px); }
-    100% { transform: translateY(0); }
-  }
-
-  @keyframes slide-in-bottom {
-    0% { transform: translateY(20px); }
-    100% { transform: translateY(0); }
-  }
-
-  @keyframes slide-out-top {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(-20px); }
-  }
-
-  @keyframes slide-out-bottom {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(20px); }
-  }
-
-  @keyframes zoom-in {
-    0% { opacity: 0; transform: scale(.5); }
-    100% { opacity: 1; transform: scale(1); }
-  }
-
-  @keyframes zoom-out {
-    0% { opacity: 1; transform: scale(1); }
-    100% { opacity: 0; transform: scale(.5); }
-  }
-
-  @keyframes rotate-90 {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(90deg); }
-  }
-
-  @keyframes rotate-180 {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(180deg); }
-  }
-
-  @keyframes rotate-360 {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  @keyframes flip-horizontal {
-    0% { transform: rotateY(0deg); }
-    100% { transform: rotateY(180deg); }
-  }
-
-  @keyframes flip-vertical {
-    0% { transform: rotateX(0deg); }
-    100% { transform: rotateX(180deg); }
-  }
-
-  @keyframes bouncing {
-    0% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
-    100% { transform: translateY(0); }
-  }
-
-  @keyframes swing {
-    0% { transform: rotate(0deg); }
-    50% { transform: rotate(15deg); }
-    100% { transform: rotate(0deg); }
-  }
-
-  @keyframes wobble {
-    0% { transform: translateX(0); }
-    15% { transform: translateX(-20px); }
-    30% { transform: translateX(20%); }
-    45% { transform: translateX(-15%); }
-    60% { transform: translateX(20px); }
-    75% { transform: translateX(-5%); }
-    100% { transform: translateX(0); }
-  }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-  }
-
-  @keyframes pulsing {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.1); }
-    100% { transform: scale(1); }
-  }
-
-  @keyframes shake {
-    0% { transform: translateX(0); }
-    25% { transform: translateX(-10px); }
-    50% { transform: translateX(10px); }
-    75% { transform: translateX(-10px); }
-    100% { transform: translateX(0); }
-  }
-
-  @keyframes tada {
-    0% { transform: scale(1); }
-    10% { transform: scale(0.9) rotate(-3deg); }
-    20% { transform: scale(0.9) rotate(-3deg); }
-    30% { transform: scale(1.1) rotate(3deg); }
-    40% { transform: scale(1.1) rotate(-3deg); }
-    50% { transform: scale(1.1) rotate(3deg); }
-    60% { transform: scale(1.1) rotate(-3deg); }
-    70% { transform: scale(1.1) rotate(3deg); }
-    80% { transform: scale(1.1) rotate(3deg); }
-    90% { transform: scale(1.1) rotate(3deg); }
-    100% { transform: scale(1) rotate(0); }
-  }
-
-  @keyframes jump {
-    0% { transform: translateY(0); }
-    50% { transform: translateY(-20px); }
-    100% { transform: translateY(0); }
-  }
-
-  @keyframes hang {
-    0% { transform: translateY(-20px); }
-    50% { transform: translateY(0); }
-    100% { transform: translateY(-20px); }
-  }
-
-  @keyframes roll-in {
-    0% { transform: translateX(-20px) rotate(-120deg); }
-    100% { transform: translateX(0) rotate(0); }
-  }
-
-  @keyframes roll-out {
-    0% { transform: translateX(0) rotate(0); }
-    100% { transform: translateX(20px) rotate(120deg); }
-  }
-
-  @keyframes float {
-    0% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
-    100% { transform: translateY(0); }
-  }
-
-  @keyframes sink {
-    0% { transform: translateY(-10px); }
-    50% { transform: translateY(0); }
-    100% { transform: translateY(-10px); }
-  }
-
-  @keyframes flash {
-    0% { opacity: 1; }
-    50% { opacity: 0; }
-    100% { opacity: 1; }
-  }
-
-  @keyframes jiggle {
-    0% { transform: rotate(-3deg); }
-    50% { transform: rotate(3deg); }
-    100% { transform: rotate(-3deg); }
-  }
-
-  @keyframes rubber-band {
-    0% { transform: scale(1); }
-    30% { transform: scale(1.25); }
-    40% { transform: scale(0.75); }
-    50% { transform: scale(1.15); }
-    65% { transform: scale(0.95); }
-    75% { transform: scale(1.05); }
-    100% { transform: scale(1); }
-  }
-
-  @keyframes scale {
-    0% { transform: scale(1); }
-    100% { transform: scale(1.10); }
-  }
-
-  @keyframes slide-in-left {
-    0% { transform: translateX(-20px); }
-    100% { transform: translateX(0); }
-  }
-
-  @keyframes slide-in-right {
-    0% { transform: translateX(20px); }
-    100% { transform: translateX(0); }
-  }
-
-  @keyframes slide-out-left {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(-20px); }
-  }
-
-  @keyframes slide-out-right {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(20px); }
-  }
-
-  @keyframes spin-clockwise {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  @keyframes spin-counter-clockwise {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(-360deg); }
-  }
-
-  @keyframes flip-x {
-    0% { transform: scaleX(1); }
-    50% { transform: scaleX(-1); }
-    100% { transform: scaleX(1); }
-  }
-
-  @keyframes flip-y {
-    0% { transform: scaleY(1); }
-    50% { transform: scaleY(-1); }
-    100% { transform: scaleY(1); }
-  }
-
-  @keyframes blink {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
-  }
-
-  @keyframes pop {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.1); }
-    100% { transform: scale(1); }
-  }
-
-  @keyframes expand-horizontally {
-    0% { transform: scaleX(0); }
-    100% { transform: scaleX(1); }
-  }
-
-  @keyframes contract-horizontally {
-    0% { transform: scaleX(1); }
-    100% { transform: scaleX(0); }
-  }
-
-  @keyframes expand-vertically {
-    0% { transform: scaleY(0); }
-    100% { transform: scaleY(1); }
-  }
-
-  @keyframes contract-vertically {
-    0% { transform: scaleY(1); }
-    100% { transform: scaleY(0); }
-  }
-
-  @keyframes fade-in-up {
-    0% { opacity: 0; transform: translateY(20px); }
-    100% { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes fade-in-down {
-    0% { opacity: 0; transform: translateY(-20px); }
-    100% { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes fade-in-left {
-    0% { opacity: 0; transform: translateX(20px); }
-    100% { opacity: 1; transform: translateX(0); }
-  }
-
-  @keyframes fade-in-right {
-    0% { opacity: 0; transform: translateX(-20px); }
-    100% { opacity: 1; transform: translateX(0); }
-  }
-
-  @keyframes fade-out-up {
-    0% { opacity: 1; transform: translateY(0); }
-    100% { opacity: 0; transform: translateY(-20px); }
-  }
-
-  @keyframes fade-out-down {
-    0% { opacity: 1; transform: translateY(0); }
-    100% { opacity: 0; transform: translateY(20px); }
-  }
-
-  @keyframes fade-out-left {
-    0% { opacity: 1; transform: translateX(0); }
-    100% { opacity: 0; transform: translateX(-20px); }
-  }
-
-  @keyframes fade-out-right {
-    0% { opacity: 1; transform: translateX(0); }
-    100% { opacity: 0; transform: translateX(20px); }
-  }
-
-  @keyframes sway {
-    0% { transform: rotate(0deg); }
-    50% { transform: rotate(15deg); }
-    100% { transform: rotate(0deg); }
-  }
-
-  @keyframes flip-in-x {
-    0% { opacity: 0; transform: rotateY(90deg); }
-    100% { opacity: 1; transform: rotateY(0deg); }
-  }
-
-  @keyframes flip-in-y {
-    0% { opacity: 0; transform: rotateX(90deg); }
-    100% { opacity: 1; transform: rotateX(0deg); }
-  }
-
-  @keyframes flip-out-x {
-    0% { opacity: 1; transform: rotateY(0deg); }
-    100% { opacity: 0; transform: rotateY(90deg); }
-  }
-
-  @keyframes flip-out-y {
-    0% { opacity: 1; transform: rotateX(0deg); }
-    100% { opacity: 0; transform: rotateX(90deg); }
-  }
-
-  @keyframes rotate-in {
-    0% { opacity: 0; transform: rotate(-90deg); }
-    100% { opacity: 1; transform: rotate(0deg); }
-  }
-
-  @keyframes rotate-out {
-    0% { opacity: 1; transform: rotate(0deg); }
-    100% { opacity: 0; transform: rotate(90deg); }
-  }
-
-  @keyframes slide-rotate-in {
-    0% { opacity: 0; transform: translateX(-20px) rotate(-90deg); }
-    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
-  }
-
-  @keyframes slide-rotate-out {
-    0% { opacity: 1; transform: translateX(0) rotate(0deg); }
-    100% { opacity: 0; transform: translateX(20px) rotate(90deg); }
-  }
-
-  @keyframes heartbeat {
-    0% { transform: scale(1); }
-    25% { transform: scale(1.1); }
-    50% { transform: scale(1); }
-    75% { transform: scale(0.9); }
-    100% { transform: scale(1); }
-  }
-
-  @keyframes blurred-fade-in {
-    0% { filter: blur(5px); opacity: 0; }
-    100% { filter: blur(0); opacity: 1; }
-  }
-
-  @keyframes horizontal-vibration {
-    0% { transform: translateX(0); }
-    25% { transform: translateX(5px); }
-    50% { transform: translateX(-5px); }
-    75% { transform: translateX(5px); }
-    100% { transform: translateX(0); }
-  }
-
-  @keyframes rotational-wave {
-    0% { transform: rotate(0deg); }
-    25% { transform: rotate(10deg); }
-    50% { transform: rotate(-10deg); }
-    75% { transform: rotate(10deg); }
-    100% { transform: rotate(0deg); }
-  }
-
-  @keyframes skew {
-    0% { transform: skew(0deg); }
-    100% { transform: skew(20deg); }
-  }
-
-  @keyframes skew-right {
-    0% { transform: skew(0deg); }
-    100% { transform: skew(-20deg); }
-  }
-
-  @keyframes vertical-bounce {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-20px); }
-  }
-
-  @keyframes horizontal-bounce {
-    0%, 100% { transform: translateX(0); }
-    50% { transform: translateX(20px); }
-  }
-
-  @keyframes tilt {
-    0% { transform: rotateY(0deg); }
-    50% { transform: rotateY(20deg); }
-    100% { transform: rotateY(0deg); }
-  }
-
-  @keyframes squeeze {
-    0%, 100% { transform: scale(1, 1); }
-    50% { transform: scale(1.1, 0.9); }
-  }
-
-  @keyframes slide-up-fade {
-    0% { opacity: 0; transform: translateY(50px); }
-    100% { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes bounce-fade-in {
-    0% { transform: scale(0.5); opacity: 0; }
-    100% { transform: scale(1); opacity: 1; }
-  }
-
-  @keyframes swing-drop-in {
-    0% { transform: rotate(-30deg) translateY(-50px); opacity: 0; }
-    100% { transform: rotate(0deg) translateY(0); opacity: 1; }
-  }
-
-  @keyframes pulse-fade-in {
-    0% { transform: scale(0.9); opacity: 0; }
-    50% { transform: scale(1.05); opacity: 0.5; }
-    100% { transform: scale(1); opacity: 1; }
-  }
-
-  @keyframes impulse-rotation-right {
-    0% { transform: rotate(0deg); }
-    50% { transform: rotate(-40deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  @keyframes impulse-rotation-left {
-    0% { transform: rotate(0deg); }
-    50% { transform: rotate(40deg); }
-    100% { transform: rotate(-360deg); }
-  }
-
-  @keyframes dancing {
-    0% { transform: skew(0deg); }
-    25% { transform: skew(-40deg); }
-    50% { transform: skew(40deg); }
-    75% { transform: skew(-40deg); }
-    100% { transform: skew(0deg); }
-  }
-
-  @keyframes jelly {
-    0% { transform: scale(1, 1); }
-    20% { transform: scale(1.25, 0.75); }
-    40% { transform: scale(0.75, 1.25); }
-    60% { transform: scale(1.15, 0.85); }
-    75% { transform: scale(0.95, 1.05); }
-    85% { transform: scale(1.05, 0.95); }
-    92% { transform: scale(1, 1.02); }
-    100% { transform: scale(1, 1); }
-  }
-}
-
-/* ============================================
-   Utility Classes - Animation Delay
-   ============================================ */
-
-@utility animate-delay-* {
-  animation-delay: calc(--value(integer) * 1ms);
-  animation-delay: --value(--tw-anim-delay-*, [duration], [*]);
-}
-
-/* ============================================
-   Utility Classes - Animation Duration
-   ============================================ */
-
-@utility animate-duration-* {
-  animation-duration: calc(--value(integer) * 1ms);
-  animation-duration: --value(--tw-anim-duration-*, [duration], [*]);
-}
-
-/* ============================================
-   Utility Classes - Animation Iteration Count
-   ============================================ */
-
-@utility animate-iteration-count-* {
-  animation-iteration-count: --value(--tw-anim-iteration-count-*, number, [number], [*]);
-}
-
-/* ============================================
-   Utility Classes - Animation Fill Mode
-   ============================================ */
-
-@utility animate-fill-mode-* {
-  animation-fill-mode: --value(--tw-anim-fill-mode-*, [*]);
-}
-
-/* ============================================
-   Utility Classes - Animation Steps
-   ============================================ */
-
-@utility animate-steps-* {
-  animation-timing-function: steps(--value(--tw-anim-steps-*, integer, [integer]));
-}
-
-/* ============================================
-   Utility Classes - Animation Timing Functions
-   ============================================ */
-
-@utility animate-ease {
-  animation-timing-function: ease;
-}
-
-@utility animate-ease-in {
-  animation-timing-function: ease-in;
-}
-
-@utility animate-ease-out {
-  animation-timing-function: ease-out;
-}
-
-@utility animate-ease-in-out {
-  animation-timing-function: ease-in-out;
-}
-
-@utility animate-linear {
-  animation-timing-function: linear;
-}
-
-/* ============================================
-   Utility Classes - Animation Bezier Curves
-   ============================================ */
-
-@utility animate-bezier-* {
-  animation-timing-function: --value(--tw-anim-bezier-*, [*]);
-}
-
-/* ============================================
-   Utility Classes - Animation Direction
-   ============================================ */
-
-@utility animate-direction-normal {
-  animation-direction: normal;
-}
-
-@utility animate-direction-reverse {
-  animation-direction: reverse;
-}
-
-@utility animate-direction-alternate {
-  animation-direction: alternate;
-}
-
-@utility animate-direction-alternate-reverse {
-  animation-direction: alternate-reverse;
-}
-
-/* ============================================
-   Utility Classes - Animation Play State
-   ============================================ */
-
-@utility animate-play-running {
-  animation-play-state: running;
-}
-
-@utility animate-play-paused {
-  animation-play-state: paused;
-}
-
-/* ============================================
-   Utility Classes - Dialog Entry/Exit Effects
-   ============================================ */
-
-@layer utilities {
-  .animate-dialog {
-    opacity: var(--tw-anim-dialog-start-opacity, 0);
-    translate: var(--tw-anim-dialog-start-translate, 0 1.5rem);
-    scale: var(--tw-anim-dialog-start-scale, 0.96);
-    will-change: opacity, translate, scale;
-    transition:
-      opacity var(--tw-anim-dialog-duration, 350ms) ease,
-      translate var(--tw-anim-dialog-duration, 350ms) var(--tw-anim-dialog-easing, cubic-bezier(0.22, 1, 0.36, 1)),
-      scale var(--tw-anim-dialog-duration, 350ms) var(--tw-anim-dialog-easing, cubic-bezier(0.22, 1, 0.36, 1)),
-      overlay var(--tw-anim-dialog-duration, 350ms) ease allow-discrete,
-      display var(--tw-anim-dialog-duration, 350ms) ease allow-discrete;
-  }
-
-  .animate-dialog[open] {
-    opacity: 1;
-    translate: 0 0;
-    scale: 1;
-  }
-
-  .animate-dialog[open].is-closing {
-    opacity: var(--tw-anim-dialog-start-opacity, 0);
-    translate: var(--tw-anim-dialog-start-translate, 0 1.5rem);
-    scale: var(--tw-anim-dialog-start-scale, 0.96);
-  }
-
-  .animate-dialog[open].is-opening {
-    opacity: var(--tw-anim-dialog-start-opacity, 0);
-    translate: var(--tw-anim-dialog-start-translate, 0 1.5rem);
-    scale: var(--tw-anim-dialog-start-scale, 0.96);
-  }
-
-  @starting-style {
-    .animate-dialog[open] {
-      opacity: var(--tw-anim-dialog-start-opacity, 0);
-      translate: var(--tw-anim-dialog-start-translate, 0 1.5rem);
-      scale: var(--tw-anim-dialog-start-scale, 0.96);
-    }
-  }
-
-  .animate-dialog::backdrop {
-    opacity: 0;
-    background: var(--tw-anim-dialog-backdrop-background, rgb(15 23 42 / 0.58));
-    backdrop-filter: var(--tw-anim-dialog-backdrop-filter, blur(8px));
-    transition:
-      opacity var(--tw-anim-dialog-duration, 350ms) ease,
-      overlay var(--tw-anim-dialog-duration, 350ms) ease allow-discrete,
-      display var(--tw-anim-dialog-duration, 350ms) ease allow-discrete;
-  }
-
-  .animate-dialog[open]::backdrop {
-    opacity: 1;
-  }
-
-  .animate-dialog[open].is-closing::backdrop {
-    opacity: 0;
-  }
-
-  .animate-dialog[open].is-opening::backdrop {
-    opacity: 0;
-  }
-
-  @starting-style {
-    .animate-dialog[open]::backdrop {
-      opacity: 0;
-    }
-  }
-}
-
-@utility animate-dialog-from-top {
-  --tw-anim-dialog-start-translate: 0 -1.5rem;
-}
-
-@utility animate-dialog-from-bottom {
-  --tw-anim-dialog-start-translate: 0 1.5rem;
-}
-
-@utility animate-dialog-from-left {
-  --tw-anim-dialog-start-translate: -1.5rem 0;
-}
-
-@utility animate-dialog-from-right {
-  --tw-anim-dialog-start-translate: 1.5rem 0;
-}
-
-@utility animate-dialog-fade {
-  --tw-anim-dialog-start-translate: 0 0;
-  --tw-anim-dialog-start-scale: 1;
-}
-
-@utility animate-dialog-zoom {
-  --tw-anim-dialog-start-translate: 0 0;
-  --tw-anim-dialog-start-scale: 0.92;
-}
-
-@utility animate-dialog-duration-* {
-  --tw-anim-dialog-duration: calc(--value(integer) * 1ms);
-  --tw-anim-dialog-duration: --value(--tw-anim-duration-*, [duration], [*]);
-}
-
-/* ============================================
-   Utility Classes - Animation Timeline
-   ============================================ */
-
-@utility timeline-* {
-  animation-timeline: --value(--tw-timeline-*, [ident], [*]) !important;
-}
-
-/* ============================================
-   Utility Classes - Scroll Timeline Axis
-   ============================================ */
-
-@utility scroll-timeline-axis-* {
-  scroll-timeline-axis: --value(--tw-scroll-timeline-axis-*, [ident], [*]);
-}
-
-/* ============================================
-   Utility Classes - View Timeline Axis
-   ============================================ */
-
-@utility view-timeline-axis-* {
-  view-timeline-axis: --value(--tw-view-timeline-axis-*, [ident], [*]);
-}
-
-/* ============================================
-   Utility Classes - Animation Range
-   ============================================ */
-
-@utility animate-range-* {
-  animation-range: --value(--tw-anim-range-*, [*]);
-}
+/**
+ * tailwind-animations
+ * Tailwind CSS v4 Plugin - CSS-only implementation
+ * 
+ * @author Miguel Ángel Durán (@midudev) & su maravillosa comunidad
+ * @license MIT
+ */
+
+/* ============================================
+   Theme Configuration
+   ============================================ */
+
+@theme inline {
+  /* Animation Delay Values - using tw-anim- prefix to avoid conflicts */
+  --tw-anim-delay-none: 0ms;
+  --tw-anim-delay-0: 0ms;
+  --tw-anim-delay-100: 100ms;
+  --tw-anim-delay-150: 150ms;
+  --tw-anim-delay-200: 200ms;
+  --tw-anim-delay-250: 250ms;
+  --tw-anim-delay-300: 300ms;
+  --tw-anim-delay-400: 400ms;
+  --tw-anim-delay-500: 500ms;
+  --tw-anim-delay-700: 700ms;
+  --tw-anim-delay-800: 800ms;
+  --tw-anim-delay-900: 900ms;
+  --tw-anim-delay-1000: 1000ms;
+
+  /* Animation Duration Values */
+  --tw-anim-duration-none: 0ms;
+  --tw-anim-duration-slower: 500ms;
+  --tw-anim-duration-slow: 400ms;
+  --tw-anim-duration-normal: 300ms;
+  --tw-anim-duration-fast: 200ms;
+  --tw-anim-duration-faster: 100ms;
+  --tw-anim-duration-0: 0ms;
+  --tw-anim-duration-100: 100ms;
+  --tw-anim-duration-150: 150ms;
+  --tw-anim-duration-200: 200ms;
+  --tw-anim-duration-250: 250ms;
+  --tw-anim-duration-300: 300ms;
+  --tw-anim-duration-400: 400ms;
+  --tw-anim-duration-500: 500ms;
+  --tw-anim-duration-700: 700ms;
+  --tw-anim-duration-800: 800ms;
+  --tw-anim-duration-900: 900ms;
+  --tw-anim-duration-1000: 1000ms;
+
+  /* Animation Iteration Count Values */
+  --tw-anim-iteration-count-none: 0;
+  --tw-anim-iteration-count-once: 1;
+  --tw-anim-iteration-count-twice: 2;
+  --tw-anim-iteration-count-thrice: 3;
+  --tw-anim-iteration-count-infinite: infinite;
+
+  /* Animation Fill Mode Values */
+  --tw-anim-fill-mode-none: none;
+  --tw-anim-fill-mode-forwards: forwards;
+  --tw-anim-fill-mode-backwards: backwards;
+  --tw-anim-fill-mode-both: both;
+
+  /* Animation Steps Values */
+  --tw-anim-steps-none: 0;
+  --tw-anim-steps-retro: 8;
+  --tw-anim-steps-normal: 16;
+  --tw-anim-steps-modern: 24;
+
+  /* Animation Cubic Bezier Values */
+  --tw-anim-bezier-sine-in: cubic-bezier(0.12, 0, 0.39, 0);
+  --tw-anim-bezier-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);
+  --tw-anim-bezier-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  --tw-anim-bezier-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --tw-anim-bezier-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --tw-anim-bezier-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --tw-anim-bezier-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --tw-anim-bezier-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --tw-anim-bezier-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --tw-anim-bezier-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --tw-anim-bezier-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --tw-anim-bezier-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --tw-anim-bezier-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --tw-anim-bezier-quint-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --tw-anim-bezier-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);
+  --tw-anim-bezier-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  --tw-anim-bezier-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
+  --tw-anim-bezier-expo-in-out: cubic-bezier(1, 0, 0, 1);
+  --tw-anim-bezier-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+  --tw-anim-bezier-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);
+  --tw-anim-bezier-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  --tw-anim-bezier-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  --tw-anim-bezier-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --tw-anim-bezier-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+  /* Animation Range Values */
+  --tw-anim-range-normal: normal;
+  --tw-anim-range-cover: cover;
+  --tw-anim-range-contain: contain;
+  --tw-anim-range-entry: entry;
+  --tw-anim-range-exit: exit;
+  --tw-anim-range-gradual: 10% 90%;
+  --tw-anim-range-moderate: 20% 80%;
+  --tw-anim-range-brisk: 30% 70%;
+  --tw-anim-range-rapid: 40% 60%;
+
+  /* Timeline Values */
+  --tw-timeline-none: none;
+  --tw-timeline-auto: auto;
+  --tw-timeline-scroll: scroll();
+  --tw-timeline-scroll-x: scroll(x);
+  --tw-timeline-scroll-y: scroll(y);
+  --tw-timeline-scroll-block: scroll(block);
+  --tw-timeline-scroll-inline: scroll(inline);
+  --tw-timeline-view: view();
+  --tw-timeline-view-x: view(x);
+  --tw-timeline-view-y: view(y);
+  --tw-timeline-view-block: view(block);
+  --tw-timeline-view-inline: view(inline);
+
+  /* Scroll/View Timeline Axis Values */
+  --tw-scroll-timeline-axis-block: block;
+  --tw-scroll-timeline-axis-inline: inline;
+  --tw-scroll-timeline-axis-x: x;
+  --tw-scroll-timeline-axis-y: y;
+  --tw-view-timeline-axis-block: block;
+  --tw-view-timeline-axis-inline: inline;
+  --tw-view-timeline-axis-x: x;
+  --tw-view-timeline-axis-y: y;
+
+  /* ============================================
+     Predefined Animations
+     ============================================ */
+
+  --animate-blurred-fade-in: blurred-fade-in 0.9s ease-in-out both;
+  --animate-fade-in: fade-in 0.6s ease-in both;
+  --animate-fade-out: fade-out 0.6s ease-out both;
+  --animate-slide-in-top: slide-in-top 0.6s ease-out both;
+  --animate-slide-in-bottom: slide-in-bottom 0.6s ease-out both;
+  --animate-slide-out-top: slide-out-top 0.6s ease-out both;
+  --animate-slide-out-bottom: slide-out-bottom 0.6s ease-out both;
+  --animate-zoom-in: zoom-in 0.6s ease-out both;
+  --animate-zoom-out: zoom-out 0.6s ease-out both;
+  --animate-rotate-90: rotate-90 1s ease-in-out both;
+  --animate-rotate-180: rotate-180 1s ease-in-out both;
+  --animate-rotate-360: rotate-360 1s linear both;
+  --animate-flip-horizontal: flip-horizontal 1s ease-in-out both;
+  --animate-flip-vertical: flip-vertical 1s ease-in-out both;
+  --animate-bouncing: bouncing 1s ease-in-out both;
+  --animate-swing: swing 1s ease-in-out both;
+  --animate-wobble: wobble 1s ease-in-out both;
+  --animate-pulsing: pulsing 1s ease-in-out both;
+  --animate-shake: shake 0.5s ease-in-out both;
+  --animate-tada: tada 1s ease-in-out both;
+  --animate-jump: jump 1s ease-in-out both;
+  --animate-hang: hang 1s ease-in-out both;
+  --animate-roll-in: roll-in 1s ease-in-out both;
+  --animate-roll-out: roll-out 1s ease-in-out both;
+  --animate-float: float 1s ease-in-out both;
+  --animate-sink: sink 1s ease-in-out both;
+  --animate-flash: flash 1s ease-in-out both;
+  --animate-jiggle: jiggle 0.5s ease-in-out both;
+  --animate-rubber-band: rubber-band 1s ease-in-out both;
+  --animate-scale: scale 0.6s ease-out both;
+  --animate-slide-in-left: slide-in-left 0.6s ease-out both;
+  --animate-slide-in-right: slide-in-right 0.6s ease-out both;
+  --animate-slide-out-left: slide-out-left 0.6s ease-out both;
+  --animate-slide-out-right: slide-out-right 0.6s ease-out both;
+  --animate-spin-clockwise: spin-clockwise 0.6s linear both;
+  --animate-spin-counter-clockwise: spin-counter-clockwise 0.6s linear both;
+  --animate-flip-x: flip-x 0.6s ease-out both;
+  --animate-flip-y: flip-y 0.6s ease-out both;
+  --animate-blink: blink 0.5s both;
+  --animate-pop: pop 0.6s ease-out both;
+  --animate-expand-horizontally: expand-horizontally 0.6s ease-out both;
+  --animate-contract-horizontally: contract-horizontally 0.6s ease-out both;
+  --animate-expand-vertically: expand-vertically 0.6s ease-out both;
+  --animate-contract-vertically: contract-vertically 0.6s ease-out both;
+  --animate-fade-in-up: fade-in-up 0.6s ease-in-out both;
+  --animate-fade-in-down: fade-in-down 0.6s ease-in-out both;
+  --animate-fade-in-left: fade-in-left 0.6s ease-in-out both;
+  --animate-fade-in-right: fade-in-right 0.6s ease-in-out both;
+  --animate-fade-out-up: fade-out-up 0.6s ease-out both;
+  --animate-fade-out-down: fade-out-down 0.6s ease-out both;
+  --animate-fade-out-left: fade-out-left 0.6s ease-out both;
+  --animate-fade-out-right: fade-out-right 0.6s ease-out both;
+  --animate-sway: sway 0.6s ease-out both;
+  --animate-flip-in-x: flip-in-x 0.6s ease-out both;
+  --animate-flip-in-y: flip-in-y 0.6s ease-out both;
+  --animate-flip-out-x: flip-out-x 0.6s ease-out both;
+  --animate-flip-out-y: flip-out-y 0.6s ease-out both;
+  --animate-rotate-in: rotate-in 0.6s ease-out both;
+  --animate-rotate-out: rotate-out 0.6s ease-out both;
+  --animate-slide-rotate-in: slide-rotate-in 0.6s ease-out both;
+  --animate-slide-rotate-out: slide-rotate-out 0.6s ease-out both;
+  --animate-heartbeat: heartbeat 0.6s ease-out both;
+  --animate-horizontal-vibration: horizontal-vibration 0.3s linear infinite both;
+  --animate-rotational-wave: rotational-wave 2s ease-in-out infinite both;
+  --animate-skew: skew 0.5s ease-in-out both;
+  --animate-skew-right: skew-right 0.5s ease-in-out both;
+  --animate-vertical-bounce: vertical-bounce 0.6s ease-in-out both;
+  --animate-horizontal-bounce: horizontal-bounce 0.6s ease-in-out both;
+  --animate-tilt: tilt 0.6s ease-in-out both;
+  --animate-squeeze: squeeze 0.6s ease-in-out both;
+  --animate-slide-up-fade: slide-up-fade 0.6s ease-out both;
+  --animate-bounce-fade-in: bounce-fade-in 0.6s ease-out both;
+  --animate-swing-drop-in: swing-drop-in 0.6s ease-out both;
+  --animate-pulse-fade-in: pulse-fade-in 0.6s ease-out both;
+  --animate-impulse-rotation-right: impulse-rotation-right 1s ease-in-out both;
+  --animate-impulse-rotation-left: impulse-rotation-left 1s ease-in-out both;
+  --animate-dancing: dancing 1s ease-in-out both;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-jelly: jelly 1s ease-out forwards;
+
+  /* ============================================
+     Keyframes
+     ============================================ */
+
+  @keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes fade-out {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+  }
+
+  @keyframes slide-in-top {
+    0% { transform: translateY(var(--tw-anim-translate, -20px)); }
+    100% { transform: translateY(0); }
+  }
+
+  @keyframes slide-in-bottom {
+    0% { transform: translateY(var(--tw-anim-translate, 20px)); }
+    100% { transform: translateY(0); }
+  }
+
+  @keyframes slide-out-top {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(var(--tw-anim-translate, -20px)); }
+  }
+
+  @keyframes slide-out-bottom {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(var(--tw-anim-translate, 20px)); }
+  }
+
+  @keyframes zoom-in {
+    0% { opacity: 0; transform: scale(.5); }
+    100% { opacity: 1; transform: scale(1); }
+  }
+
+  @keyframes zoom-out {
+    0% { opacity: 1; transform: scale(1); }
+    100% { opacity: 0; transform: scale(.5); }
+  }
+
+  @keyframes rotate-90 {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(90deg); }
+  }
+
+  @keyframes rotate-180 {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(180deg); }
+  }
+
+  @keyframes rotate-360 {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  @keyframes flip-horizontal {
+    0% { transform: rotateY(0deg); }
+    100% { transform: rotateY(180deg); }
+  }
+
+  @keyframes flip-vertical {
+    0% { transform: rotateX(0deg); }
+    100% { transform: rotateX(180deg); }
+  }
+
+  @keyframes bouncing {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+    100% { transform: translateY(0); }
+  }
+
+  @keyframes swing {
+    0% { transform: rotate(0deg); }
+    50% { transform: rotate(15deg); }
+    100% { transform: rotate(0deg); }
+  }
+
+  @keyframes wobble {
+    0% { transform: translateX(0); }
+    15% { transform: translateX(-20px); }
+    30% { transform: translateX(20%); }
+    45% { transform: translateX(-15%); }
+    60% { transform: translateX(20px); }
+    75% { transform: translateX(-5%); }
+    100% { transform: translateX(0); }
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  @keyframes pulsing {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+  }
+
+  @keyframes shake {
+    0% { transform: translateX(0); }
+    25% { transform: translateX(-10px); }
+    50% { transform: translateX(10px); }
+    75% { transform: translateX(-10px); }
+    100% { transform: translateX(0); }
+  }
+
+  @keyframes tada {
+    0% { transform: scale(1); }
+    10% { transform: scale(0.9) rotate(-3deg); }
+    20% { transform: scale(0.9) rotate(-3deg); }
+    30% { transform: scale(1.1) rotate(3deg); }
+    40% { transform: scale(1.1) rotate(-3deg); }
+    50% { transform: scale(1.1) rotate(3deg); }
+    60% { transform: scale(1.1) rotate(-3deg); }
+    70% { transform: scale(1.1) rotate(3deg); }
+    80% { transform: scale(1.1) rotate(3deg); }
+    90% { transform: scale(1.1) rotate(3deg); }
+    100% { transform: scale(1) rotate(0); }
+  }
+
+  @keyframes jump {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-20px); }
+    100% { transform: translateY(0); }
+  }
+
+  @keyframes hang {
+    0% { transform: translateY(-20px); }
+    50% { transform: translateY(0); }
+    100% { transform: translateY(-20px); }
+  }
+
+  @keyframes roll-in {
+    0% { transform: translateX(-20px) rotate(-120deg); }
+    100% { transform: translateX(0) rotate(0); }
+  }
+
+  @keyframes roll-out {
+    0% { transform: translateX(0) rotate(0); }
+    100% { transform: translateX(20px) rotate(120deg); }
+  }
+
+  @keyframes float {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+    100% { transform: translateY(0); }
+  }
+
+  @keyframes sink {
+    0% { transform: translateY(-10px); }
+    50% { transform: translateY(0); }
+    100% { transform: translateY(-10px); }
+  }
+
+  @keyframes flash {
+    0% { opacity: 1; }
+    50% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes jiggle {
+    0% { transform: rotate(-3deg); }
+    50% { transform: rotate(3deg); }
+    100% { transform: rotate(-3deg); }
+  }
+
+  @keyframes rubber-band {
+    0% { transform: scale(1); }
+    30% { transform: scale(1.25); }
+    40% { transform: scale(0.75); }
+    50% { transform: scale(1.15); }
+    65% { transform: scale(0.95); }
+    75% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+  }
+
+  @keyframes scale {
+    0% { transform: scale(1); }
+    100% { transform: scale(1.10); }
+  }
+
+  @keyframes slide-in-left {
+    0% { transform: translateX(var(--tw-anim-translate, -20px)); }
+    100% { transform: translateX(0); }
+  }
+
+  @keyframes slide-in-right {
+    0% { transform: translateX(var(--tw-anim-translate, 20px)); }
+    100% { transform: translateX(0); }
+  }
+
+  @keyframes slide-out-left {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(var(--tw-anim-translate, -20px)); }
+  }
+
+  @keyframes slide-out-right {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(var(--tw-anim-translate, 20px)); }
+  }
+
+  @keyframes spin-clockwise {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  @keyframes spin-counter-clockwise {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(-360deg); }
+  }
+
+  @keyframes flip-x {
+    0% { transform: scaleX(1); }
+    50% { transform: scaleX(-1); }
+    100% { transform: scaleX(1); }
+  }
+
+  @keyframes flip-y {
+    0% { transform: scaleY(1); }
+    50% { transform: scaleY(-1); }
+    100% { transform: scaleY(1); }
+  }
+
+  @keyframes blink {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes pop {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+  }
+
+  @keyframes expand-horizontally {
+    0% { transform: scaleX(0); }
+    100% { transform: scaleX(1); }
+  }
+
+  @keyframes contract-horizontally {
+    0% { transform: scaleX(1); }
+    100% { transform: scaleX(0); }
+  }
+
+  @keyframes expand-vertically {
+    0% { transform: scaleY(0); }
+    100% { transform: scaleY(1); }
+  }
+
+  @keyframes contract-vertically {
+    0% { transform: scaleY(1); }
+    100% { transform: scaleY(0); }
+  }
+
+  @keyframes fade-in-up {
+    0% { opacity: 0; transform: translateY(20px); }
+    100% { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes fade-in-down {
+    0% { opacity: 0; transform: translateY(-20px); }
+    100% { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes fade-in-left {
+    0% { opacity: 0; transform: translateX(20px); }
+    100% { opacity: 1; transform: translateX(0); }
+  }
+
+  @keyframes fade-in-right {
+    0% { opacity: 0; transform: translateX(-20px); }
+    100% { opacity: 1; transform: translateX(0); }
+  }
+
+  @keyframes fade-out-up {
+    0% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(-20px); }
+  }
+
+  @keyframes fade-out-down {
+    0% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(20px); }
+  }
+
+  @keyframes fade-out-left {
+    0% { opacity: 1; transform: translateX(0); }
+    100% { opacity: 0; transform: translateX(-20px); }
+  }
+
+  @keyframes fade-out-right {
+    0% { opacity: 1; transform: translateX(0); }
+    100% { opacity: 0; transform: translateX(20px); }
+  }
+
+  @keyframes sway {
+    0% { transform: rotate(0deg); }
+    50% { transform: rotate(15deg); }
+    100% { transform: rotate(0deg); }
+  }
+
+  @keyframes flip-in-x {
+    0% { opacity: 0; transform: rotateY(90deg); }
+    100% { opacity: 1; transform: rotateY(0deg); }
+  }
+
+  @keyframes flip-in-y {
+    0% { opacity: 0; transform: rotateX(90deg); }
+    100% { opacity: 1; transform: rotateX(0deg); }
+  }
+
+  @keyframes flip-out-x {
+    0% { opacity: 1; transform: rotateY(0deg); }
+    100% { opacity: 0; transform: rotateY(90deg); }
+  }
+
+  @keyframes flip-out-y {
+    0% { opacity: 1; transform: rotateX(0deg); }
+    100% { opacity: 0; transform: rotateX(90deg); }
+  }
+
+  @keyframes rotate-in {
+    0% { opacity: 0; transform: rotate(-90deg); }
+    100% { opacity: 1; transform: rotate(0deg); }
+  }
+
+  @keyframes rotate-out {
+    0% { opacity: 1; transform: rotate(0deg); }
+    100% { opacity: 0; transform: rotate(90deg); }
+  }
+
+  @keyframes slide-rotate-in {
+    0% { opacity: 0; transform: translateX(-20px) rotate(-90deg); }
+    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
+  }
+
+  @keyframes slide-rotate-out {
+    0% { opacity: 1; transform: translateX(0) rotate(0deg); }
+    100% { opacity: 0; transform: translateX(20px) rotate(90deg); }
+  }
+
+  @keyframes heartbeat {
+    0% { transform: scale(1); }
+    25% { transform: scale(1.1); }
+    50% { transform: scale(1); }
+    75% { transform: scale(0.9); }
+    100% { transform: scale(1); }
+  }
+
+  @keyframes blurred-fade-in {
+    0% { filter: blur(5px); opacity: 0; }
+    100% { filter: blur(0); opacity: 1; }
+  }
+
+  @keyframes horizontal-vibration {
+    0% { transform: translateX(0); }
+    25% { transform: translateX(5px); }
+    50% { transform: translateX(-5px); }
+    75% { transform: translateX(5px); }
+    100% { transform: translateX(0); }
+  }
+
+  @keyframes rotational-wave {
+    0% { transform: rotate(0deg); }
+    25% { transform: rotate(10deg); }
+    50% { transform: rotate(-10deg); }
+    75% { transform: rotate(10deg); }
+    100% { transform: rotate(0deg); }
+  }
+
+  @keyframes skew {
+    0% { transform: skew(0deg); }
+    100% { transform: skew(20deg); }
+  }
+
+  @keyframes skew-right {
+    0% { transform: skew(0deg); }
+    100% { transform: skew(-20deg); }
+  }
+
+  @keyframes vertical-bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-20px); }
+  }
+
+  @keyframes horizontal-bounce {
+    0%, 100% { transform: translateX(0); }
+    50% { transform: translateX(20px); }
+  }
+
+  @keyframes tilt {
+    0% { transform: rotateY(0deg); }
+    50% { transform: rotateY(20deg); }
+    100% { transform: rotateY(0deg); }
+  }
+
+  @keyframes squeeze {
+    0%, 100% { transform: scale(1, 1); }
+    50% { transform: scale(1.1, 0.9); }
+  }
+
+  @keyframes slide-up-fade {
+    0% { opacity: 0; transform: translateY(50px); }
+    100% { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes bounce-fade-in {
+    0% { transform: scale(0.5); opacity: 0; }
+    100% { transform: scale(1); opacity: 1; }
+  }
+
+  @keyframes swing-drop-in {
+    0% { transform: rotate(-30deg) translateY(-50px); opacity: 0; }
+    100% { transform: rotate(0deg) translateY(0); opacity: 1; }
+  }
+
+  @keyframes pulse-fade-in {
+    0% { transform: scale(0.9); opacity: 0; }
+    50% { transform: scale(1.05); opacity: 0.5; }
+    100% { transform: scale(1); opacity: 1; }
+  }
+
+  @keyframes impulse-rotation-right {
+    0% { transform: rotate(0deg); }
+    50% { transform: rotate(-40deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  @keyframes impulse-rotation-left {
+    0% { transform: rotate(0deg); }
+    50% { transform: rotate(40deg); }
+    100% { transform: rotate(-360deg); }
+  }
+
+  @keyframes dancing {
+    0% { transform: skew(0deg); }
+    25% { transform: skew(-40deg); }
+    50% { transform: skew(40deg); }
+    75% { transform: skew(-40deg); }
+    100% { transform: skew(0deg); }
+  }
+
+  @keyframes jelly {
+    0% { transform: scale(1, 1); }
+    20% { transform: scale(1.25, 0.75); }
+    40% { transform: scale(0.75, 1.25); }
+    60% { transform: scale(1.15, 0.85); }
+    75% { transform: scale(0.95, 1.05); }
+    85% { transform: scale(1.05, 0.95); }
+    92% { transform: scale(1, 1.02); }
+    100% { transform: scale(1, 1); }
+  }
+}
+
+/* ============================================
+   Utility Classes - Animation Delay
+   ============================================ */
+
+@utility animate-delay-* {
+  animation-delay: calc(--value(integer) * 1ms);
+  animation-delay: --value(--tw-anim-delay-*, [duration], [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Duration
+   ============================================ */
+
+@utility animate-duration-* {
+  animation-duration: calc(--value(integer) * 1ms);
+  animation-duration: --value(--tw-anim-duration-*, [duration], [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Iteration Count
+   ============================================ */
+
+@utility animate-iteration-count-* {
+  animation-iteration-count: --value(--tw-anim-iteration-count-*, number, [number], [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Fill Mode
+   ============================================ */
+
+@utility animate-fill-mode-* {
+  animation-fill-mode: --value(--tw-anim-fill-mode-*, [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Steps
+   ============================================ */
+
+@utility animate-steps-* {
+  animation-timing-function: steps(--value(--tw-anim-steps-*, integer, [integer]));
+}
+
+/* ============================================
+   Utility Classes - Animation Timing Functions
+   ============================================ */
+
+@utility animate-ease {
+  animation-timing-function: ease;
+}
+
+@utility animate-ease-in {
+  animation-timing-function: ease-in;
+}
+
+@utility animate-ease-out {
+  animation-timing-function: ease-out;
+}
+
+@utility animate-ease-in-out {
+  animation-timing-function: ease-in-out;
+}
+
+@utility animate-linear {
+  animation-timing-function: linear;
+}
+
+/* ============================================
+   Utility Classes - Animation Bezier Curves
+   ============================================ */
+
+@utility animate-bezier-* {
+  animation-timing-function: --value(--tw-anim-bezier-*, [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Direction
+   ============================================ */
+
+@utility animate-direction-normal {
+  animation-direction: normal;
+}
+
+@utility animate-direction-reverse {
+  animation-direction: reverse;
+}
+
+@utility animate-direction-alternate {
+  animation-direction: alternate;
+}
+
+@utility animate-direction-alternate-reverse {
+  animation-direction: alternate-reverse;
+}
+
+/* ============================================
+   Utility Classes - Animation Play State
+   ============================================ */
+
+@utility animate-play-running {
+  animation-play-state: running;
+}
+
+@utility animate-play-paused {
+  animation-play-state: paused;
+}
+
+/* ============================================
+   Utility Classes - Dialog Entry/Exit Effects
+   ============================================ */
+
+@layer utilities {
+  .animate-dialog {
+    opacity: var(--tw-anim-dialog-start-opacity, 0);
+    translate: var(--tw-anim-dialog-start-translate, 0 1.5rem);
+    scale: var(--tw-anim-dialog-start-scale, 0.96);
+    will-change: opacity, translate, scale;
+    transition:
+      opacity var(--tw-anim-dialog-duration, 350ms) ease,
+      translate var(--tw-anim-dialog-duration, 350ms) var(--tw-anim-dialog-easing, cubic-bezier(0.22, 1, 0.36, 1)),
+      scale var(--tw-anim-dialog-duration, 350ms) var(--tw-anim-dialog-easing, cubic-bezier(0.22, 1, 0.36, 1)),
+      overlay var(--tw-anim-dialog-duration, 350ms) ease allow-discrete,
+      display var(--tw-anim-dialog-duration, 350ms) ease allow-discrete;
+  }
+
+  .animate-dialog[open] {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+  }
+
+  .animate-dialog[open].is-closing {
+    opacity: var(--tw-anim-dialog-start-opacity, 0);
+    translate: var(--tw-anim-dialog-start-translate, 0 1.5rem);
+    scale: var(--tw-anim-dialog-start-scale, 0.96);
+  }
+
+  .animate-dialog[open].is-opening {
+    opacity: var(--tw-anim-dialog-start-opacity, 0);
+    translate: var(--tw-anim-dialog-start-translate, 0 1.5rem);
+    scale: var(--tw-anim-dialog-start-scale, 0.96);
+  }
+
+  @starting-style {
+    .animate-dialog[open] {
+      opacity: var(--tw-anim-dialog-start-opacity, 0);
+      translate: var(--tw-anim-dialog-start-translate, 0 1.5rem);
+      scale: var(--tw-anim-dialog-start-scale, 0.96);
+    }
+  }
+
+  .animate-dialog::backdrop {
+    opacity: 0;
+    background: var(--tw-anim-dialog-backdrop-background, rgb(15 23 42 / 0.58));
+    backdrop-filter: var(--tw-anim-dialog-backdrop-filter, blur(8px));
+    transition:
+      opacity var(--tw-anim-dialog-duration, 350ms) ease,
+      overlay var(--tw-anim-dialog-duration, 350ms) ease allow-discrete,
+      display var(--tw-anim-dialog-duration, 350ms) ease allow-discrete;
+  }
+
+  .animate-dialog[open]::backdrop {
+    opacity: 1;
+  }
+
+  .animate-dialog[open].is-closing::backdrop {
+    opacity: 0;
+  }
+
+  .animate-dialog[open].is-opening::backdrop {
+    opacity: 0;
+  }
+
+  @starting-style {
+    .animate-dialog[open]::backdrop {
+      opacity: 0;
+    }
+  }
+}
+
+@utility animate-dialog-from-top {
+  --tw-anim-dialog-start-translate: 0 -1.5rem;
+}
+
+@utility animate-dialog-from-bottom {
+  --tw-anim-dialog-start-translate: 0 1.5rem;
+}
+
+@utility animate-dialog-from-left {
+  --tw-anim-dialog-start-translate: -1.5rem 0;
+}
+
+@utility animate-dialog-from-right {
+  --tw-anim-dialog-start-translate: 1.5rem 0;
+}
+
+@utility animate-dialog-fade {
+  --tw-anim-dialog-start-translate: 0 0;
+  --tw-anim-dialog-start-scale: 1;
+}
+
+@utility animate-dialog-zoom {
+  --tw-anim-dialog-start-translate: 0 0;
+  --tw-anim-dialog-start-scale: 0.92;
+}
+
+@utility animate-dialog-duration-* {
+  --tw-anim-dialog-duration: calc(--value(integer) * 1ms);
+  --tw-anim-dialog-duration: --value(--tw-anim-duration-*, [duration], [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Timeline
+   ============================================ */
+
+@utility timeline-* {
+  animation-timeline: --value(--tw-timeline-*, [ident], [*]) !important;
+}
+
+/* ============================================
+   Utility Classes - Scroll Timeline Axis
+   ============================================ */
+
+@utility scroll-timeline-axis-* {
+  scroll-timeline-axis: --value(--tw-scroll-timeline-axis-*, [ident], [*]);
+}
+
+/* ============================================
+   Utility Classes - View Timeline Axis
+   ============================================ */
+
+@utility view-timeline-axis-* {
+  view-timeline-axis: --value(--tw-view-timeline-axis-*, [ident], [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Range
+   ============================================ */
+
+@utility animate-range-* {
+  animation-range: --value(--tw-anim-range-*, [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Range
+   ============================================ */
+
+@utility animate-translate-* {
+  --tw-anim-translate: --value([length], [percentage]);
+}
\ No newline at end of file
diff --git a/test/index.test.js b/test/index.test.js
index 88654ad..8d69a9a 100644
--- a/test/index.test.js
+++ b/test/index.test.js
@@ -317,4 +317,24 @@ describe('tailwindcss-animations plugins', () => {
 
     expect(css).toContain('.view-timeline-axis-y{view-timeline-axis:y}')
   })
+
+  it('use percentage values for animate-translate', async () => {
+    const css = await generatePluginCSS({
+      content: '<div class="animate-translate-[50%]">Hello</div>'
+    })
+
+    expect(css).toContain(
+      '.animate-translate-\\[50\\%\\]'
+    )
+  })
+
+  it('use length values for animate-translate', async () => {
+    const css = await generatePluginCSS({
+      content: '<div class="animate-translate-[10rem]">Hello</div>'
+    })
+
+    expect(css).toContain(
+      '.animate-translate-\\[10rem\\]'
+    )
+  })
 })