/*
 * Unified FORGE entrance motion.
 * Runtime attributes are added on the frontend only so editor previews remain static.
 */
:root {
  --forge-motion-duration: 840ms;
  --forge-motion-distance: 24px;
  --forge-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.forge-motion-enabled [data-forge-motion] {
  opacity: 0;
  transform: translate3d(0, var(--forge-motion-distance), 0);
  transition:
    opacity var(--forge-motion-duration) var(--forge-motion-ease),
    transform var(--forge-motion-duration) var(--forge-motion-ease),
    clip-path 920ms var(--forge-motion-ease);
  transition-delay: var(--forge-motion-delay, 0ms);
  will-change: opacity, transform;
}

html.forge-motion-enabled [data-forge-motion="heading"] {
  --forge-motion-distance: 20px;
  --forge-motion-duration: 900ms;
}

html.forge-motion-enabled [data-forge-motion="image"] {
  --forge-motion-distance: 28px;
  --forge-motion-duration: 920ms;
  clip-path: inset(0 0 12% 0);
  transform: translate3d(0, var(--forge-motion-distance), 0) scale(0.985);
}

html.forge-motion-enabled [data-forge-motion="group"] {
  --forge-motion-distance: 26px;
  --forge-motion-duration: 880ms;
}

html.forge-motion-enabled [data-forge-motion="cta"] {
  --forge-motion-distance: 18px;
  --forge-motion-duration: 780ms;
}

html.forge-motion-enabled [data-forge-motion].is-forge-motion-visible {
  opacity: 1;
  transform: translate3d(0, var(--forge-motion-drift, 0px), 0);
  clip-path: inset(0);
  will-change: auto;
}

html.forge-motion-enabled [data-forge-motion="image"].is-forge-motion-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

html.forge-motion-enabled [data-forge-motion][data-forge-motion-drift] {
  will-change: opacity, transform;
}

.editor-styles-wrapper [data-forge-motion],
.editor-styles-wrapper [data-forge-motion].is-forge-motion-visible {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
  will-change: auto !important;
}

@media (max-width: 1024px) {
  :root {
    --forge-motion-duration: 780ms;
    --forge-motion-distance: 20px;
  }

  html.forge-motion-enabled [data-forge-motion="heading"] {
    --forge-motion-distance: 18px;
    --forge-motion-duration: 820ms;
  }

  html.forge-motion-enabled [data-forge-motion="image"],
  html.forge-motion-enabled [data-forge-motion="group"] {
    --forge-motion-distance: 22px;
    --forge-motion-duration: 840ms;
  }
}

@media (max-width: 767px) {
  :root {
    --forge-motion-duration: 680ms;
    --forge-motion-distance: 16px;
  }

  html.forge-motion-enabled [data-forge-motion="heading"],
  html.forge-motion-enabled [data-forge-motion="image"],
  html.forge-motion-enabled [data-forge-motion="group"],
  html.forge-motion-enabled [data-forge-motion="cta"] {
    --forge-motion-distance: 16px;
    --forge-motion-duration: 720ms;
  }

  html.forge-motion-enabled [data-forge-motion="image"] {
    clip-path: inset(0 0 8% 0);
  }

  html.forge-motion-enabled [data-forge-motion][data-forge-motion-drift].is-forge-motion-visible {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.forge-motion-enabled [data-forge-motion],
  html.forge-motion-enabled [data-forge-motion].is-forge-motion-visible,
  html.forge-motion-enabled [data-forge-motion][data-forge-motion-drift].is-forge-motion-visible {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
    will-change: auto;
  }
}