/* ===== WHITE THEME IMPACT TIMELINE STYLES ===== */

/* Progress Ring Animation */
.progress-ring {
    animation: fillProgress 2s ease-out forwards;
}

@keyframes fillProgress {
    to {
        stroke-dashoffset: 85;
    }
}

/* Activity Dots Animation */
.activity-dot {
    animation: pulseDots 2s ease-in-out infinite;
}

.activity-dot.bg-green-500 {
    animation-duration: 1.5s;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.activity-dot.bg-blue-500 {
    animation-duration: 2s;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.3);
}

.activity-dot.bg-purple-500 {
    animation-duration: 2.5s;
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.3);
}

@keyframes pulseDots {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Floating Particles */
.floating-particle {
    position: absolute;
    border-radius: 50%;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-8px) scale(1.1);
        opacity: 0.7;
    }
}

/* Professional Glow Effect for White Theme */
.professional-glow {
    animation: professionalGlowWhite 3s ease-in-out infinite alternate;
}

@keyframes professionalGlowWhite {
    from {
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
    }
    to {
        box-shadow: 0 0 25px rgba(139, 92, 246, 0.15);
    }
}

/* Smooth transitions */
#impact-timeline .group {
    transition: all 0.3s ease-in-out;
}

/* Status color variations for white theme */
.text-purple-600 {
    color: #9333ea;
}

.text-orange-600 {
    color: #ea580c;
}

/* Z-index fixes */
header {
    z-index: 50;
}

#impact-timeline {
    z-index: 0;
    position: relative;
}

/* Hover effects for white theme */
#impact-timeline .bg-white:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Timeline line gradient */
#impact-timeline .absolute.left-6 {
    width: 0.125rem; /* equivalent to w-0.5 */
    background: linear-gradient(to bottom, #3b82f6, #10b981, #8b5cf6);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .activity-dot {
        width: 4px;
        height: 4px;
    }
    
    .floating-particle {
        width: 8px;
        height: 8px;
    }
}