/* Custom animations and styles */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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

.timeline-item {
    animation: slideInUp 0.6s ease-out;
}

.timeline-item:nth-child(2n) {
    animation-delay: 0.1s;
}

.timeline-item:nth-child(3n) {
    animation-delay: 0.2s;
}

.timeline-item:nth-child(4n) {
    animation-delay: 0.3s;
}

/* Horizontal scroll styling */
#timeline-container {
    scrollbar-width: thin;
    scrollbar-color: #3B82F6 #E5E7EB;
}

#timeline-container::-webkit-scrollbar {
    height: 6px;
}

#timeline-container::-webkit-scrollbar-track {
    background: #E5E7EB;
    border-radius: 3px;
}

#timeline-container::-webkit-scrollbar-thumb {
    background: #3B82F6;
    border-radius: 3px;
}

#timeline-container::-webkit-scrollbar-thumb:hover {
    background: #2563EB;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .timeline-item {
        min-width: 240px !important;
    }

    .timeline-item > div {
        width: 220px;
    }
}

/* Connection line positioning */
.timeline-container-wrapper {
    position: relative;
}

/* Pulse animation for current/active items */
.timeline-item[data-status="In Progress"] .w-4.h-4.bg-blue-600 {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}