/* ========================================
   Valentine's Invitation - Animations
   ======================================== */

/* Snowfall Animation */
@keyframes snowfall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Shimmer Effect for Buttons */
@keyframes shimmer {
    0% {
        transform: translate(-150%, -50%);
    }
    100% {
        transform: translate(150%, -50%);
    }
}

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

/* Penguin Idle Animation */
@keyframes penguinIdle {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-3px) rotate(-1deg);
    }
    75% {
        transform: translateY(-3px) rotate(1deg);
    }
}

.penguin {
    animation: penguinIdle 3s ease-in-out infinite;
}

/* Penguin Waddle Animation */
@keyframes penguinWaddle {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(-5px) rotate(-5deg);
    }
    75% {
        transform: translateX(5px) rotate(5deg);
    }
}

.penguin.waddling {
    animation: penguinWaddle 0.5s ease-in-out infinite;
}

/* Penguin Wave Animation */
@keyframes wingWave {
    0%, 100% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(45deg);
    }
}

.penguin-wing.wave {
    animation: wingWave 0.5s ease-in-out infinite;
}

.penguin-wing.left.wave {
    animation: wingWaveLeft 0.5s ease-in-out infinite;
}

@keyframes wingWaveLeft {
    0%, 100% {
        transform: rotate(-15deg);
    }
    50% {
        transform: rotate(-45deg);
    }
}

/* Celebrating Penguin */
@keyframes celebrate {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-15px) scale(1.05);
    }
}

.penguin.celebrating {
    animation: celebrate 0.6s ease-in-out infinite;
}

/* Pop In Animation */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fade In Up Animation */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

/* Pulse Glow Animation */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 107, 138, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 107, 138, 0.8);
    }
}

/* Cave Glow Pulse */
@keyframes caveGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Card Flip Animation */
@keyframes cardFlip {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(180deg);
    }
}

@keyframes cardFlipBack {
    0% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.bounce {
    animation: bounce 0.6s ease infinite;
}

/* Shake Animation */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.3s ease;
}

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

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

/* Heart Beat Animation */
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.1);
    }
}

.heartbeat {
    animation: heartbeat 1s ease-in-out infinite;
}

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

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--cream);
    animation: typewriter 3s steps(40) forwards, blink 0.75s step-end infinite;
}

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

.confetti {
    animation: confettiFall linear forwards;
}

/* Heart Float */
@keyframes heartFloat {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(90vh) scale(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-20vh) scale(1);
        opacity: 0;
    }
}

.floating-heart {
    animation: heartFloat linear forwards;
}

/* Falling Item Animation */
@keyframes itemFall {
    0% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(calc(100vh + 50px));
    }
}

/* Envelope Open Animation */
@keyframes envelopeOpen {
    0% {
        transform: rotateX(0deg);
    }
    100% {
        transform: rotateX(180deg);
    }
}

/* Card Rise Animation */
@keyframes cardRise {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(-50px);
        opacity: 1;
    }
}

/* Strawberry Animated */
@keyframes strawberryBounce {
    0%, 100% {
        transform: translateY(0) rotate(-5deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

.strawberry.animated {
    animation: strawberryBounce 1s ease-in-out infinite;
}

/* Aurora Background Effect */
@keyframes aurora {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.aurora-bg {
    background: linear-gradient(135deg,
        rgba(155, 109, 255, 0.3),
        rgba(109, 255, 179, 0.2),
        rgba(109, 179, 255, 0.3),
        rgba(155, 109, 255, 0.3));
    background-size: 400% 400%;
    animation: aurora 15s ease infinite;
}

/* Stars Twinkle */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

.stars::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, white, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 90px 40px, white, transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 160px 120px, white, transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: twinkle 4s ease-in-out infinite;
}

/* Slide In Animations */
@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-left {
    animation: slideInLeft 0.5s ease forwards;
}

.slide-in-right {
    animation: slideInRight 0.5s ease forwards;
}

.slide-in-up {
    animation: slideInUp 0.5s ease forwards;
}

/* Glow Pulse for Interactive Elements */
@keyframes glowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(255, 107, 138, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(255, 107, 138, 0.8));
    }
}

/* Zoom In */
@keyframes zoomIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.zoom-in {
    animation: zoomIn 0.5s ease forwards;
}

/* Delayed Animations */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }