/* BitSoul3D motion layer — premium micro-interactions, one file (like
 * glass-buttons.css). Loaded sitewide via FAVICON_TAGS + manual tags in
 * index/account/gallery.html. Paired with js/motion.js.
 *
 * RULES THIS FILE OBEYS:
 *  - Animates transform + opacity ONLY. Nothing layout-triggering. Zero CLS.
 *  - Every "hidden" initial state is gated behind .mo-js (set by motion.js),
 *    so with JS off/failed the site renders exactly as before.
 *  - prefers-reduced-motion: everything snaps to end state instantly.
 *  - Never touches the nav row (see nav-layout-rules) or payment-brand buttons.
 *  - will-change only while .mo-mag is applied (during magnetic engagement).
 *
 * Feel target: snappy + physical (Linear/Vercel), not floaty.
 * Shared easing: cubic-bezier(0.32, 0.72, 0, 1).
 */

/* ── Press feedback: buttons compress under the cursor ─────────────────── */
.mo-js a.cta:active, .mo-js button.cta:active, .mo-js .hcta:active,
.mo-js .glass-btn:active, .mo-js .plan-btn:active, .mo-js .btn-primary:active,
.mo-js .btn.primary:active, .mo-js .post-cta-btn:active,
.mo-js .blog-cta-btn:active, .mo-js .spot-cta:active, .mo-js .plugin-cta:active,
.mo-js .btn-full:active, .mo-js .sc-send:active, .mo-js .bt-opt:active,
.mo-js .topic-pill:active, .mo-js .cat-chip:active {
  transform: scale(0.97) !important;
  transition: transform 90ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* ── Magnetic hover: element leans toward the cursor (JS sets transform) ── */
.mo-mag {
  transition: transform 140ms cubic-bezier(0.32, 0.72, 0, 1) !important;
  will-change: transform;
}

/* ── Staggered card reveal (JS assigns .mo-reveal + --mo-d, IO adds .mo-in) */
.mo-js .mo-reveal {
  opacity: 0;
  transform: translateY(12px);
}
.mo-js .mo-reveal.mo-in {
  opacity: 1;
  transform: none;
  transition: opacity 240ms cubic-bezier(0.32, 0.72, 0, 1),
              transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
  transition-delay: var(--mo-d, 0ms);
}

/* ── Reduced motion: identical end states, no movement ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mo-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mo-mag { transition: none !important; }
  .mo-js a.cta:active, .mo-js button.cta:active, .mo-js .hcta:active,
  .mo-js .glass-btn:active, .mo-js .plan-btn:active, .mo-js .btn-primary:active,
  .mo-js .btn.primary:active, .mo-js .post-cta-btn:active,
  .mo-js .blog-cta-btn:active, .mo-js .spot-cta:active, .mo-js .plugin-cta:active,
  .mo-js .btn-full:active, .mo-js .sc-send:active, .mo-js .bt-opt:active,
  .mo-js .topic-pill:active, .mo-js .cat-chip:active { transform: none !important; transition: none !important; }
}