/* ============================================
   Enhanced Keyframe Animations
   ============================================ */

/* Header Animations */
@keyframes fadeInSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Card Entrance with Bounce */
@keyframes cardEntrance {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
    60% {
        opacity: 1;
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Card Glow Effects */
@keyframes todayGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(26, 188, 156, 0.4);
    }
    50% {
        box-shadow: 0 0 35px rgba(26, 188, 156, 0.7);
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 8px 32px var(--color-shadow-teal);
    }
    50% {
        box-shadow: 0 8px 40px rgba(77, 184, 196, 0.4);
    }
}

/* Countdown Pulse */
@keyframes countdownPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Badge Effects */
@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

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

/* ============================================
   ENHANCED MODAL ANIMATIONS
   ============================================ */

/* Backdrop Animations */
@keyframes backdropFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

@keyframes backdropFadeOut {
    from {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

/* 3D Envelope Flip Opening Effect */
@keyframes modalEnvelopeOpen {
    0% {
        opacity: 0;
        transform: perspective(1200px) rotateX(-90deg) scale(0.8);
        transform-origin: center top;
    }
    50% {
        opacity: 1;
        transform: perspective(1200px) rotateX(-10deg) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: perspective(1200px) rotateX(0deg) scale(1);
    }
}

/* Slide Up with Bounce */
@keyframes modalSlideUpBounce {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(0.9);
    }
    60% {
        opacity: 1;
        transform: translateY(-10px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 3D Rotate Reveal */
@keyframes modalRotateReveal {
    0% {
        opacity: 0;
        transform: perspective(1200px) rotateY(-90deg) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: perspective(1200px) rotateY(5deg) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: perspective(1200px) rotateY(0deg) scale(1);
    }
}

/* Elastic Pop In */
@keyframes modalElasticPop {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Modal Close Animations */
@keyframes modalClose {
    to {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

@keyframes modalCloseFlip {
    to {
        opacity: 0;
        transform: perspective(1200px) rotateX(90deg) scale(0.8);
    }
}

/* ============================================
   ENHANCED CONTENT ANIMATIONS
   ============================================ */

/* Staggered Character Fade In */
@keyframes charFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Content Slide Up with Blur */
@keyframes contentSlideUpBlur {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Content Scale Fade */
@keyframes contentScaleFade {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Letter Unfold Effect */
@keyframes letterUnfold {
    0% {
        opacity: 0;
        transform: scaleY(0) translateY(-50px);
        transform-origin: top center;
    }
    50% {
        opacity: 0.7;
        transform: scaleY(0.6) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: scaleY(1) translateY(0);
    }
}

/* Shimmer Effect for Modal */
@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Heart Beat Effect (for romantic touch) */
@keyframes heartBeat {
    0%, 100% {
        transform: scale(1);
    }
    10%, 30% {
        transform: scale(1.15);
    }
    20%, 40% {
        transform: scale(1);
    }
}

/* Fade In (Simple fallback) */
@keyframes simpleFade {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

/* ============================================
   PARTICLE/CONFETTI EFFECTS (Optional)
   ============================================ */

@keyframes confettiFloat {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

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