/* ========================================
   substans.ai — Animations
   ======================================== */

/* --- Hero stem draw animation --- */
.hero-stem {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawStem 1.2s ease-in-out forwards;
}

.hero-stem:nth-of-type(1) { animation-delay: 0s; }
.hero-stem:nth-of-type(2) { animation-delay: 0.4s; }
.hero-stem:nth-of-type(3) { animation-delay: 0.8s; }

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

/* --- Orbiting arcs --- */
.orbit-arc {
  animation: orbitSpin 8s linear infinite;
  transform-origin: center;
}

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

/* --- Hero network SVG animation --- */
.network-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLine 3s ease-in-out infinite;
}

.network-line:nth-child(1) { animation-delay: 0s; }
.network-line:nth-child(2) { animation-delay: 0.3s; }
.network-line:nth-child(3) { animation-delay: 0.6s; }
.network-line:nth-child(4) { animation-delay: 0.9s; }
.network-line:nth-child(5) { animation-delay: 1.2s; }
.network-line:nth-child(6) { animation-delay: 1.5s; }
.network-line:nth-child(7) { animation-delay: 1.8s; }

@keyframes drawLine {
  0% { stroke-dashoffset: 200; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -200; }
}

.network-node {
  opacity: 0;
  animation: fadeNode 3s ease-in-out infinite;
}

.network-node:nth-child(8)  { animation-delay: 0.2s; }
.network-node:nth-child(9)  { animation-delay: 0.5s; }
.network-node:nth-child(10) { animation-delay: 0.8s; }
.network-node:nth-child(11) { animation-delay: 1.1s; }
.network-node:nth-child(12) { animation-delay: 1.4s; }
.network-node:nth-child(13) { animation-delay: 1.7s; }
.network-node:nth-child(14) { animation-delay: 2.0s; }

@keyframes fadeNode {
  0% { opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Logo icon animation --- */
.logo-line {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: drawLogoLine 1s ease-in-out forwards;
}

.logo-line:nth-child(1) { animation-delay: 0s; }
.logo-line:nth-child(2) { animation-delay: 0.15s; }
.logo-line:nth-child(3) { animation-delay: 0.3s; }

.logo-dot {
  opacity: 0;
  animation: fadeLogoDot 0.4s ease forwards;
}

.logo-dot:nth-child(4) { animation-delay: 0.3s; }
.logo-dot:nth-child(5) { animation-delay: 0.45s; }
.logo-dot:nth-child(6) { animation-delay: 0.6s; }

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

@keyframes fadeLogoDot {
  to { opacity: 1; }
}

/* --- Staggered fade-in for grid children --- */
.fade-in-group > *:nth-child(1) { transition-delay: 0s; }
.fade-in-group > *:nth-child(2) { transition-delay: 0.1s; }
.fade-in-group > *:nth-child(3) { transition-delay: 0.2s; }
.fade-in-group > *:nth-child(4) { transition-delay: 0.3s; }
.fade-in-group > *:nth-child(5) { transition-delay: 0.4s; }
.fade-in-group > *:nth-child(6) { transition-delay: 0.5s; }

/* --- PRISM flow animation --- */
.prism-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawPrism 2.5s ease-in-out forwards;
}

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