/* ============================================================
   Phantom Lab — MOTION
   Reveal states, keyframes, reduced-motion overrides.
   Loaded last so its reduced-motion block wins.
   ============================================================ */

/* ============ Keyframes ============ */
@keyframes wheel {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

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

/* ============ Reveal / draw states ============ */
.success-circle { stroke-dasharray: 176; stroke-dashoffset: 176; }
.success-tick { stroke-dasharray: 40; stroke-dashoffset: 40; }
.form-success.is-shown .success-circle { animation: draw 0.8s ease forwards; }
.form-success.is-shown .success-tick { animation: draw 0.5s ease 0.6s forwards; }

/* ============ Reduced motion ============
   Everything must land in its finished state: timeline drawn,
   all nodes lit, no pins, no ambient animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }

  .scroll-hint,
  .cursor-dot,
  .cursor-ring,
  .tg-typing { display: none; }

  /* decorative parallax layer is static (JS also skips it) */
  .bg-grid, .bg-blob { transform: none !important; }

  /* demo flow: finished state (no scale pop on the current step) */
  .flow-node { opacity: 1; }
  .flow-node.is-current { transform: none; }
  .flow-line { stroke-dashoffset: 0; }

  /* timeline: fully drawn, every node active */
  .tl-progress { transform: scaleY(1) !important; }
  .tl-node {
    color: #fff;
    border-color: transparent;
    background: var(--grad);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14);
  }
  .tl-node::before { opacity: 1; }
  .tl-card { border-color: rgba(124, 58, 237, 0.4); }

  /* nothing may stay hidden waiting for a scroll trigger */
  .reveal, .tl-item, .bento-card, .why-item { opacity: 1 !important; }
}