/* Timeline Animations CSS */

/* Simple milestone dots */
.timeline-milestone-dot {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: white;
    border: 3px solid #6366f1;
    border-radius: 50%;
    z-index: 10;
    transition: all 0.3s ease;
}

/* Position each milestone dot */
.timeline-milestone-dot:nth-child(2) { left: 0; }
.timeline-milestone-dot:nth-child(3) { left: 33.33%; transform: translateX(-50%) translateY(-50%); }
.timeline-milestone-dot:nth-child(4) { left: 66.66%; transform: translateX(-50%) translateY(-50%); }
.timeline-milestone-dot:nth-child(5) { right: 0; left: auto; }

/* Hover effect for milestone dots */
.timeline-milestone-dot:hover {
    transform: translateY(-50%) scale(1.2);
    background: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.task-icon-animated {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-right: 8px;
}

.task-item {
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
}

/* Remove old task-dot styles */
.task-dot {
    display: none;
}

/* Ensure SVG animations are smooth */
.timeline-milestone svg,
.task-icon-animated {
    will-change: transform;
}

/* Add hover effect to timeline cards */
.timeline-card:hover .task-icon-animated circle {
    stroke-width: 3;
}

/* Progress bar animation */
.timeline-progress .progress-fill {
    animation: progressGrow 4s ease-out forwards;
    animation-delay: 1s;
}

@keyframes progressGrow {
    0% { width: 0%; }
    25% { width: 25%; }
    50% { width: 50%; }
    75% { width: 75%; }
    100% { width: 100%; }
}

/* Active milestone dot animation */
.timeline-milestone-dot.active {
    background: #6366f1;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
    }
}

/* Card entrance animation */
.timeline-card {
    animation: cardSlideIn 0.8s ease-out;
    animation-fill-mode: both;
}

.timeline-card.week-1 { animation-delay: 0.2s; }
.timeline-card.week-2 { animation-delay: 0.4s; }
.timeline-card.week-3 { animation-delay: 0.6s; }
.timeline-card.week-4 { animation-delay: 0.8s; }

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