/* ============================================================
   CompCode Solutions — Scroll Animations
   All transitions guarded by prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ── Base states (hidden before reveal) ─────────────────── */
  [data-animate] {
    will-change: opacity, transform;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  [data-animate="fade-up"]    { transform: translateY(32px); }
  [data-animate="fade-in"]    { transform: none; }
  [data-animate="fade-left"]  { transform: translateX(-32px); }
  [data-animate="fade-right"] { transform: translateX(32px); }
  [data-animate="scale-up"]   { transform: scale(0.94); }

  /* ── Staggered children ──────────────────────────────────── */
  [data-animate-stagger] > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  [data-animate-stagger] > *:nth-child(1)  { transition-delay: 0ms; }
  [data-animate-stagger] > *:nth-child(2)  { transition-delay: 80ms; }
  [data-animate-stagger] > *:nth-child(3)  { transition-delay: 160ms; }
  [data-animate-stagger] > *:nth-child(4)  { transition-delay: 240ms; }
  [data-animate-stagger] > *:nth-child(5)  { transition-delay: 320ms; }
  [data-animate-stagger] > *:nth-child(6)  { transition-delay: 400ms; }
  [data-animate-stagger] > *:nth-child(7)  { transition-delay: 480ms; }
  [data-animate-stagger] > *:nth-child(8)  { transition-delay: 560ms; }

  /* ── Revealed states ─────────────────────────────────────── */
  [data-animate].is-visible {
    opacity: 1;
    transform: none;
  }

  [data-animate-stagger].is-visible > * {
    opacity: 1;
    transform: none;
  }

  /* ── Hero node graph animation ───────────────────────────── */
  .node-pulse {
    animation: node-pulse 3s ease-in-out infinite;
  }
  .node-pulse-delay-1 { animation-delay: 0.5s; }
  .node-pulse-delay-2 { animation-delay: 1s; }
  .node-pulse-delay-3 { animation-delay: 1.5s; }
  .node-pulse-delay-4 { animation-delay: 2s; }

  @keyframes node-pulse {
    0%, 100% { opacity: 0.4; r: 6; }
    50% { opacity: 1; r: 8; }
  }

  .edge-dash {
    stroke-dasharray: 6 4;
    animation: dash-flow 2s linear infinite;
  }
  .edge-dash-reverse { animation-direction: reverse; }

  @keyframes dash-flow {
    to { stroke-dashoffset: -20; }
  }

  /* HI diagram flow animation */
  .flow-arrow {
    animation: flow-pulse 2s ease-in-out infinite;
  }
  .flow-arrow-1 { animation-delay: 0s; }
  .flow-arrow-2 { animation-delay: 0.4s; }
  .flow-arrow-3 { animation-delay: 0.8s; }

  @keyframes flow-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
  }

  /* Gradient glow pulse on hero */
  .hero__glow-1 {
    animation: glow-drift-1 8s ease-in-out infinite alternate;
  }
  .hero__glow-2 {
    animation: glow-drift-2 10s ease-in-out infinite alternate;
  }

  @keyframes glow-drift-1 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-40px, 30px) scale(1.1); }
  }
  @keyframes glow-drift-2 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(30px, -20px) scale(1.08); }
  }
}

/* Always-on: nav scroll transition (not motion-sensitive) */
.nav {
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}