/* Custom scrollbar for the MVP feed */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

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

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

.slide-in-left {
    animation: slideInLeft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide-in-right {
    animation: slideInRight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.delay-200 {
    animation-delay: 200ms;
    opacity: 0;
}

/* Smooth fade for feed items */
.feed-item {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar for the entire page */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a; /* Slightly lighter than pure black to distinguish track */
    border-left: 1px solid rgba(255, 255, 255, 0.03);
}
::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25); /* High contrast thumb */
    border-radius: 10px;
    border: 2px solid #0a0a0a; /* Breathing room */
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.45);
}
::-webkit-scrollbar-thumb:active {
    background-color: #10b981; /* Subtle green accent on drag */
}