/**
 * MODERN ANIMATIONS - Bimmer Modular
 * ===================================
 * Librería mejorada de animaciones modernas
 * Incluye: glassmorphism, elastic, smooth transitions
 * Duración y easing consistentes usando design tokens
 * 
 * Convención de nombres:
 * - @keyframes [action]-[direction]: slideUp, fadeIn, scaleIn
 * - .animate-[name]: clase para aplicar animación
 */

/* ==================== FADE ANIMATIONS - MEJORADAS ==================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes fadeInSoft {
    from { 
        opacity: 0;
        filter: blur(4px);
    }
    to { 
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes fadeOutSoft {
    from { 
        opacity: 1;
        filter: blur(0px);
    }
    to { 
        opacity: 0;
        filter: blur(4px);
    }
}

.animate-fade-in {
    animation: fadeIn var(--duration-normal) var(--easing-out) forwards;
}

.animate-fade-out {
    animation: fadeOut var(--duration-normal) var(--easing-out) forwards;
}

.animate-fade-in-soft {
    animation: fadeInSoft var(--duration-normal) var(--easing-out) forwards;
}

.animate-fade-out-soft {
    animation: fadeOutSoft var(--duration-normal) var(--easing-out) forwards;
}

/* ==================== SLIDE ANIMATIONS - MEJORADAS ==================== */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

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

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

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

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

