/**
 * Shared progressive-enhancement motion utilities.
 *
 * Elements remain visible until JavaScript explicitly marks them ready.
 */

.motion-reveal.is-motion-ready,
[data-motion="reveal"].is-motion-ready {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition:
    opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--motion-delay, 0ms);
}

.motion-from-bottom-left.is-motion-ready,
[data-motion-from="bottom-left"].is-motion-ready {
  transform: translate3d(-2rem, 1.75rem, 0);
}

.motion-from-bottom-right.is-motion-ready,
[data-motion-from="bottom-right"].is-motion-ready {
  transform: translate3d(2rem, 1.75rem, 0);
}

.motion-fade.is-motion-ready,
[data-motion-from="fade"].is-motion-ready {
  transform: none;
}

.motion-delay-1 {
  --motion-delay: 90ms;
}

.motion-delay-2 {
  --motion-delay: 180ms;
}

.motion-reveal.is-motion-ready.is-motion-visible,
[data-motion="reveal"].is-motion-ready.is-motion-visible {
  opacity: 1;
  transform: none;
}

.motion-image-unveil img {
  transition:
    clip-path 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--motion-delay, 0ms);
}

.motion-image-unveil.is-motion-ready img {
  clip-path: inset(0 0 9% 0);
  transform: scale(1.012);
}

.motion-image-unveil.is-motion-visible img {
  clip-path: inset(0);
  transform: none;
}

.motion-line::before,
[data-motion="line"]::before {
  transform-origin: left center;
  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--motion-delay, 0ms);
}

.motion-line.is-motion-ready::before,
[data-motion="line"].is-motion-ready::before {
  transform: scaleX(0);
}

.motion-line.is-motion-visible::before,
[data-motion="line"].is-motion-visible::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal.is-motion-ready,
  [data-motion="reveal"].is-motion-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .motion-image-unveil img,
  .motion-line::before,
  [data-motion="line"]::before {
    clip-path: none;
    transform: none;
    transition: none;
  }
}