/* ============================================
   🎂 Birthday Website — Keyframe Animations
   ============================================ */

/* --- Entrance --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes floatEmoji {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes btnShimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

@keyframes scrollBounce {
    0%, 20%, 50%, 80%, 100% { transform: rotate(45deg) translateY(0); }
    40% { transform: rotate(45deg) translateY(10px); }
    60% { transform: rotate(45deg) translateY(5px); }
}

/* --- Hero --- */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

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

@keyframes floatBalloon {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    50% {
        transform: translateY(-110vh) rotate(15deg) scale(1.1);
        opacity: 0.5;
    }
    100% {
        transform: translateY(-120vh) rotate(-10deg) scale(0.9);
        opacity: 0;
    }
}

/* Typewriter */
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkCursor {
    0%, 100% { border-color: var(--accent-gold); }
    50% { border-color: transparent; }
}

/* --- Cake --- */
@keyframes flameFlicker {
    0% {
        transform: scaleX(1) scaleY(1) rotate(-2deg);
        opacity: 1;
    }
    25% {
        transform: scaleX(0.9) scaleY(1.1) rotate(1deg);
    }
    50% {
        transform: scaleX(1.05) scaleY(0.95) rotate(-1deg);
        opacity: 0.9;
    }
    75% {
        transform: scaleX(0.95) scaleY(1.05) rotate(2deg);
    }
    100% {
        transform: scaleX(1) scaleY(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes smokeRise {
    0% {
        opacity: 0.5;
        transform: translateY(0) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) scaleX(2);
    }
}

@keyframes cakeGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.4), 0 0 60px rgba(255, 165, 0, 0.2);
    }
}

/* --- Hearts --- */
@keyframes floatHeart {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    50% {
        transform: translateY(-50vh) rotate(20deg) scale(1.2);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-100vh) rotate(-15deg) scale(0.8);
        opacity: 0;
    }
}

/* --- Pulse --- */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

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

/* --- Neon Glow --- */
@keyframes neonPulse {
    0%, 100% {
        text-shadow:
            0 0 10px var(--accent-gold),
            0 0 20px var(--accent-gold),
            0 0 40px var(--accent-gold-dark);
        opacity: 1;
    }
    50% {
        text-shadow:
            0 0 20px var(--accent-gold),
            0 0 40px var(--accent-gold),
            0 0 80px var(--accent-gold-dark),
            0 0 120px var(--accent-gold-dark);
        opacity: 0.9;
    }
}

/* --- Countdown Flip --- */
@keyframes flipNumber {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(-90deg);
        opacity: 0.5;
    }
    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

/* --- Bounce --- */
@keyframes bounceEmoji {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}

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

/* --- Music Button --- */
@keyframes musicPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
    }
}

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

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

/* --- Rotate --- */
@keyframes slowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Letter by letter reveal for hero text --- */
@keyframes letterReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) rotateX(-90deg);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
        filter: blur(0);
    }
}

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

/* --- Confetti CSS Fallback --- */
@keyframes confettiFall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* --- Shooting Star --- */
@keyframes shootingStar {
    0% {
        transform: translateX(0) translateY(0) rotate(-45deg);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translateX(300px) translateY(300px) rotate(-45deg);
        opacity: 0;
    }
}

/* --- Wave Hand --- */
@keyframes wave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* --- Glow Ring --- */
@keyframes glowRing {
    0%, 100% {
        box-shadow: 0 0 5px var(--accent-gold), 0 0 10px var(--accent-gold), inset 0 0 5px var(--accent-gold);
    }
    50% {
        box-shadow: 0 0 15px var(--accent-gold), 0 0 30px var(--accent-gold), 0 0 45px var(--accent-gold-dark), inset 0 0 15px var(--accent-gold);
    }
}

/* --- Scale & Fade In --- */
@keyframes scaleIn {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Ribbon Flutter --- */
@keyframes ribbonFlutter {
    0%, 100% { transform: skewX(0deg); }
    25% { transform: skewX(3deg); }
    75% { transform: skewX(-3deg); }
}