/* ============================================
   KEYFRAMES
   ============================================ */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@keyframes scroll-cue {
  0% { transform: translateY(0); opacity: 1; }
  70% { opacity: 0.3; }
  100% { transform: translateY(16px); opacity: 0; }
}

@keyframes pulse-node {
  0%, 100% { box-shadow: 0 0 0 6px rgba(100,181,246,0.18); }
  50% { box-shadow: 0 0 0 12px rgba(100,181,246,0.06); }
}

@keyframes ripple-anim {
  to { transform: scale(3); opacity: 0; }
}

@keyframes float-particle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--delay, 0s);
}
.reveal-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Timeline items slide from their side */
.timeline-item { opacity: 0; transition: opacity 0.7s var(--ease); }
.timeline-item[data-side="left"] .timeline-card { transform: translateX(-24px); transition: transform 0.7s var(--ease); }
.timeline-item[data-side="right"] .timeline-card { transform: translateX(24px); transition: transform 0.7s var(--ease); }
.timeline-item.in-view { opacity: 1; }
.timeline-item.in-view .timeline-card { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}