/*
 * Studio motion: subtle, GPU-friendly animations for prototypes and full pages (same file in both).
 * Only opacity / transform / a small blur animate (no layout properties), so it stays smooth on phones.
 * Content is visible without JS: hiding starts only once motion.js adds .m-ready to <html>.
 * Everything is off with prefers-reduced-motion.
 *
 *   data-reveal[="up|fade|left|right|scale|blur"]  enter when scrolled into view (default "up")
 *   data-reveal-delay="120"                         extra delay in ms
 *   data-stagger[="80"]                             on a parent: its [data-reveal] children enter one after another
 *   data-parallax="0.12"                            image/decoration drifts slightly on scroll (keep 0.05–0.2)
 *   data-count="483" [data-count-decimals="1"]      number counts up when visible (write the final value as text)
 *   data-header                                     gets [data-scrolled] after 24px of scroll (style it in the page)
 *   .m-lift (cards/buttons: lift on hover) · .m-zoom (wrapper: its img zooms slowly on hover)
 */
:root {
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --m-dur: 800ms;
  --m-dist: 28px;
}
.m-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--m-dist), 0);
  transition:
    opacity var(--m-dur) var(--m-ease),
    transform var(--m-dur) var(--m-ease),
    filter var(--m-dur) var(--m-ease);
  transition-delay: var(--m-delay, 0ms);
}
.m-ready [data-reveal="fade"] { transform: none; }
.m-ready [data-reveal="left"] { transform: translate3d(calc(var(--m-dist) * -1), 0, 0); }
.m-ready [data-reveal="right"] { transform: translate3d(var(--m-dist), 0, 0); }
.m-ready [data-reveal="scale"] { transform: scale(0.96); }
.m-ready [data-reveal="blur"] { transform: translate3d(0, calc(var(--m-dist) / 2), 0); filter: blur(10px); }
.m-ready [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

[data-parallax] { will-change: transform; }

.m-lift { transition: transform 0.35s var(--m-ease), box-shadow 0.35s var(--m-ease); }
.m-lift:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.35); }
.m-zoom { overflow: hidden; }
.m-zoom img { transition: transform 1.4s var(--m-ease); }
.m-zoom:hover img { transform: scale(1.045); }

@media (prefers-reduced-motion: reduce) {
  .m-ready [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  [data-parallax] { transform: none !important; will-change: auto; }
  .m-lift, .m-lift:hover, .m-zoom img, .m-zoom:hover img { transition: none; transform: none; }
}