/* 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. Final polish 2026-10-01.
 *
 * RULES THIS FILE OBEYS:
 *  - Animates transform, scale and 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 — or under
 *    prefers-reduced-motion, where motion.js never adds .mo-js — the site renders fully visible and static.
 *  - Never touches the nav row (see nav-layout-rules) or payment-brand buttons.
 *  - Curves and durations come from tokens.css (--ease-*, --dur-*).
 */

/* ── Press feedback: buttons compress under the pointer. The individual `scale` property composes with the button
      skin's own transform (glass-buttons.css), so nothing has to win with !important. ─────────────────────────── */
.mo-js :is(a.cta, button.cta, .hcta, .glass-btn, .plan-btn, .btn-primary, .btn.primary, .post-cta-btn, .blog-cta-btn,
  .spot-cta, .plugin-cta, .btn-full, .sc-send, .bt-opt, .topic-pill, .cat-chip, .sc-btn, .card-buy-btn, .gnav-cta):active {
  scale: .97;
  transition: scale var(--dur-1) var(--ease-out);
}

/* ── Reveal: one opacity-only fade, once (motion.js removes both classes when it ends) ─────────────────────────── */
.mo-js .mo-reveal:not(.mo-in) { opacity: 0; }
.mo-js .mo-reveal.mo-in { animation: mo-in var(--dur-4) var(--ease-out) var(--mo-d, 0ms) backwards; }
@keyframes mo-in { from { opacity: 0; } }

/* ── Thumbnails fade in over their plate once the image has loaded (motion.js adds .is-in; 2 s fallback) ───────── */
.mo-js :is(.card-thumb, .mcard-thumb, .mcard, .related-card) img:not(.is-in) { opacity: 0; }
.mo-js :is(.card-thumb, .mcard-thumb, .mcard, .related-card) img.is-in { transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }

/* ── Reduced motion: identical end states, no movement ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mo-reveal { opacity: 1 !important; animation: none !important; }
  :is(.card-thumb, .mcard-thumb, .mcard, .related-card) img { opacity: 1 !important; }
}