/* Blinking cursor for typewriter effect */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.animate-blink { animation: blink 1s step-end infinite; }

/* Fade in up animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 1s ease-out forwards; }
.delay-300 { animation-delay: 300ms; }

/* Candle Flicker */
@keyframes flicker {
    0%, 100% { transform: scale(1) translateX(-50%); opacity: 0.9; }
    50% { transform: scale(1.1) translateX(-50%); opacity: 1; filter: drop-shadow(0 0 5px orange); }
    25%, 75% { transform: scale(0.95) translateX(-50%); opacity: 0.8; }
}
.animate-flicker { animation: flicker 0.6s infinite alternate; }

/* Slow Breathing */
@keyframes pulse-slow {
    0%, 100% { opacity: 0.8; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1.02); text-shadow: 0 0 10px rgba(214, 107, 120, 0.3); }
}
.animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }

/* Float Up Magic Emoji */
@keyframes floatUp {
    0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-80px) scale(1.5) rotate(20deg); opacity: 0; }
}
.animate-float-up { animation: floatUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

/* Background Sparkles */
@keyframes drift {
    0% { transform: translateY(100vh) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.45; }
    90% { opacity: 0.45; }
    100% { transform: translateY(-10vh) translateX(20px) rotate(180deg); opacity: 0; }
}
.bg-sparkle {
    position: fixed;
    border-radius: 50%;
    background-color: #fdb2ba;
    pointer-events: none;
    z-index: 0;
    animation: drift 15s linear infinite;
    opacity: 0;
}

/* Timeline Cards */
.timeline-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.timeline-card.active { opacity: 1; transform: translateY(0); }
.timeline-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(214, 107, 120, 0.25); }
.timeline-card.active:hover { transform: translateY(-2px); }

@media (max-width: 767px) {
    .right-timeline .order-1.bg-card-bg,
    .left-timeline .order-1.bg-card-bg {
        margin-left: 3.25rem;
        width: calc(100% - 4.25rem);
    }
}

/* Base states & Scrollbar */
#birthday-cake:active { transform: scale(0.95); }
.interactive-burst:active { transform: scale(0.95); }

.animation-delay-\[0s\] { animation-delay: 0s; }
.animation-delay-\[2s\] { animation-delay: 2s; }
.animation-delay-\[4s\] { animation-delay: 4s; }
.animation-delay-\[7s\] { animation-delay: 7s; }
.animation-delay-\[9s\] { animation-delay: 9s; }
.animation-delay-\[12s\] { animation-delay: 12s; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #FFF5F5; }
::-webkit-scrollbar-thumb { background: #FFEDED; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #D66B78; }

body { -webkit-tap-highlight-color: transparent; }

/* Footer Heart Beat/Bounce */
@keyframes heart-bounce {
    0%, 100% { transform: scale(1) translateY(0); }
    15% { transform: scale(1.3) translateY(-3px); }
    30% { transform: scale(1) translateY(0); }
    45% { transform: scale(1.3) translateY(-3px); }
    60% { transform: scale(1) translateY(0); }
}
.animate-heart-bounce { 
    animation: heart-bounce 2s infinite; 
    transform-origin: center;
}