/* ================================
   Motion & Animation System
   ================================
   Timing variables defined in tokens.css
   ================================ */

/* ================================
   Section Reveal Animation
   ================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--motion-medium) var(--ease-standard),
    transform var(--motion-medium) var(--ease-standard);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================
   SVG System Visualization
   ================================ */

.system-svg circle {
  fill: rgba(255, 255, 255, 0.85);
  transform-box: fill-box;
  transform-origin: center;
}

/* Primary node: subtle breathing */
.node-primary {
  animation: core-pulse 5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes core-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* Primary connection line: slow pulse */
.line-primary {
  animation: line-pulse 5.5s ease-in-out infinite;
}

@keyframes line-pulse {
  0%,
  100% {
    opacity: 0.2;
    filter: none;
  }
  50% {
    opacity: 0.75;
    filter: drop-shadow(0 0 6px rgba(120, 180, 255, 0.35));
  }
}

/* Base system lines */
.system-svg line {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

/* Secondary node reactions */
.node-secondary {
  animation: secondary-react 10s ease-in-out infinite;
  animation-delay: 1.2s;
  opacity: 0.45;
}

@keyframes secondary-react {
  0%, 100% {
    transform: scale(1);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

/* Secondary nodes group drift */
.secondary-nodes {
  animation: tertiary-drift 18s ease-in-out infinite;
  transform-origin: center;
}

@keyframes tertiary-drift {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(2px, -1px);
  }
  50% {
    transform: translate(0, 2px);
  }
  75% {
    transform: translate(-2px, 1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* Staggered secondary nodes */
.secondary-nodes .node-secondary:nth-child(1) {
  animation-delay: 1.2s;
}

.secondary-nodes .node-secondary:nth-child(2) {
  animation-delay: 1.5s;
}

.secondary-nodes .node-secondary:nth-child(3) {
  animation-delay: 1.8s;
}

/* Secondary line drift */
.line-secondary {
  opacity: 0.18;
  animation: line-drift 9s ease-in-out infinite;
}

@keyframes line-drift {
  0%, 100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.28;
  }
}

/* Staggered line delays */
.line-secondary:nth-of-type(1) {
  animation-delay: 1.5s;
}

.line-secondary:nth-of-type(2) {
  animation-delay: 3.2s;
}

.line-secondary:nth-of-type(3) {
  animation-delay: 4.8s;
}

/* ================================
   Accessibility
   ================================ */

@media (prefers-reduced-motion: reduce) {
  .node-primary,
  .line-primary,
  .node-secondary,
  .secondary-nodes,
  .line-secondary {
    animation: none !important;
  }

  .reveal {
    transition: none !important;
  }
}