/* ============================================
   ANIMATIONS
   All animation definitions go in this file.
   The reduced-motion block at the bottom
   overrides everything for accessibility.
   ============================================ */

/* --- Icon animations for How It Works --- */

/* Ingest: arrows pulse inward */
@keyframes ingest-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.88); }
}

.pipeline__icon--ingest svg {
  animation: ingest-pulse 2.5s ease-in-out infinite;
  transform-origin: center;
}

/* Compute: gear rotates */
@keyframes gear-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pipeline__icon--gear svg {
  animation: gear-spin 8s linear infinite;
  transform-origin: center;
}

/* Analyze: bars bounce up and down */
@keyframes analyze-bar-1 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.3); } }
@keyframes analyze-bar-2 { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(0.7); } }
@keyframes analyze-bar-3 { 0%, 100% { transform: scaleY(1); } 60% { transform: scaleY(1.2); } }
@keyframes analyze-bar-4 { 0%, 100% { transform: scaleY(1); } 30% { transform: scaleY(0.8); } }

.analyze-bar-1 { animation: analyze-bar-1 2s ease-in-out infinite; transform-origin: bottom; }
.analyze-bar-2 { animation: analyze-bar-2 2.2s ease-in-out infinite; transform-origin: bottom; }
.analyze-bar-3 { animation: analyze-bar-3 1.8s ease-in-out infinite; transform-origin: bottom; }
.analyze-bar-4 { animation: analyze-bar-4 2.4s ease-in-out infinite; transform-origin: bottom; }

/* Deliver: arrow slides out and back */
@keyframes deliver-slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.deliver-arrow {
  animation: deliver-slide 2s ease-in-out infinite;
}

/* Spider pulse dot (dynamically created by JS) */
.spider__pulse-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  pointer-events: none;
  z-index: 1;
}

/* Spider orbit dot (dynamically created by JS for ambient particle effect) */
.spider__orbit-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  pointer-events: none;
  z-index: 1;
}

/* SVG connecting line pulse glow */
@keyframes line-pulse {
  0%, 100% {
    stroke-opacity: 0.4;
    filter: drop-shadow(0 0 2px var(--color-accent));
  }
  50% {
    stroke-opacity: 1;
    filter: drop-shadow(0 0 8px var(--color-accent));
  }
}

.pipeline__line-path {
  animation: none;
}

/* Play button pulse animation (HIW-03, D-15) */
@keyframes play-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(232, 93, 58, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 12px rgba(232, 93, 58, 0);
  }
}

.demo__play-btn {
  animation: none;
}

/* ============================================
   REDUCED MOTION
   This block MUST remain at the bottom of this
   file. Every animation added above must have a
   corresponding override here.
   ============================================ */
@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;
  }

  .pipeline__line-path {
    animation: none !important;
    stroke-opacity: 0.4 !important;
  }

  .pipeline__icon--ingest svg,
  .pipeline__icon--gear svg,
  .pipeline__icon--analyze svg,
  .analyze-bar-1, .analyze-bar-2, .analyze-bar-3, .analyze-bar-4,
  .deliver-arrow {
    animation: none !important;
  }

  .demo__play-btn {
    animation: none !important;
  }

  .spider__pulse-dot,
  .spider__orbit-dot {
    display: none !important;
  }

  .spider__node {
    transform: translate(-50%, -50%) !important;
  }
}