:root {
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */

  --dur-quick: 160ms; /* @kind other */    /* state change: hover, press */
  --dur-calm: 320ms; /* @kind other */     /* reveal, fade */
  --dur-slow: 720ms; /* @kind other */     /* section entrance */
  --dur-pulse: 3200ms; /* @kind other */   /* signal travelling a network line */

  --reveal-shift: 8px;   /* the only translate the system uses */
}

@keyframes r8-signal-travel {
  0% { offset-distance: 0%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes r8-signal-dash {
  to { stroke-dashoffset: -1000; }
}

@keyframes r8-reveal {
  from { opacity: 0; transform: translateY(var(--reveal-shift)); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}