/* =========================================================================
   motion.css — micro-motion layer for case (work detail) pages.
   ONE signature: content blocks slide up + fade in with a lively overshoot
   as they enter view; interactive text/links respond one-directionally on
   hover. Nothing here changes layout (opacity / transform only) and every
   effect is disabled under prefers-reduced-motion.
   Paired with js/motion.js.
   ========================================================================= */

:root {
  --m-out:       cubic-bezier(.22, .61, .36, 1);  /* smooth settle (utility) */
  --m-overshoot: cubic-bezier(.30, 1.90, .40, 1); /* pronounced back-out bounce */
}

/* ---- Signature reveal: slide-up + fade-up, overshoot settle ------------- */
/* Applied by motion.js to every [data-reveal] block. Blocks reveal as whole
   units (a grid, a video pair, a text block all arrive together). */
.m-rise {
  opacity: 0;
  transform: translateY(52px);
  transition: opacity .5s var(--m-out),
              transform .9s var(--m-overshoot);
  will-change: opacity, transform;
}
.m-rise.is-in {
  opacity: 1;
  transform: none;
}

/* On-load (above-the-fold) reveal: fade only — no slide. During load the main
   thread is busy (main.js + video decode), which makes a transform overshoot
   stutter on mobile. It's a keyframe ANIMATION, not a transition, on purpose:
   an animation always plays from its 0% frame the moment it's applied, so it
   can't be skipped by paint coalescing while the thread is blocked (a CSS
   transition can — that's why the mobile hero fade was being dropped).
   motion.js applies this to the initial on-screen pieces; scroll-triggered
   content keeps the slide+overshoot. */
@keyframes m-fade-in { from { opacity: 0; } to { opacity: 1; } }
.m-fade-in {
  animation: m-fade-in 1.15s var(--m-out) both;
  will-change: opacity;
}

/* ---- Hover: one-directional, with overshoot ---------------------------- */

/* Next-case link: arrow springs forward on enter, eases back on leave. */
.case-next__link .m2link__arrow {
  transition: transform .4s var(--m-overshoot);
}
@media (hover: hover) and (min-width: 993px) {
  .case-next__link:hover .m2link__arrow { transform: translateX(16px); }
}

/* Footer nav + back-to-top: underline sweeps in from the left. */
@media (hover: hover) {
  .m2footer-navbar__link,
  .js-to-top { position: relative; }
  .m2footer-navbar__link::after,
  .js-to-top::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s var(--m-overshoot);
  }
  .m2footer-navbar__link:hover::after,
  .js-to-top:hover::after { transform: scaleX(1); }
}

/* ---- Reduced motion: everything visible and still ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .m-rise,
  .m-fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .case-next__link:hover .m2link__arrow { transform: none !important; }
  .m2footer-navbar__link::after,
  .js-to-top::after { display: none; }
}