/* Animation Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-900 { animation-delay: 900ms; }
.delay-1000 { animation-delay: 1000ms; }
.delay-1200 { animation-delay: 1200ms; }
.delay-1500 { animation-delay: 1500ms; }

/* Enhanced Pulse Animation */
@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.05);
    }
}

/* Glow Effect */
.glow {
    text-shadow: 0 0 20px rgba(250, 204, 21, 0.5),
                 0 0 40px rgba(250, 204, 21, 0.3),
                 0 0 60px rgba(250, 204, 21, 0.1);
}

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

.floating {
    animation: float 6s ease-in-out infinite;
}

/* Sparkle Animation */
@keyframes sparkle {
    0%, 100% { 
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% { 
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

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

/* Hero Gradient Enhancement */
.hero-bg {
    background: linear-gradient(135deg, #dc2626 0%, #f59e0b 50%, #dc2626 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Button Hover Effects */
.btn-magical {
    position: relative;
    overflow: hidden;
}

.btn-magical::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn-magical:hover::before {
    left: 100%;
}

/* Trust Badge Animation */
@keyframes badgeGlow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(250, 204, 21, 0.3);
    }
    50% { 
        box-shadow: 0 0 40px rgba(250, 204, 21, 0.6);
    }
}

.trust-badge {
    animation: badgeGlow 3s ease-in-out infinite;
}