/* KH Design System · Motion tokens + keyframes (KH Design Language §5)
 * Minimal and purposeful. Hover lift, a slow status pulse, optional one-time data draw.
 * Everything respects prefers-reduced-motion: reduce.
 */
:root {
  --motion-hover: 150ms;           /* @kind other */
  --ease: cubic-bezier(.2, .6, .2, 1); /* @kind other */
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --pulse-duration: 2.4s;          /* @kind other */
  --draw-duration: 1.4s;           /* @kind other */
}

/* Slow opacity pulse for live status dots */
@keyframes kh-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* One-time draw-in for data lines */
@keyframes kh-draw {
  from { stroke-dashoffset: var(--draw-length, 1000); }
  to   { stroke-dashoffset: 0; }
}

.kh-pulse {
  animation: kh-pulse var(--pulse-duration) ease-in-out infinite;
}

/* Slow gradient drift for the dynamic banner */
@keyframes kh-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.kh-drift {
  background-size: 220% 220%;
  animation: kh-drift 16s ease-in-out infinite;
}

/* Gentle float for banner orbs / accents */
@keyframes kh-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0, -16px); }
}
.kh-float {
  animation: kh-float 9s ease-in-out infinite;
}

/* No parallax, no scroll-jacking, no looping ambient animation on content. */
@media (prefers-reduced-motion: reduce) {
  .kh-pulse { animation: none; }
  .kh-draw  { animation: none; stroke-dashoffset: 0; }
  .kh-drift { animation: none; }
  .kh-float { animation: none; }
  .kh-lift:hover { transform: none; }
}