/* Do by Businlog: site-wide micro-interactions (I5). Pairs with motion.js. Light theme only.

   Hooks (all optional, all safe without JS):
     [data-reveal]                 fades + rises into view once. Variants: data-reveal="fade|scale|left|right"
     data-reveal-delay="120"       extra delay in ms (siblings revealed together are staggered automatically)
     [data-count]                  number counts up from 0 when it scrolls into view (text is the final value)
     [data-tilt]                   gentle 3D tilt + soft light following a fine pointer (product frames)
     .btn-primary.btn-lg           magnetic: drifts a few px towards the pointer
     [data-progress]               reading-progress bar at the top of the window for that element
   Header elevation on scroll is already done by site.js (.site-head.scrolled, styled in chrome.css).

   Rule: content is visible by default. The hidden-before-reveal state only exists once motion.js has added
   html.motion-ready, which it never does under prefers-reduced-motion. Individual transform properties
   (translate / scale) are used for reveals so they never fight the `transform` used by hover effects. */

[data-count] { font-variant-numeric: tabular-nums; }
.mo-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* ---------- scroll reveal ---------- */
  .motion-ready [data-reveal]:not(.is-in) { opacity: 0; translate: 0 22px; }
  .motion-ready [data-reveal="fade"]:not(.is-in) { translate: none; }
  .motion-ready [data-reveal="scale"]:not(.is-in) { translate: 0 10px; scale: .97; }
  .motion-ready [data-reveal="left"]:not(.is-in) { translate: -28px 0; }
  .motion-ready [data-reveal="right"]:not(.is-in) { translate: 28px 0; }
  @media (max-width: 720px) { /* sideways starts could poke past a phone screen: rise instead */
    .motion-ready [data-reveal="left"]:not(.is-in), .motion-ready [data-reveal="right"]:not(.is-in) { translate: 0 22px; }
  }
  /* while it plays, the reveal owns the transition; .is-done hands it back to the element's own CSS */
  .motion-ready [data-reveal].is-in:not(.is-done) {
    transition: opacity .7s var(--ui-ease, cubic-bezier(.2, .7, .2, 1)), translate .8s var(--ui-ease, cubic-bezier(.2, .7, .2, 1)), scale .8s var(--ui-ease, cubic-bezier(.2, .7, .2, 1));
    transition-delay: var(--mo-delay, 0ms);
  }
  .motion-ready [data-reveal].is-instant { transition: none; }

  /* ---------- count-up: no width jump while the digits change ---------- */
  .motion-ready [data-count].is-counting { display: inline-block; text-align: inherit; }

  /* ---------- tilt ---------- */
  .motion-ready [data-tilt] {
    position: relative;
    transform: perspective(1400px) rotateX(var(--mo-rx, 0deg)) rotateY(var(--mo-ry, 0deg));
    transition: transform .6s var(--ui-ease, cubic-bezier(.2, .7, .2, 1));
  }
  .motion-ready [data-tilt].is-tilting { transition: transform .12s linear; will-change: transform; }
  .motion-ready [data-tilt]::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: var(--r-lg, 18px);
    background: radial-gradient(560px circle at var(--mo-gx, 50%) var(--mo-gy, 0%), rgba(255, 255, 255, .22), transparent 42%);
    opacity: 0; transition: opacity .4s ease;
  }
  .motion-ready [data-tilt].is-tilting::after { opacity: 1; }

  /* ---------- magnetic primary buttons ---------- */
  .motion-ready .btn-primary.btn-lg { translate: var(--mo-mx, 0px) var(--mo-my, 0px); transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, translate .35s var(--ui-ease, cubic-bezier(.2, .7, .2, 1)); }
  .motion-ready .btn-primary.btn-lg.is-magnet { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, translate .1s linear; }

  /* ---------- reading progress ---------- */
  .mo-progress { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
  .mo-progress span {
    display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--mo-p, 0));
    background: linear-gradient(90deg, #5b3df5, #ff4d8d 55%, #ffb020);
    border-radius: 0 3px 3px 0; box-shadow: 0 1px 6px rgba(255, 77, 141, .35);
  }
}

/* belt and braces: never leave anything hidden or tilted on paper; no bar if reduced motion is switched on */
@media (prefers-reduced-motion: reduce) { .mo-progress { display: none !important; } }
@media print {
  .motion-ready [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; }
  .motion-ready [data-tilt] { transform: none !important; }
  .motion-ready [data-tilt]::after, .mo-progress { display: none !important; }
}