/* ========================================
   Valentine Website - Animations v2
   Smooth & Premium 💕
   ======================================== */

/* ========================================
   Smooth Reveal Animations
   ======================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   Floating & Particle Animations
   ======================================== */
@keyframes float-up {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-100px) rotate(720deg);
        opacity: 0;
    }
}

@keyframes float-gentle {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(15px, -25px) rotate(5deg);
    }

    50% {
        transform: translate(-10px, -15px) rotate(-3deg);
    }

    75% {
        transform: translate(-20px, -30px) rotate(2deg);
    }
}

@keyframes sparkle {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

/* ========================================
   Confetti Animations
   ======================================== */
@keyframes confetti-fall {
    0% {
        transform: translateY(-100px) rotate(0deg) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg) scale(0.5);
        opacity: 0;
    }
}

@keyframes confetti-sway {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(20px);
    }

    75% {
        transform: translateX(-20px);
    }
}

/* ========================================
   Firework Animations
   ======================================== */
@keyframes firework-particle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--end-x), var(--end-y)) scale(0);
        opacity: 0;
    }
}

@keyframes firework-glow {
    0% {
        box-shadow: 0 0 5px currentColor;
    }

    50% {
        box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
    }

    100% {
        box-shadow: 0 0 5px currentColor;
    }
}

/* ========================================
   Heart Rain
   ======================================== */
@keyframes rainHearts {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0.5;
    }
}

/* ========================================
   Button Animations
   ======================================== */
@keyframes shrinkSmooth {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(var(--shrink-scale, 0.9));
    }
}

@keyframes growSmooth {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(var(--grow-scale, 1.1));
    }
}

@keyframes buttonShake {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    10% {
        transform: translateX(-8px) rotate(-2deg);
    }

    20% {
        transform: translateX(8px) rotate(2deg);
    }

    30% {
        transform: translateX(-6px) rotate(-1deg);
    }

    40% {
        transform: translateX(6px) rotate(1deg);
    }

    50% {
        transform: translateX(-4px) rotate(0deg);
    }

    60% {
        transform: translateX(4px) rotate(0deg);
    }

    70% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(2px);
    }

    90% {
        transform: translateX(-1px);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow:
            0 8px 30px rgba(255, 30, 86, 0.4),
            0 0 40px rgba(255, 30, 86, 0.2);
    }

    50% {
        box-shadow:
            0 12px 50px rgba(255, 30, 86, 0.6),
            0 0 80px rgba(255, 30, 86, 0.4);
    }
}

/* ========================================
   Envelope Animations
   ======================================== */
@keyframes envelopeFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(1deg);
    }
}

@keyframes sealPop {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.3) rotate(10deg);
    }

    100% {
        transform: translate(-50%, -50%) scale(0) rotate(180deg);
        opacity: 0;
    }
}

@keyframes letterSlideOut {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-65%);
    }
}

/* ========================================
   Text Reveal Animations
   ======================================== */
@keyframes typewriter-cursor {

    0%,
    100% {
        border-right-color: transparent;
    }

    50% {
        border-right-color: var(--deep-rose);
    }
}

@keyframes letterReveal {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.5) rotate(-10deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes wordReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========================================
   Celebration Animations
   ======================================== */
@keyframes celebratePop {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-5deg);
    }

    60% {
        transform: scale(1.1) rotate(2deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes celebrateShake {

    0%,
    100% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-10px);
    }

    20% {
        transform: translateX(10px);
    }

    30% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(8px);
    }

    50% {
        transform: translateX(-5px);
    }

    60% {
        transform: translateX(5px);
    }

    70% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }

    90% {
        transform: translateX(-1px);
    }
}

/* ========================================
   Smooth Scroll Indicator
   ======================================== */
@keyframes bounceDown {

    0%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(10px);
        opacity: 0.6;
    }
}

/* ========================================
   Loading Animations
   ======================================== */
@keyframes loadProgress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes heartPulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 30, 86, 0.5));
    }

    50% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 25px rgba(255, 30, 86, 0.8));
    }
}

/* ========================================
   Bubble Pop Animation
   ======================================== */
@keyframes bubblePop {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }

    50% {
        transform: translateY(-5px) scale(1.05);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========================================
   Glow Pulse
   ======================================== */
@keyframes glowPulse {

    0%,
    100% {
        text-shadow: 0 0 10px currentColor;
    }

    50% {
        text-shadow: 0 0 30px currentColor, 0 0 50px currentColor;
    }
}

/* ========================================
   Theme Transition
   ======================================== */
.theme-transition {
    transition: background-color 0.5s ease, color 0.5s ease;
}