/*
 * Shared scroll motion.
 * Effects only activate when the local motion script is available.
 */
.motion-progress {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, #d84235, #ffbaa6);
  box-shadow: 0 0 18px rgba(216, 66, 53, 0.38);
  transform: scaleX(var(--motion-progress, 0));
  transform-origin: 0 50%;
  will-change: transform;
}

html.motion-ready [data-motion] {
  opacity: 0;
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

html.motion-ready [data-motion="fade-up"] {
  transform: translate3d(0, 2rem, 0);
}

html.motion-ready [data-motion="fade-left"] {
  transform: translate3d(-2rem, 0, 0);
}

html.motion-ready [data-motion="fade-right"] {
  transform: translate3d(2rem, 0, 0);
}

html.motion-ready [data-motion="zoom-in"] {
  transform: scale(0.965);
}

html.motion-ready [data-motion="hero-intro"] {
  transform: translate3d(0, 1.5rem, 0);
  transition-duration: 900ms;
}

html.motion-ready [data-motion].is-inview {
  opacity: 1;
  transform: none;
  will-change: auto;
}

[data-motion-parallax] {
  transform: translate3d(0, var(--motion-parallax-y, 0), 0) scale(1.045);
  transform-origin: 50% 50%;
  will-change: transform;
}

@media (max-width: 720px) {
  html.motion-ready [data-motion="fade-up"],
  html.motion-ready [data-motion="hero-intro"] {
    transform: translate3d(0, 1.15rem, 0);
  }

  html.motion-ready [data-motion="fade-left"] {
    transform: translate3d(-1.15rem, 0, 0);
  }

  html.motion-ready [data-motion="fade-right"] {
    transform: translate3d(1.15rem, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-progress {
    display: none;
  }

  html.motion-ready [data-motion] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-motion-parallax] {
    transform: none;
  }
}