@keyframes scroll {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }

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

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

.mouse-animation>.scroll-animation {
    width: 0.25rem;
    height: 0.625rem;
    animation: scroll 3s linear infinite;
}

.mouse-animation {
    height: 2rem;
    box-sizing: content-box;
}

@keyframes spin-icon {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin-button {
    animation: spin-icon 5s linear infinite;
}

@keyframes love {
    50% {
        transform: translateY(1rem);
    }
}

.animate-love {
    animation: love 5s ease-in-out infinite;
}

.slide-desktop {
    transform: scale(1);
    transition: transform 10s linear;
}

.slide-desktop-active {
    transform: scale(1.15);
}

@keyframes falling-hearts {
    0% {
        top: -10%;
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    50% {
        opacity: 0.9;
    }
    100% {
        top: 110%;
        opacity: 0;
        transform: translateY(20px) rotate(15deg);
    }
}

@keyframes falling-confetti {
    0% {
        top: -10%;
        opacity: 1;
        transform: translateX(0) translateY(0) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        top: 110%;
        opacity: 0.3;
        transform: translateX(var(--drift)) translateY(50px) rotateZ(720deg) rotateY(180deg);
    }
}

@keyframes wobble-confetti {
    0%, 100% {
        transform: translateX(0) rotateZ(0deg);
    }
    25% {
        transform: translateX(10px) rotateZ(90deg);
    }
    50% {
        transform: translateX(-5px) rotateZ(180deg);
    }
    75% {
        transform: translateX(5px) rotateZ(270deg);
    }
}

.heart-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 9999;
}

.falling-heart {
    position: absolute;
    animation: falling-hearts linear infinite;
    opacity: 0.7;
    filter: drop-shadow(0 2px 4px rgba(255, 105, 180, 0.3));
}

.falling-heart svg {
    display: block;
}

.falling-confetti {
    position: absolute;
    animation: falling-confetti linear infinite;
    opacity: 0.9;
}

.confetti-pink {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
}

.confetti-purple {
    background: linear-gradient(135deg, #da70d6, #ba55d3);
}

.confetti-gold {
    background: linear-gradient(135deg, #ffd700, #ffb347);
}

.confetti-blue {
    background: linear-gradient(135deg, #87ceeb, #4682b4);
}

.confetti-red {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
}

.confetti-green {
    background: linear-gradient(135deg, #51cf66, #37b24d);
}

.confetti-orange {
    background: linear-gradient(135deg, #ff922b, #fd7e14);
}

.confetti-cyan {
    background: linear-gradient(135deg, #22b8cf, #15aabf);
}

.confetti-yellow {
    background: linear-gradient(135deg, #ffd43b, #fab005);
}

.confetti-magenta {
    background: linear-gradient(135deg, #f06595, #e64980);
}