/* ==========================================================================
   KEYFRAMES & MICRO-INTERACTIONS (Moments+)
   ========================================================================== */

/* ==========================================================================
   1. Animation Keyframes
   ========================================================================== */

/* Floating phone mockup */
@keyframes float {
    0% {
        transform: translateY(0px) rotateY(-5deg) rotateX(5deg);
        box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.05);
    }
    50% {
        transform: translateY(-12px) rotateY(-2deg) rotateX(8deg);
        box-shadow: 0 40px 90px -10px rgba(0, 0, 0, 0.6), 0 0 50px rgba(168, 85, 247, 0.15);
    }
    100% {
        transform: translateY(0px) rotateY(-5deg) rotateX(5deg);
        box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.05);
    }
}

/* Pulsing subtle glow for main CTAs */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 4px 20px -4px rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px 4px rgba(168, 85, 247, 0.6);
    }
    100% {
        box-shadow: 0 4px 20px -4px rgba(99, 102, 241, 0.4);
    }
}

/* Shimmer loader effect */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Spin animation for icons/loaders */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Oscillating wave for simulated music playback inside mockup */
@keyframes soundWave {
    0%, 100% { height: 4px; }
    50% { height: 24px; }
}

/* Heart pulsing animation */
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Confetti-like floating particles */
@keyframes particleFloat {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-80px) rotate(360deg);
        opacity: 0;
    }
}

/* ==========================================================================
   2. Active Animation Classes
   ========================================================================== */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

.btn-primary.pulse-btn {
    animation: pulseGlow 3s ease-in-out infinite;
}

.heart-beat {
    animation: heartBeat 1.2s ease-in-out infinite;
}

.sound-bar {
    width: 3px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    animation: soundWave 1.2s ease-in-out infinite;
}

.sound-bar:nth-child(2) { animation-delay: 0.15s; }
.sound-bar:nth-child(3) { animation-delay: 0.3s; }
.sound-bar:nth-child(4) { animation-delay: 0.45s; }
.sound-bar:nth-child(5) { animation-delay: 0.6s; }

/* ==========================================================================
   3. Scroll Reveal Classes (Intersection Observer)
   ========================================================================== */
.reveal {
    opacity: 0;
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    will-change: opacity, transform;
}

.reveal-fade {
    transform: none;
}

.reveal-up {
    transform: translateY(30px);
}

.reveal-down {
    transform: translateY(-30px);
}

.reveal-left {
    transform: translateX(-30px);
}

.reveal-right {
    transform: translateX(30px);
}

.reveal.active {
    opacity: 1;
    transform: translate(0, 0);
}

/* Cascade delay classes for lists/grids */
.delay-100 { transition-delay: 100ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-500 { transition-delay: 500ms !important; }

/* ==========================================================================
   4. Smooth Theme Transitions
   ========================================================================== */
body, 
.navbar,
.card-premium, 
.card-customization,
.audience-card,
.accordion-item,
.theme-toggle,
.custom-request-box {
    /* Set custom smooth transition for theme switches */
    transition: background-color var(--transition-normal), 
                border-color var(--transition-normal), 
                color var(--transition-normal), 
                box-shadow var(--transition-normal),
                transform var(--transition-fast);
}

/* Slowly drift the ambient background circles (Apple Style) */
@keyframes ambientGlowSlow {
    0% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.08);
    }
    66% {
        transform: translate(-30px, 30px) scale(0.92);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* Heart float animation for romantic proposal click desfecho */
@keyframes heartFloat {
    0% {
        transform: translateY(0) translateX(0) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(-550px) translateX(var(--drift, 20px)) scale(1.1);
        opacity: 0;
    }
}