/* ═══════════════════════════════════════════════════════════════
   BUTTON ANIMATIONS
   Professional button animations for CTAs
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PULSE GLOW ANIMATION - For primary CTA buttons
   ═══════════════════════════════════════════════════════════════ */
@keyframes pulse-glow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(236, 34, 39, 0.7);
    }
    
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px 10px rgba(236, 34, 39, 0);
    }
    
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(236, 34, 39, 0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   PULSE GLOW CLASS - Apply to CTA buttons
   ═══════════════════════════════════════════════════════════════ */
.btn-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

/* Pause animation on hover for better UX */
.btn-pulse-glow:hover {
    animation-play-state: paused;
    transform: scale(1.08);
}

/* ═══════════════════════════════════════════════════════════════
   SUBTLE PULSE - For less aggressive attention
   ═══════════════════════════════════════════════════════════════ */
@keyframes subtle-pulse {
    0%, 100% {
        transform: scale(1);
    }
    
    50% {
        transform: scale(1.03);
    }
}

.btn-subtle-pulse {
    animation: subtle-pulse 2.5s ease-in-out infinite;
}

.btn-subtle-pulse:hover {
    animation-play-state: paused;
}

/* ═══════════════════════════════════════════════════════════════
   GLOW EFFECT - Continuous glow without scale
   ═══════════════════════════════════════════════════════════════ */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(236, 34, 39, 0.5),
                    0 0 10px rgba(236, 34, 39, 0.3);
    }
    
    50% {
        box-shadow: 0 0 15px rgba(236, 34, 39, 0.8),
                    0 0 25px rgba(236, 34, 39, 0.5);
    }
}

.btn-glow {
    animation: glow 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   SHIMMER EFFECT - Shine effect across button
   ═══════════════════════════════════════════════════════════════ */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    
    100% {
        background-position: 200% center;
    }
}

.btn-shimmer {
    background: linear-gradient(
        90deg,
        var(--primaryColor) 0%,
        var(--primaryColor) 40%,
        rgba(255, 255, 255, 0.8) 50%,
        var(--primaryColor) 60%,
        var(--primaryColor) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   BOUNCE ATTENTION - For urgent CTAs
   ═══════════════════════════════════════════════════════════════ */
@keyframes bounce-attention {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    
    40% {
        transform: translateY(-10px);
    }
    
    60% {
        transform: translateY(-5px);
    }
}

.btn-bounce-attention {
    animation: bounce-attention 2s ease-in-out infinite;
}

.btn-bounce-attention:hover {
    animation-play-state: paused;
}

/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATION
   ═══════════════════════════════════════════════════════════════ */
.btn-pulse-glow,
.btn-subtle-pulse,
.btn-glow,
.btn-shimmer,
.btn-bounce-attention {
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY - Respect user preferences
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .btn-pulse-glow,
    .btn-subtle-pulse,
    .btn-glow,
    .btn-shimmer,
    .btn-bounce-attention {
        animation: none;
    }
}