/* ============================================================
   motion.css — Reveal animations and motion system
   ============================================================ */

/* ----------------------------------------------------------
   Base reveal state
   ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transition:
    opacity 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    clip-path 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.reveal--up    { transform: translateY(24px); }
.reveal--left  { transform: translateX(-24px); }
.reveal--scale { transform: scale(0.96); }
.reveal--clip  { clip-path: inset(0 100% 0 0); opacity: 1; }

/* In-view state — JS adds this class */
.reveal.in-view {
  opacity: 1;
  transform: none;
}

.reveal--clip.in-view {
  clip-path: inset(0 0% 0 0);
}

/* ----------------------------------------------------------
   Stagger — JS sets --stagger-delay on each child
   ---------------------------------------------------------- */
.stagger > * {
  transition-delay: var(--stagger-delay, 0ms);
}

/* ----------------------------------------------------------
   Reduced motion overrides
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--up,
  .reveal--left,
  .reveal--scale,
  .reveal--clip {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition-duration: 0ms;
  }

  .data-line::after {
    animation: none;
  }

  .status-dot {
    animation: none;
  }

  @keyframes data-line-sweep {
    0%, 100% { left: 0; }
  }

  @keyframes status-pulse {
    0%, 100% { opacity: 1; }
  }
}