/* ════════════════════════════════════════════════════════════════════════════
   MOTION — one shared vocabulary.
   Rules:
   · transform/opacity only, driven by motion tokens
   · content visible without JS (.js gates initial hidden state)
   · prefers-reduced-motion: reduce disables everything
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Scroll reveals (applied by app.js via GSAP/ScrollTrigger) ─────────────── */
.js .ao-reveal      { opacity: 0; transform: translateY(20px); will-change: opacity, transform; }
.js .ao-reveal-fade { opacity: 0; will-change: opacity; }

/* JS failed to run or GSAP missing — app.js also force-clears these */
@media (prefers-reduced-motion: reduce) {
  .js .ao-reveal,
  .js .ao-reveal-fade {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
}

/* ── Signature: count-up numerals ──────────────────────────────────────────
   Usage: <span class="ao-mono" data-count="98" data-decimals="0">98%</span>
   app.js animates the number on first reveal. No CSS state needed — the
   pre-JS text is the final value, so nothing is hidden without JS.        */

/* ── Micro-interaction primitives ──────────────────────────────────────────── */
.ao-hover-lift {
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.ao-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Arrow nudge on links/buttons: <span class="ao-arrow">→</span> */
.ao-arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-standard); }
a:hover .ao-arrow, button:hover .ao-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .ao-hover-lift, .ao-arrow { transition: none; }
  .ao-hover-lift:hover { transform: none; }
  a:hover .ao-arrow, button:hover .ao-arrow { transform: none; }
}