/* Animation Keyframes */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

.floating-element {
    animation: float 5s ease-in-out infinite;
}

/* Custom Scrollbar Global */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #16181e; }
::-webkit-scrollbar-thumb { background: #2b2d36; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #8bd94e; }

/* Hide scrollbar for the infinite scroll section but allow functionality */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Animations */
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in-left { animation: fadeInLeft 0.8s ease-out forwards; }
.animate-fade-in-right { animation: fadeInRight 0.8s ease-out forwards; }

/* Store Modal */
#pets-modal:not(.hidden) > div:last-child {
    animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
    from { opacity: 0; transform: translate(-50%, -40%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Star Field */
.stars, .stars2, .stars3 {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    animation: animStar 150s linear infinite;
    pointer-events: none;
}

.stars {
    width: 2px; height: 2px; background: transparent;
    box-shadow: 100px 100px #FFF, 200px 400px #FFF, 500px 300px #FFF, 800px 100px #FFF, 
                150px 600px #FFF, 300px 800px #FFF, 900px 700px #FFF, 1100px 200px #FFF,
                50px 200px #FFF, 1200px 900px #FFF, 400px 500px #FFF, 700px 800px #FFF,
                1000px 400px #FFF, 600px 100px #FFF, 250px 900px #FFF, 850px 300px #FFF,
                1150px 600px #FFF, 350px 150px #FFF, 750px 50px #FFF, 1250px 350px #FFF,
                1300px 800px #FFF, 1400px 100px #FFF, 1500px 500px #FFF, 1600px 300px #FFF,
                1700px 700px #FFF, 1800px 200px #FFF, 1900px 900px #FFF, 2000px 400px #FFF;
    opacity: 0.8;
}

.stars2 {
    width: 3px; height: 3px; background: transparent;
    box-shadow: 200px 300px #b19cf8, 600px 100px #b19cf8, 900px 500px #b19cf8, 
                1200px 800px #b19cf8, 400px 900px #b19cf8, 100px 700px #b19cf8,
                1500px 200px #b19cf8, 1800px 400px #b19cf8, 1300px 100px #b19cf8;
    animation-duration: 200s;
    opacity: 0.5;
}

.stars3 {
    width: 1px; height: 1px; background: transparent;
    box-shadow: 150px 250px #FFF, 550px 150px #FFF, 850px 550px #FFF, 1250px 850px #FFF,
                350px 850px #FFF, 50px 750px #FFF, 1450px 250px #FFF, 1750px 450px #FFF,
                250px 350px #FFF, 650px 250px #FFF, 950px 650px #FFF, 1350px 950px #FFF,
                450px 950px #FFF, 150px 850px #FFF, 1550px 350px #FFF, 1850px 550px #FFF;
    animation-duration: 100s;
    opacity: 1;
}

@keyframes animStar {
    from { transform: translateY(0px); }
    to { transform: translateY(-2000px); }
}