@keyframes slideInUpElastic {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    60% {
        opacity: 1;
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDownElastic {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }
    60% {
        opacity: 1;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Utility classes */
.animate-slide-in-up { animation: slideInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-slide-out-down { animation: slideOutDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-slide-in-down { animation: slideInDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-slide-out-up { animation: slideOutUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-slide-in-left { animation: slideInLeft 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-slide-out-left { animation: slideOutLeft 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-slide-in-right { animation: slideInRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-slide-out-right { animation: slideOutRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-slide-in-up-elastic { animation: slideInUpElastic 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-slide-in-down-elastic { animation: slideInDownElastic 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* ==================== SCALE ANIMATIONS - MEJORADAS ==================== */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes scaleInElastic {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
    }
    70% {
        transform: scale(1.1);- MEJORADAS ==================== */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-15deg) scale(0.85);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

@keyframes rotateInElastic {
    0% {
        opacity: 0;
        transform: rotate(-45deg) scale(0.5);
    }
    60% {
        opacity: 1;
        transform: rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

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

@keyframes spinReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes spinPulse {
    0%, 100% { 
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
    50% { 
        transform: rotate(180deg) scale(1.1);
        opacity: 0.8;
    }
}

.animate-rotate-in { animation: rotateIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-rotate-in-elastic { animation: rotateInElastic 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-spin-reverse { animation: spinReverse 1s linear infinite; }
.animate-spin-pulse { animation: spinPulse 2s var(--easing-in-out)
    }
}

@keyframes scalePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes scalePulseGlow {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
    }
    50% { 
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
    }
}

.animate-scale-in { animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-scale-out { animation: scaleOut 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-scale-in-elastic { animation: scaleInElastic 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-scale-out-elastic { animation: scaleOutElastic 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-pulse { animation: scalePulse 2s var(--easing-in-out) infinite; }
.animate-pulse-glow { animation: scalePulseGlow 2s var(--easing-in-out) infinite; }

/* ==================== ROTATION ANIMATIONS ==================== */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.95);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

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

.animate-rotate-in { animation: rotateIn var(--duration-slow) var(--easing-out) forwards; }
.animate-spin { animation: spin 1s linear infinite; }

/* ==================== HEIGHT/WIDTH ANIMATIONS ==================== */
@keyframes expandHeight {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: auto;
        opacity: 1;
    }
}

@keyframes collapseHeight {
    from {
        height: auto;
        opacity: 1;
    }
    to {
        height: 0;
        opacity: 0;
    }
}

.animate-expand { animation: expandHeight var(--duration-normal) var(--easing-out) forwards; }
.animate-collapse { animation: collapseHeight var(--duration-normal) var(--easing-out) forwards; }

/* ==================== FLOAT ANIMATIONS ==================== */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

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

.animate-float { animation: float 3s var(--easing-in-out) infinite; }
.animate-float-slow { animation: floatSlow 4s var(--easing-in-out) infinite; }

/* ==================== BOUNCE ANIMATIONS ==================== */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(30px);
    }
    50% { opacity: 1; }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-bounce { animation: bounce 1s var(--easing-bounce) infinite; }
.animate-bounce-in { animation: bounceIn var(--duration-slow) var(--easing-bounce) forwards; }

/* ==================== SHIMMER/SHINE ANIMATIONS ==================== */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes shine {
    0% {
        left: -100%;
    }
    15% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}

.animate-shimmer {
    animation: shimmer 2s infinite;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    background-size: 1000px 100%;
}

.animate-shine {
    position: relative;
    overflow: hidden;
}

.animate-shine::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: rotate(30deg);
    animation: shine 4s infinite;
}

/* ==================== PULSE/GLOW ANIMATIONS ==================== */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
    }
}

@keyframes backgroundPulse {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(59, 130, 246, 0.1); }
}

.animate-glow-pulse { animation: glowPulse 2s var(--easing-in-out) infinite; }
.animate-bg-pulse { animation: backgroundPulse 2s var(--easing-in-out) infinite; }

/* ==================== COLOR ANIMATIONS ==================== */
@keyframes colorShift {
    0% { color: var(--color-primary); }
    50% { color: var(--color-secondary); }
    100% { color: var(--color-primary); }
}

.animate-color-shift { animation: colorShift 3s var(--easing-in-out) infinite; }

/* ==================== MODAL ANIMATIONS ==================== */
@keyframes modalBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

.animate-modal-backdrop { animation: modalBackdropIn var(--duration-normal) var(--easing-out) forwards; }
.animate-modal-content { animation: modalContentIn var(--duration-slow) var(--easing-out) forwards; }
.animate-modal-card { animation: modalCardIn var(--duration-slow) var(--easing-out) forwards; }

/* Stagger animation for modal cards */
.animate-modal-card:nth-of-type(1) { animation-delay: 0.06s; }
.animate-modal-card:nth-of-type(2) { animation-delay: 0.12s; }
.animate-modal-card:nth-of-type(3) { animation-delay: 0.18s; }

/* ==================== DROPDOWN/MENU ANIMATIONS ==================== */
@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-dropdown { animation: dropdownSlide var(--duration-normal) var(--easing-out) forwards; }

/* ==================== TOAST/NOTIFICATION ANIMATIONS ==================== */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.animate-toast-in { animation: toastSlideIn var(--duration-normal) var(--easing-out) forwards; }
.animate-toast-out { animation: toastSlideOut var(--duration-normal) var(--easing-out) forwards; }

/* ==================== SKELETON LOADING ANIMATION ==================== */
@keyframes skeleton-loading {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.animate-skeleton {
    animation: skeleton-loading 2s infinite;
    background: linear-gradient(
        to right,
        #f3f3f3 8%,
        #e8e8e8 18%,
        #f3f3f3 33%
    );
    background-size: 1000px 100%;
}

body.dark-mode .animate-skeleton {
    background: linear-gradient(
        to right,
        #2a2a2a 8%,
        #1e1e1e 18%,
        #2a2a2a 33%
    );
}

/* ==================== INTERACTION ANIMATIONS ==================== */
.btn-press {
    animation: buttonPress 0.1s var(--easing-in-out);
}

@keyframes buttonPress {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.98); }
}

/* ==================== MODERN BOUNCE ANIMATIONS ==================== */
@keyframes bounceElastic {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.6);
    }
    50% {
        opacity: 1;
    }
    70% {
        transform: translateY(-8px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bounceElasticOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    30% {
        transform: translateY(-8px) scale(1.05);
    }
    100% {
        opacity: 0;
        transform: translateY(40px) scale(0.6);
    }
}

@keyframes bounceDouble {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-15px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-8px); }
}

.animate-bounce-elastic { animation: bounceElastic 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-bounce-elastic-out { animation: bounceElasticOut 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-bounce-double { animation: bounceDouble 1.2s var(--easing-in-out) infinite; }

/* ==================== FLOAT & DRIFT ANIMATIONS ==================== */
@keyframes floatModern {
    0%, 100% { 
        transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
    50% { 
        transform: translateY(-20px) translateX(5px);
        opacity: 0.95;
    }
}

@keyframes floatDrift {
    0%, 100% { 
        transform: translateY(-5px) rotate(0deg);
    }
    33% { 
        transform: translateY(-15px) rotate(2deg);
    }
    66% { 
        transform: translateY(-10px) rotate(-2deg);
    }
}

@keyframes floatSway {
    0%, 100% { transform: translateX(0px) translateY(0px); }
    25% { transform: translateX(8px) translateY(-8px); }
    50% { transform: translateX(0px) translateY(-15px); }
    75% { transform: translateX(-8px) translateY(-8px); }
}

.animate-float-modern { animation: floatModern 3.5s ease-in-out infinite; }
.animate-float-drift { animation: floatDrift 4s ease-in-out infinite; }
.animate-float-sway { animation: floatSway 3s ease-in-out infinite; }

/* ==================== GLOW & LIGHT EFFECTS ==================== */
@keyframes glowModern {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.3), 0 0 0 0 rgba(255, 107, 107, 0);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 107, 107, 0.6), 0 0 40px rgba(255, 107, 107, 0.3);
    }
}

@keyframes glowReverse {
    0%, 100% {
        box-shadow: 0 0 30px rgba(0, 188, 212, 0.6), 0 0 40px rgba(0, 188, 212, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 188, 212, 0.3), 0 0 0 0 rgba(0, 188, 212, 0);
    }
}

@keyframes glowMultiColor {
    0% {
        box-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
    }
    33% {
        box-shadow: 0 0 30px rgba(0, 188, 212, 0.5);
    }
    66% {
        box-shadow: 0 0 30px rgba(156, 39, 176, 0.5);
    }
    100% {
        box-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
    }
}

@keyframes glowPulseHeavy {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(255, 107, 107, 0.8),
            0 0 40px rgba(255, 107, 107, 0.4),
            0 0 60px rgba(255, 107, 107, 0.2);
    }
    50% {
        box-shadow: 
            0 0 40px rgba(255, 107, 107, 0.4),
            0 0 60px rgba(255, 107, 107, 0.2),
            0 0 80px rgba(255, 107, 107, 0);
    }
}

.animate-glow-modern { animation: glowModern 2.5s ease-in-out infinite; }
.animate-glow-reverse { animation: glowReverse 2.5s ease-in-out infinite; }
.animate-glow-multi { animation: glowMultiColor 4s ease-in-out infinite; }
.animate-glow-heavy { animation: glowPulseHeavy 2s ease-in-out infinite; }

/* ==================== WAVE & RIPPLE EFFECTS ==================== */
@keyframes wave {
    0%, 100% { 
        d: path('M0,100 Q250,50 500,100 T1000,100 L1000,0 L0,0 Z');
    }
    25% { 
        d: path('M0,75 Q250,25 500,75 T1000,75 L1000,0 L0,0 Z');
    }
    50% { 
        d: path('M0,100 Q250,50 500,100 T1000,100 L1000,0 L0,0 Z');
    }
    75% { 
        d: path('M0,125 Q250,75 500,125 T1000,125 L1000,0 L0,0 Z');
    }
}

@keyframes ripple {
    0% {
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}

@keyframes rippleMulti {
    0% {
        transform: scale(0);
        opacity: 0.8;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.animate-wave svg { animation: wave 3s ease-in-out infinite; }
.animate-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 107, 107, 0.6);
    border-radius: 50%;
    animation: ripple 1.5s ease-out infinite;
}
.animate-ripple-multi::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 107, 107, 0.3);
    border-radius: 50%;
    animation: rippleMulti 1s ease-out infinite;
}

/* ==================== TEXT ANIMATIONS ==================== */
@keyframes textShimmer {
    0% {
        background-position: -1000px 0;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    100% {
        background-position: 1000px 0;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

@keyframes textGradientFlow {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

@keyframes textWaveIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-text-shimmer {
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        var(--color-secondary) 50%,
        var(--color-primary) 100%
    );
    background-size: 200% 100%;
    animation: textShimmer 3s linear infinite;
}

.animate-text-gradient {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary));
    background-size: 200% 100%;
    animation: textGradientFlow 4s ease-in-out infinite;
}

/* ==================== GLASSMORPHISM ANIMATIONS ==================== */
@keyframes glassIn {
    from {
        opacity: 0;
        background: rgba(255, 255, 255, 0);
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
    }
}

@keyframes glassPulse {
    0%, 100% {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.1);
    }
    50% {
        backdrop-filter: blur(15px);
        background: rgba(255, 255, 255, 0.15);
    }
}

.animate-glass-in { animation: glassIn 0.6s ease-out forwards; }
.animate-glass-pulse { animation: glassPulse 3s ease-in-out infinite; }

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

/* ==================== STAGGER ANIMATIONS ==================== */
.stagger-item {
    animation: slideInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}

.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-item:nth-child(3) { animation-delay: 0.15s; }
.stagger-item:nth-child(4) { animation-delay: 0.2s; }
.stagger-item:nth-child(5) { animation-delay: 0.25s; }
.stagger-item:nth-child(n+6) { animation-delay: calc(0.05s * (var(--index) - 5)); }

.stagger-grid > * { animation: scaleInElastic 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.stagger-grid > :nth-child(1) { animation-delay: 0.1s; }
.stagger-grid > :nth-child(2) { animation-delay: 0.15s; }
.stagger-grid > :nth-child(3) { animation-delay: 0.2s; }
.stagger-grid > :nth-child(4) { animation-delay: 0.25s; }
.stagger-grid > :nth-child(5) { animation-delay: 0.3s; }
.stagger-grid > :nth-child(6) { animation-delay: 0.35s; }

/* ==================== MODERN LOADING SPINNERS ==================== */
@keyframes spinnerBorder {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spinnerDots {
    0%, 60%, 100% { opacity: 1; }
    30% { opacity: 0.3; }
}

@keyframes spinnerGrow {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0.5; }
}

.spinner-border { animation: spinnerBorder 0.8s linear infinite; }
.spinner-grow { animation: spinnerGrow 1.5s ease-in-out infinite; }

.spinner-dots span {
    display: inline-block;
    animation: spinnerDots 1.2s ease-in-out infinite;
}

.spinner-dots span:nth-child(1) { animation-delay: 0s; }
.spinner-dots span:nth-child(2) { animation-delay: 0.2s; }
.spinner-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ==================== SCROLL REVEAL ANIMATIONS ==================== */
@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

.animate-reveal-up { animation: revealUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-reveal-down { animation: revealDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-reveal-left { animation: revealLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-reveal-right { animation: revealRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* ==================== PARALLAX ANIMATIONS ==================== */
@keyframes parallaxUp {
    0% { transform: translateY(50px); }
    100% { transform: translateY(-50px); }
}

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

.parallax-up { animation: parallaxUp 0.5s ease-out forwards; }
.parallax-down { animation: parallaxDown 0.5s ease-out forwards; }

/* ==================== DELAY UTILITIES ==================== */
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-500 { animation-delay: 0.5s; }

/* ==================== ANIMATION SPEED MODIFIERS ==================== */
.animate-fast { animation-duration: var(--duration-fast); }
.animate-slow { animation-duration: var(--duration-slow); }
.animate-slower { animation-duration: var(--duration-slower); }

/* ==================== RESPONSIVE - Disable animations on reduced motion ==================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
}