/**
 * WebDNA Motion — scroll reveals + soft parallax
 * Enable with data-wm attributes (see sites/_shared/motion/MOTION.md)
 */
:root {
  --wm-duration: 0.65s;
  --wm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wm-distance: 1.5rem;
  --wm-stagger-step: 80ms;
}

@media (prefers-reduced-motion: reduce) {
  .wm-init [data-wm],
  [data-wm].wm-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-wm-parallax] {
    transform: none !important;
  }
}

[data-wm] {
  transition:
    opacity var(--wm-duration, 0.65s) var(--wm-ease),
    transform var(--wm-duration, 0.65s) var(--wm-ease);
  will-change: opacity, transform;
}

.wm-init [data-wm]:not(.wm-visible) {
  opacity: 0;
}

.wm-init [data-wm="fade-up"]:not(.wm-visible) {
  transform: translate3d(0, var(--wm-distance), 0);
}

.wm-init [data-wm="fade-down"]:not(.wm-visible) {
  transform: translate3d(0, calc(var(--wm-distance) * -1), 0);
}

.wm-init [data-wm="fade-left"]:not(.wm-visible) {
  transform: translate3d(var(--wm-distance), 0, 0);
}

.wm-init [data-wm="fade-right"]:not(.wm-visible) {
  transform: translate3d(calc(var(--wm-distance) * -1), 0, 0);
}

.wm-init [data-wm="zoom-in"]:not(.wm-visible) {
  transform: scale(0.94);
}

.wm-init [data-wm="zoom-out"]:not(.wm-visible) {
  transform: scale(1.06);
}

[data-wm].wm-visible {
  opacity: 1;
  transform: none;
}

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