/* ==========================================================================
   MOTION.CSS — SHARED 5-TIER MOTION SYSTEM
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* Hide only when JS is active */
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: 
      opacity 450ms cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }

  html.js [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Bug 3 Fix: Unified transition stack for cards (hover + theme) */
  .content-card,
  .hero-swap-card,
  .blog-card {
    transition: 
      transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
      border-color 200ms ease,
      box-shadow 200ms ease,
      background-color 200ms ease,
      color 200ms ease;
  }

  /* Arrow nudges */
  .card-explore-btn-filled:hover .explore-arrow,
  .blog-read-link:hover svg,
  .blog-all-btn:hover svg,
  .audit-policy-btn:hover .audit-btn-arrow,
  .footer-submit-btn:hover .footer-btn-arrow {
    transform: translateX(3px) !important;
    transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Orbit category tab text panel crossfade */
  .orbit-text-crossfade {
    transition: opacity 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .orbit-text-crossfade.is-fading {
    opacity: 0;
  }

  /* Safe theme transitions (Cards excluded so transform isn't clobbered) */
  body,
  .navbar,
  .faq-item {
    transition: 
      background-color 200ms ease,
      border-color 200ms ease,
      color 200ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}