/* Additional CSS for timeline animation and journey visualization */
.timeline::before {
  animation: timeline-grow 2s ease-out forwards;
  transform-origin: top;
}

@keyframes timeline-grow {
  from {
    transform: scaleY(0) translateX(-50%);
  }
  to {
    transform: scaleY(1) translateX(-50%);
  }
}

.timeline-icon {
  animation: icon-pop 0.5s ease-out forwards;
  animation-delay: calc(var(--icon-index) * 0.3s + 1s);
  opacity: 0;
  transform: scale(0) translate(-50%, 0);
}

@keyframes icon-pop {
  0% {
    opacity: 0;
    transform: scale(0) translate(-50%, 0);
  }
  70% {
    opacity: 1;
    transform: scale(1.2) translate(-50%, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, 0);
  }
}

.journey-visualization {
  position: relative;
  height: 400px;
  margin: 4rem 0;
  overflow: visible;
}

.journey-curve-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.journey-point {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--failure);
  z-index: 2;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
  transition: all 0.3s ease;
}

.journey-point:hover {
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.7);
}

.journey-point.success {
  background-color: var(--success);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.journey-point.success:hover {
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.7);
}

.journey-label {
  position: absolute;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  transform: translateX(-50%);
  text-align: center;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.journey-curve {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.failure-curve {
  stroke: var(--failure);
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawPath 2s forwards ease-out;
  filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.5));
}

.success-curve {
  stroke: var(--success);
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawPath 2s 1s forwards ease-out;
  filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.5));
}

@keyframes drawPath {
  to {
    stroke-dashoffset: 0;
  }
}

/* Enhanced hover effects for timeline items */
.timeline-content {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.4s ease,
              background-color 0.4s ease;
}

.timeline-content:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
  background-color: #252525;
}

.timeline-item:nth-child(odd) .timeline-content:hover {
  transform: translateY(-8px) scale(1.02);
}

.timeline-item:nth-child(even) .timeline-content:hover {
  transform: translateY(-8px) scale(1.02);
}

/* Glow effect for timeline icons on hover */
.timeline-icon:hover {
  box-shadow: 0 0 20px var(--primary);
}

/* Improved mobile timeline */
@media (max-width: 768px) {
  .timeline-content {
    margin-bottom: 2rem;
  }
  
  .journey-visualization {
    height: 300px;
  }
}

/* Cursor trail effect */
.cursor-trail {
  position: fixed;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--primary);
  pointer-events: none;
  z-index: 9997;
  opacity: 0.7;
  transition: opacity 0.5s ease;
}

/* Scroll progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  z-index: 1001;
  width: 0%;
  transition: width 0.1s ease;
}