:root {
  /* Timeline Theme - Temporal Colors */
  --primary: 147 51 234; /* purple-600 */
  --primary-foreground: 255 255 255;
  
  --secondary: 59 130 246; /* blue-500 */
  --secondary-foreground: 255 255 255;
  
  --accent: 6 182 212; /* cyan-600 */
  --accent-foreground: 255 255 255;
  
  --background: 15 23 42; /* slate-900 */
  --foreground: 255 255 255;
  
  --card: 30 41 59; /* slate-800 */
  --card-foreground: 255 255 255;
  
  --popover: 30 41 59;
  --popover-foreground: 255 255 255;
  
  --muted: 51 65 85; /* slate-700 */
  --muted-foreground: 148 163 184; /* slate-400 */
  
  --destructive: 239 68 68; /* red-500 */
  --destructive-foreground: 255 255 255;
  
  --border: 71 85 105; /* slate-600 */
  --input: 51 65 85; /* slate-700 */
  --ring: 147 51 234; /* purple-600 */
  
  --radius: 1rem;
  
  /* Timeline gradients */
  --gradient-timeline: linear-gradient(180deg, rgb(147, 51, 234), rgb(59, 130, 246), rgb(6, 182, 212));
  --gradient-past: linear-gradient(135deg, rgb(71, 85, 105), rgb(100, 116, 139));
  --gradient-present: linear-gradient(135deg, rgb(147, 51, 234), rgb(168, 85, 247));
  --gradient-future: linear-gradient(135deg, rgb(6, 182, 212), rgb(14, 165, 233));
  
  /* Time effects */
  --glow-timeline: 0 0 30px rgba(147, 51, 234, 0.5);
  --shadow-temporal: 0 25px 50px rgba(0, 0, 0, 0.25);
  --pulse-timeline: 0 0 0 0 rgba(147, 51, 234, 0.7);
  
  /* Cosmic background */
  --cosmic-bg: radial-gradient(circle at 20% 80%, rgba(147, 51, 234, 0.2) 0%, transparent 50%),
               radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
               radial-gradient(circle at 40% 40%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
}

/* Timeline animations */
@keyframes timeline-pulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: var(--pulse-timeline);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(147, 51, 234, 0);
  }
}

@keyframes temporal-drift {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(1deg); }
  50% { transform: translateY(0px) rotate(0deg); }
  75% { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes time-flow {
  0% { 
    background-position: 0% 0%;
    opacity: 0.5;
  }
  50% { 
    background-position: 100% 100%;
    opacity: 1;
  }
  100% { 
    background-position: 0% 0%;
    opacity: 0.5;
  }
}

@keyframes cosmic-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes timeline-emerge {
  0% { 
    opacity: 0;
    transform: translateX(-100px) scale(0.8);
  }
  100% { 
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes future-glow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
  }
  50% { 
    box-shadow: 0 0 40px rgba(6, 182, 212, 0.6);
  }
}

/* Timeline components */
.timeline-line {
  background: var(--gradient-timeline);
  position: relative;
  box-shadow: var(--glow-timeline);
}

.timeline-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 200%;
  height: 100%;
  background: var(--gradient-timeline);
  transform: translateX(-50%);
  opacity: 0.3;
  filter: blur(10px);
}

.timeline-node {
  position: relative;
  animation: timeline-pulse 3s ease-in-out infinite;
}

.timeline-node::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: var(--gradient-present);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: timeline-pulse 2s ease-in-out infinite 0.5s;
}

/* Timeline cards */
.timeline-card {
  position: relative;
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(147, 51, 234, 0.3);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: timeline-emerge 0.8s ease-out;
}

.timeline-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: var(--shadow-temporal);
}

.timeline-card-past {
  border-left: 4px solid rgb(100, 116, 139);
  background: linear-gradient(135deg, rgba(71, 85, 105, 0.1), rgba(30, 41, 59, 0.8));
}

.timeline-card-present {
  border-left: 4px solid rgb(147, 51, 234);
  animation: future-glow 2s ease-in-out infinite;
}

.timeline-card-future {
  border-left: 4px solid rgb(6, 182, 212);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(30, 41, 59, 0.8));
}

/* Temporal text effects */
.temporal-text {
  background: var(--gradient-timeline);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: time-flow 4s ease-in-out infinite;
  background-size: 200% 200%;
}

/* Cosmic elements */
.cosmic-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgb(6, 182, 212);
  border-radius: 50%;
  animation: temporal-drift 6s ease-in-out infinite;
  box-shadow: 0 0 6px currentColor;
}

.cosmic-ring {
  position: absolute;
  border: 1px solid rgba(147, 51, 234, 0.3);
  border-radius: 50%;
  animation: cosmic-rotate 20s linear infinite;
}

/* Navigation timeline */
.nav-timeline {
  position: relative;
}

.nav-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gradient-timeline);
  box-shadow: var(--glow-timeline);
}

.nav-dot {
  position: relative;
  z-index: 10;
  transition: all 0.3s ease;
}

.nav-dot:hover {
  animation: timeline-pulse 1s ease-in-out;
}

/* Time badges */
.time-badge {
  background: var(--gradient-present);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: var(--shadow-temporal);
  animation: future-glow 3s ease-in-out infinite;
}

/* Stats with temporal effect */
.timeline-stat {
  position: relative;
  overflow: hidden;
}

.timeline-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2), transparent);
  animation: time-flow 3s ease-in-out infinite;
}

/* Contact timeline effects */
.contact-timeline {
  position: relative;
}

.contact-timeline::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-timeline);
  transform: translateY(-50%);
  opacity: 0.5;
}

/* Responsive timeline adjustments */
@media (max-width: 768px) {
  .timeline-card {
    margin: 0 1rem;
  }
  
  .timeline-line {
    left: 1rem;
  }
  
  .cosmic-particle {
    display: none;
  }
}

/* Custom scrollbar for timeline theme */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.8);
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-timeline);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgb(126, 34, 206), rgb(37, 99, 235), rgb(8, 145, 178));
}