Interactive Timeline

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.timeline-container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 4rem 2rem;
  position: relative;
}

.timeline-header {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.timeline-title {
  font-size: 3rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.timeline-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

.timeline-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  padding: 2rem 0;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
  transform: translateX(-50%);
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.timeline-item {
  position: relative;
  margin-bottom: 4rem;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-item:nth-child(even) .timeline-content {
  margin-left: 0;
  margin-right: calc(50% + 40px);
  text-align: right;
}

.timeline-item:nth-child(odd) .timeline-content {
  margin-left: calc(50% + 40px);
  margin-right: 0;
  text-align: left;
}

.timeline-marker {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  z-index: 10;
}

.marker-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: 4px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.marker-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.timeline-item:hover .marker-icon {
  transform: scale(1.1);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.timeline-item:hover .marker-icon::before {
  transform: translateX(100%);
}

.timeline-content {
  position: relative;
}

.timeline-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.timeline-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.timeline-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.15);
}

.card-header {
  margin-bottom: 1.5rem;
}

.timeline-date {
  display: inline-block;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.timeline-event-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.card-body {
  color: rgba(255, 255, 255, 0.9);
}

.timeline-description {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.timeline-stats {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.stat-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.25rem;
}

.timeline-achievements {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.achievement-badge {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.achievement-badge:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.timeline-navigation {
  text-align: center;
  margin-top: 3rem;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
  .timeline-container {
    padding: 2rem 1rem;
  }
  
  .timeline-title {
    font-size: 2.5rem;
  }
  
  .timeline-line {
    left: 30px;
  }
  
  .timeline-item:nth-child(even) .timeline-content,
  .timeline-item:nth-child(odd) .timeline-content {
    margin-left: 80px;
    margin-right: 0;
    text-align: left;
  }
  
  .timeline-marker {
    left: 30px;
  }
  
  .marker-icon {
    width: 50px;
    height: 50px;
  }
  
  .timeline-card {
    padding: 1.5rem;
  }
  
  .timeline-event-title {
    font-size: 1.3rem;
  }
  
  .timeline-stats {
    flex-direction: column;
    gap: 1rem;
  }
  
  .stat-item {
    text-align: left;
  }
  
  .timeline-achievements {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .timeline-title {
    font-size: 2rem;
  }
  
  .timeline-card {
    padding: 1.25rem;
  }
  
  .timeline-event-title {
    font-size: 1.2rem;
  }
  
  .timeline-description {
    font-size: 0.95rem;
  }
  
  .marker-icon {
    width: 40px;
    height: 40px;
  }
  
  .timeline-item:nth-child(even) .timeline-content,
  .timeline-item:nth-child(odd) .timeline-content {
    margin-left: 70px;
  }
  
  .timeline-line {
    left: 25px;
  }
  
  .timeline-marker {
    left: 25px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .timeline-card {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .timeline-item,
  .timeline-card,
  .marker-icon,
  .achievement-badge,
  .nav-btn {
    transition: none;
  }
  
  .timeline-item {
    opacity: 1;
    transform: none;
  }
}

/* Print Styles */
@media print {
  .timeline-container {
    background: white;
    color: black;
  }
  
  .timeline-card {
    background: white;
    border: 1px solid #ccc;
    box-shadow: none;
  }
  
  .timeline-title,
  .timeline-event-title {
    color: black;
  }
  
  .timeline-navigation {
    display: none;
  }
}

class InteractiveTimeline {
  constructor(container) {
    this.container = container || document.querySelector('.timeline-container');
    this.timelineItems = this.container.querySelectorAll('.timeline-item');
    this.timelineLine = this.container.querySelector('.timeline-line');
    this.scrollToTopBtn = this.container.querySelector('#scrollToTop');
    
    this.observerOptions = {
      threshold: 0.2,
      rootMargin: '0px 0px -100px 0px'
    };
    
    this.init();
  }
  
  init() {
    this.setupIntersectionObserver();
    this.setupEventListeners();
    this.setupProgressLine();
    this.setupKeyboardNavigation();
    this.setupSmoothScrolling();
  }
  
  setupIntersectionObserver() {
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          this.animateTimelineItem(entry.target);
        }
      });
    }, this.observerOptions);
    
    this.timelineItems.forEach(item => {
      this.observer.observe(item);
    });
  }
  
  animateTimelineItem(item) {
    const card = item.querySelector('.timeline-card');
    const marker = item.querySelector('.marker-icon');
    
    // Animate card entrance
    setTimeout(() => {
      card.style.transform = 'translateY(0)';
      card.style.opacity = '1';
    }, 200);
    
    // Animate marker
    setTimeout(() => {
      marker.style.transform = 'scale(1.1)';
      setTimeout(() => {
        marker.style.transform = 'scale(1)';
      }, 300);
    }, 400);
    
    // Animate stats or achievements
    const stats = item.querySelectorAll('.stat-number');
    const achievements = item.querySelectorAll('.achievement-badge');
    
    stats.forEach((stat, index) => {
      setTimeout(() => {
        this.animateNumber(stat);
      }, 600 + (index * 200));
    });
    
    achievements.forEach((badge, index) => {
      setTimeout(() => {
        badge.style.transform = 'translateY(0)';
        badge.style.opacity = '1';
      }, 800 + (index * 100));
    });
  }
  
  animateNumber(element) {
    const finalValue = element.textContent;
    const numericValue = parseInt(finalValue.replace(/[^0-9]/g, ''));
    
    if (isNaN(numericValue)) return;
    
    const duration = 1000;
    const startTime = performance.now();
    const prefix = finalValue.replace(/[0-9]/g, '').charAt(0) || '';
    const suffix = finalValue.replace(/[0-9]/g, '').slice(1) || '';
    
    const animate = (currentTime) => {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      
      const currentValue = Math.floor(numericValue * this.easeOutQuart(progress));
      element.textContent = prefix + currentValue.toLocaleString() + suffix;
      
      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        element.textContent = finalValue;
      }
    };
    
    requestAnimationFrame(animate);
  }
  
  easeOutQuart(t) {
    return 1 - Math.pow(1 - t, 4);
  }
  
  setupProgressLine() {
    const updateProgress = () => {
      const scrollTop = window.pageYOffset;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const scrollPercent = scrollTop / docHeight;
      
      const timelineStart = this.container.offsetTop;
      const timelineHeight = this.container.offsetHeight;
      const timelineProgress = Math.max(0, Math.min(1, 
        (scrollTop - timelineStart + window.innerHeight / 2) / timelineHeight
      ));
      
      this.timelineLine.style.background = `linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.8) ${timelineProgress * 100}%,
        rgba(255, 255, 255, 0.3) ${timelineProgress * 100}%,
        rgba(255, 255, 255, 0.3) 100%
      )`;
    };
    
    window.addEventListener('scroll', this.throttle(updateProgress, 16));
    updateProgress();
  }
  
  setupEventListeners() {
    // Scroll to top button
    this.scrollToTopBtn.addEventListener('click', () => {
      this.smoothScrollTo(0, 1000);
    });
    
    // Timeline item click handlers
    this.timelineItems.forEach((item, index) => {
      const card = item.querySelector('.timeline-card');
      
      card.addEventListener('click', () => {
        this.highlightTimelineItem(item);
      });
      
      // Add hover effects
      card.addEventListener('mouseenter', () => {
        this.addHoverEffect(item);
      });
      
      card.addEventListener('mouseleave', () => {
        this.removeHoverEffect(item);
      });
    });
    
    // Window resize handler
    window.addEventListener('resize', this.throttle(() => {
      this.updateLayout();
    }, 250));
  }
  
  setupKeyboardNavigation() {
    let currentFocus = -1;
    
    document.addEventListener('keydown', (e) => {
      if (!this.container.contains(document.activeElement)) return;
      
      switch (e.key) {
        case 'ArrowDown':
          e.preventDefault();
          currentFocus = Math.min(currentFocus + 1, this.timelineItems.length - 1);
          this.focusTimelineItem(currentFocus);
          break;
          
        case 'ArrowUp':
          e.preventDefault();
          currentFocus = Math.max(currentFocus - 1, 0);
          this.focusTimelineItem(currentFocus);
          break;
          
        case 'Home':
          e.preventDefault();
          currentFocus = 0;
          this.focusTimelineItem(currentFocus);
          break;
          
        case 'End':
          e.preventDefault();
          currentFocus = this.timelineItems.length - 1;
          this.focusTimelineItem(currentFocus);
          break;
          
        case 'Enter':
        case ' ':
          e.preventDefault();
          if (currentFocus >= 0) {
            this.highlightTimelineItem(this.timelineItems[currentFocus]);
          }
          break;
      }
    });
    
    // Make timeline items focusable
    this.timelineItems.forEach((item, index) => {
      const card = item.querySelector('.timeline-card');
      card.setAttribute('tabindex', '0');
      card.setAttribute('role', 'button');
      card.setAttribute('aria-label', `Timeline event ${index + 1}`);
    });
  }
  
  focusTimelineItem(index) {
    if (index >= 0 && index < this.timelineItems.length) {
      const card = this.timelineItems[index].querySelector('.timeline-card');
      card.focus();
      
      // Scroll into view if needed
      const rect = card.getBoundingClientRect();
      if (rect.top < 100 || rect.bottom > window.innerHeight - 100) {
        card.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    }
  }
  
  highlightTimelineItem(item) {
    // Remove previous highlights
    this.timelineItems.forEach(i => {
      i.classList.remove('highlighted');
    });
    
    // Add highlight to current item
    item.classList.add('highlighted');
    
    // Add CSS for highlight effect
    if (!document.querySelector('#timeline-highlight-styles')) {
      const style = document.createElement('style');
      style.id = 'timeline-highlight-styles';
      style.textContent = `
        .timeline-item.highlighted .timeline-card {
          background: rgba(255, 255, 255, 0.25) !important;
          transform: translateY(-10px) scale(1.02) !important;
          box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3) !important;
        }
        
        .timeline-item.highlighted .marker-icon {
          transform: scale(1.2) !important;
          box-shadow: 0 0 30px rgba(255, 255, 255, 0.6) !important;
        }
      `;
      document.head.appendChild(style);
    }
    
    // Remove highlight after 3 seconds
    setTimeout(() => {
      item.classList.remove('highlighted');
    }, 3000);
  }
  
  addHoverEffect(item) {
    const marker = item.querySelector('.marker-icon');
    marker.style.transform = 'scale(1.1)';
    marker.style.boxShadow = '0 15px 40px rgba(0, 0, 0, 0.3)';
  }
  
  removeHoverEffect(item) {
    const marker = item.querySelector('.marker-icon');
    marker.style.transform = 'scale(1)';
    marker.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.2)';
  }
  
  setupSmoothScrolling() {
    // Add smooth scrolling to all internal links
    const links = this.container.querySelectorAll('a[href^="#"]');
    
    links.forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        const targetId = link.getAttribute('href').substring(1);
        const targetElement = document.getElementById(targetId);
        
        if (targetElement) {
          const targetPosition = targetElement.offsetTop - 100;
          this.smoothScrollTo(targetPosition, 1000);
        }
      });
    });
  }
  
  smoothScrollTo(targetPosition, duration) {
    const startPosition = window.pageYOffset;
    const distance = targetPosition - startPosition;
    const startTime = performance.now();
    
    const animate = (currentTime) => {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      
      const easeProgress = this.easeInOutCubic(progress);
      window.scrollTo(0, startPosition + (distance * easeProgress));
      
      if (progress < 1) {
        requestAnimationFrame(animate);
      }
    };
    
    requestAnimationFrame(animate);
  }
  
  easeInOutCubic(t) {
    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
  }
  
  updateLayout() {
    // Recalculate positions and update progress line
    this.setupProgressLine();
  }
  
  throttle(func, limit) {
    let inThrottle;
    return function() {
      const args = arguments;
      const context = this;
      if (!inThrottle) {
        func.apply(context, args);
        inThrottle = true;
        setTimeout(() => inThrottle = false, limit);
      }
    };
  }
  
  // Public API methods
  addTimelineItem(itemData, position = -1) {
    const itemHTML = this.createTimelineItemHTML(itemData);
    const itemElement = document.createElement('div');
    itemElement.innerHTML = itemHTML;
    const newItem = itemElement.firstElementChild;
    
    if (position === -1 || position >= this.timelineItems.length) {
      this.container.querySelector('.timeline-wrapper').appendChild(newItem);
    } else {
      const referenceItem = this.timelineItems[position];
      referenceItem.parentNode.insertBefore(newItem, referenceItem);
    }
    
    // Update items list and setup observer
    this.timelineItems = this.container.querySelectorAll('.timeline-item');
    this.observer.observe(newItem);
    
    return newItem;
  }
  
  createTimelineItemHTML(data) {
    return `
      <div class="timeline-item" data-year="${data.year}">
        <div class="timeline-marker">
          <div class="marker-icon">
            ${data.icon || '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/></svg>'}
          </div>
        </div>
        <div class="timeline-content">
          <div class="timeline-card">
            <div class="card-header">
              <span class="timeline-date">${data.date}</span>
              <h3 class="timeline-event-title">${data.title}</h3>
            </div>
            <div class="card-body">
              <p class="timeline-description">${data.description}</p>
              ${data.stats ? this.createStatsHTML(data.stats) : ''}
              ${data.achievements ? this.createAchievementsHTML(data.achievements) : ''}
            </div>
          </div>
        </div>
      </div>
    `;
  }
  
  createStatsHTML(stats) {
    return `
      <div class="timeline-stats">
        ${stats.map(stat => `
          <div class="stat-item">
            <span class="stat-number">${stat.number}</span>
            <span class="stat-label">${stat.label}</span>
          </div>
        `).join('')}
      </div>
    `;
  }
  
  createAchievementsHTML(achievements) {
    return `
      <div class="timeline-achievements">
        ${achievements.map(achievement => `
          <span class="achievement-badge">${achievement}</span>
        `).join('')}
      </div>
    `;
  }
  
  removeTimelineItem(index) {
    if (index >= 0 && index < this.timelineItems.length) {
      const item = this.timelineItems[index];
      this.observer.unobserve(item);
      item.remove();
      this.timelineItems = this.container.querySelectorAll('.timeline-item');
    }
  }
  
  scrollToItem(index) {
    if (index >= 0 && index < this.timelineItems.length) {
      const item = this.timelineItems[index];
      const targetPosition = item.offsetTop - 150;
      this.smoothScrollTo(targetPosition, 1000);
    }
  }
  
  getVisibleItems() {
    return Array.from(this.timelineItems).filter(item => 
      item.classList.contains('visible')
    );
  }
  
  // Performance monitoring
  getPerformanceMetrics() {
    return {
      totalItems: this.timelineItems.length,
      visibleItems: this.getVisibleItems().length,
      observerActive: !!this.observer,
      scrollPosition: window.pageYOffset
    };
  }
  
  // Cleanup method
  destroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
    
    // Remove event listeners
    window.removeEventListener('scroll', this.updateProgress);
    window.removeEventListener('resize', this.updateLayout);
    
    // Remove custom styles
    const highlightStyles = document.querySelector('#timeline-highlight-styles');
    if (highlightStyles) {
      highlightStyles.remove();
    }
  }
}

// Initialize timeline when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  window.interactiveTimeline = new InteractiveTimeline();
  
  // Example of adding a custom timeline item
  // const customItem = {
  //   year: '2024',
  //   date: 'March 2024',
  //   title: 'New Milestone',
  //   description: 'Description of the new milestone...',
  //   icon: '<svg>...</svg>',
  //   stats: [
  //     { number: '100K', label: 'Users' },
  //     { number: '50', label: 'Countries' }
  //   ],
  //   achievements: ['🎉 Major Launch', '🚀 Global Reach']
  // };
  // 
  // window.interactiveTimeline.addTimelineItem(customItem);
});