/* Custom Styles & Animations */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

/* Animation Keyframes */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

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

.animate-fade-in-up {
    opacity: 0; /* JS will trigger animation on load */
    animation: fadeInUp 0.8s ease-out forwards;
}

.animation-delay-500 {
    animation-delay: 0.5s;
    opacity: 0;
    animation-fill-mode: forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #030712; /* gray-950 */
}

::-webkit-scrollbar-thumb {
    background: #4b5563; /* gray-600 */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8b5cf6; /* undefined-500 */
}

/* Filter Button Active State */
.filter-btn.active {
    background-color: rgba(139, 92, 246, 0.1); /* undefined-500/10 */
    border-color: #8b5cf6;
    color: #c4b5fd;
}

/* Before/After Slider Specifics */
#before-image {
    background-size: cover;
    background-position: left center;
}