/* ============================================================
   NEXO PRINT — Motion polish (subtle · performant · RTL-safe)
   ------------------------------------------------------------
   Loaded site-wide AFTER tokens.css. Works together with:
     • MotionEngine.tsx  → scroll-reveal + image fade-in (adds classes)
     • template.tsx      → Framer-Motion page-to-page fade
   Every duration/ease comes from tokens.css design tokens.
   All motion-adding rules sit inside a single
   `prefers-reduced-motion: no-preference` block, so turning the
   OS "reduce motion" setting on disables everything at once.
   No layout/colour is changed — only opacity, transform & shadow.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ── 1. Scroll reveal ──────────────────────────────────────
     MotionEngine adds .m-reveal (hidden) then .is-in (shown).
     --m-delay carries the per-item stagger. ───────────────── */
  .m-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity   var(--duration-slow) var(--ease-out),
      transform var(--duration-slow) var(--ease-out);
    transition-delay: var(--m-delay, 0ms);
  }
  .m-reveal.is-in { opacity: 1; transform: none; }

  /* ── 2. Image fade-in on load ──────────────────────────────
     MotionEngine adds .m-img (hidden) then .is-loaded. ─────── */
  .m-img { opacity: 0; transition: opacity var(--duration-normal) var(--ease-out); }
  .m-img.is-loaded { opacity: 1; }

  /* ── 3. Card hover lift ────────────────────────────────────
     :where() keeps specificity at 0 so any page that already
     defines its own :hover wins — these only fill the gaps. ── */
  @media (hover: hover) and (pointer: fine) {
    :where(
      .config-card, .opt-card, .pay-card, .guide-card, .related-card,
      .review-card, .trust-card, .cat-tile, .assurance-item,
      .how-step, .summary-card, .cs-card, .feat-card, .qadd-media
    ) {
      transition:
        transform    var(--duration-normal) var(--ease-out),
        box-shadow   var(--duration-normal) var(--ease-out),
        border-color var(--duration-normal) var(--ease-out);
    }
    :where(
      .config-card, .opt-card, .pay-card, .guide-card, .related-card,
      .review-card, .trust-card, .cat-tile, .assurance-item,
      .summary-card, .cs-card, .feat-card
    ):hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }
  }

  /* ── 4. Buttons: smooth state changes + tactile press ──────
     .btn already has a transition; this only covers the rest. */
  @media (hover: hover) and (pointer: fine) {
    :where(.btn, .btn-mini, .btn-sec, .action-btn, .sort-btn):not(:disabled) {
      transition:
        transform    var(--duration-fast) var(--ease-out),
        background   var(--duration-fast) var(--ease-out),
        box-shadow   var(--duration-fast) var(--ease-out),
        color        var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
    }
  }
  :where(.btn, .btn-mini, .btn-sec, .pcard-add):not(:disabled):active {
    transform: translateY(1px) scale(0.985);
  }

  /* ── 5. Micro-interactions: icons & links ──────────────────
     Vertical/scale only — never horizontal, so RTL stays correct. */
  @media (hover: hover) and (pointer: fine) {
    :where(.action-ico) svg { transition: transform var(--duration-fast) var(--ease-out); }
    :where(.action-btn):hover .action-ico svg { transform: translateY(-2px); }

    :where(.qa-ico, .feat-card__ico, .stat-card__ico, .empty-state__ico) {
      transition: transform var(--duration-normal) var(--ease-spring);
    }
    :where(.qa-card):hover .qa-ico,
    :where(.feat-card):hover .feat-card__ico { transform: scale(1.08); }
  }
}

/* ── Reduced-motion safety net ───────────────────────────────
   If the engine ever tagged elements before the OS preference
   was read, force them visible and kill transitions. ───────── */
@media (prefers-reduced-motion: reduce) {
  .m-reveal, .m-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .m-img, .m-img.is-loaded   { opacity: 1 !important; transition: none !important; }
}