/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Timeline Line Gradient */
.timeline-line::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 1.25rem; width: 2px;
    background: linear-gradient(to bottom, transparent, #e2e8f0 10%, #e2e8f0 90%, transparent);
    z-index: 0;
}
.dark .timeline-line::before {
    background: linear-gradient(to bottom, transparent, #334155 10%, #334155 90%, transparent);
}
@media (min-width: 768px) {
    .timeline-line::before { left: 50%; transform: translateX(-50%); }
}

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

.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

/* Subtle Background Pattern */
.bg-grid-pattern {
    background-image: radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.2) 1px, transparent 0);
    background-size: 24px 24px;
}
.dark .bg-grid-pattern {
    background-image: radial-gradient(circle at 1px 1px, rgba(51, 65, 85, 0.5) 1px, transparent 0);
}

/* Glassmorphism utility */
.glass-effect {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.dark .glass-effect {
    background: rgba(15, 23, 42, 0.6);
}