/* =========================
   TRANSLATE
========================= */

.animate-translate-left { --tx: -60px; }
.animate-translate-right { --tx: 60px; }

.animate-translate-up { --ty: -60px; }
.animate-translate-down { --ty: 60px; }

/* =========================
   SCALE
========================= */

.animate-scale-95 { --scale: 0.95; }
.animate-scale-90 { --scale: 0.9; }
.animate-scale-85 { --scale: 0.85; }
.animate-scale-80 { --scale: 0.8; }

/* =========================
   ROTATE
========================= */

.animate-rotate-left-5 { --rotate: -5deg; }
.animate-rotate-left-10 { --rotate: -10deg; }
.animate-rotate-left-15 { --rotate: -15deg; }

.animate-rotate-right-5 { --rotate: 5deg; }
.animate-rotate-right-10 { --rotate: 10deg; }
.animate-rotate-right-15 { --rotate: 15deg; }

/* =========================
   3D / FLIP
========================= */

.animate-flip-x-90 { --rotate-x: 90deg; }
.animate-flip-y-90 { --rotate-y: 90deg; }

.animate-flip-soft-x { --rotate-x: -15deg; }
.animate-flip-soft-y { --rotate-y: 15deg; }

/* =========================
   SKEW
========================= */

.animate-skew-x-10 { --skew-x: 10deg; }
.animate-skew-y-10 { --skew-y: 10deg; }

/* =========================
   OPACITY
========================= */

.animate-fade-0 { --opacity: 0; }
.animate-fade-30 { --opacity: 0.3; }
.animate-fade-50 { --opacity: 0.5; }
.animate-fade-70 { --opacity: 0.7; }

/* =========================
   FILTERS
========================= */

/* Blur */
.animate-blur-sm { --blur: 3px; }
.animate-blur-md { --blur: 6px; }

/* Grayscale */
.animate-grayscale-50 { --grayscale: 50%; }
.animate-grayscale-100 { --grayscale: 100%; }

/* Brightness */
.animate-brightness-80 { --brightness: 80%; }
.animate-brightness-120 { --brightness: 120%; }

/* Saturation */
.animate-saturate-80 { --saturate: 80%; }
.animate-saturate-120 { --saturate: 120%; }

/* =========================
   DELAY
========================= */

.animate-delay-100 { transition-delay: 100ms; }
.animate-delay-200 { transition-delay: 200ms; }
.animate-delay-300 { transition-delay: 300ms; }
.animate-delay-500 { transition-delay: 500ms; }

/* =========================
   DURATION
========================= */

.animate-duration-fast { transition-duration: 300ms; }
.animate-duration-slow { transition-duration: 900ms; }

/* =========================
   EASING
========================= */

.animate-ease-soft {
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.animate-ease-smooth {
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

/* =========================
   STAGGER
========================= */

.animate-stagger > * {
    transition-delay: calc(var(--stagger-index, 0) * 100ms);
}