/* MediaFoundry-flavoured motion layer for the Claude Design export.
   Kept in a global stylesheet so the support.js React runtime can re-render
   the page (language toggle) without wiping these rules. */

/* Page-load fade, like the theme's loadingAnimation */
@keyframes emino-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: emino-page-in 0.6s cubic-bezier(.25,.46,.45,.94) both; }

/* Scroll-reveal states. JS adds .fx-reveal to candidates (hidden, shifted),
   then .fx-in when they enter the viewport — mirrors AOS fade-up with the
   theme's ease-out-quad curve. --fx-delay staggers items in the same batch. */
.fx-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 0.7s cubic-bezier(.25,.46,.45,.94),
    transform 0.7s cubic-bezier(.25,.46,.45,.94);
  transition-delay: var(--fx-delay, 0s);
  will-change: opacity, transform;
}
.fx-reveal.fx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Card-image hover zoom (theme's portfolio card behaviour).
   JS tags images inside links with .fx-zoom; parent link gets .fx-zoom-box. */
.fx-zoom-box { overflow: hidden; display: block; }
.fx-zoom {
  transition: transform 0.6s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
a:hover > .fx-zoom,
a:hover .fx-zoom { transform: scale(1.045); }

/* Parallax images get a slight overscale so the drift never exposes edges
   (same in-place trick jarallax uses). JS drives --fx-para. */
.fx-para {
  transform: translate3d(0, var(--fx-para, 0px), 0) scale(1.08);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .fx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx-zoom, .fx-para { transition: none !important; transform: none !important; }
}