/**
 * Canada Create lightweight motion system.
 * Only transform and opacity are animated to avoid layout and paint work.
 */

.cc-motion-page {
  --cc-motion-duration: 820ms;
  --cc-motion-distance: 34px;
  --cc-motion-ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .cc-motion-enabled .cc-motion.cc-motion-pending {
    opacity: 0;
    will-change: opacity, transform;
  }

  .cc-motion-enabled .cc-motion-up.cc-motion-pending {
    transform: translate3d(0, var(--cc-motion-distance), 0);
  }

  .cc-motion-enabled .cc-motion-left.cc-motion-pending {
    transform: translate3d(calc(var(--cc-motion-distance) * -1), 0, 0);
  }

  .cc-motion-enabled .cc-motion-right.cc-motion-pending {
    transform: translate3d(var(--cc-motion-distance), 0, 0);
  }

  .cc-motion-enabled .cc-motion-scale.cc-motion-pending {
    transform: translate3d(0, 22px, 0) scale(.94);
  }

  .cc-motion-enabled .cc-motion-fade.cc-motion-pending {
    transform: none;
  }

  .cc-motion-enabled .cc-motion.cc-motion-active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
      opacity calc(var(--cc-motion-duration) * .82) ease-out,
      transform var(--cc-motion-duration) var(--cc-motion-ease);
    transition-delay: var(--cc-motion-delay, 0ms);
  }

  .cc-motion-enabled .cc-section-title.cc-motion-pending::after {
    transform: scaleX(0);
    transform-origin: center;
  }

  .cc-motion-enabled .cc-section-title.cc-motion-active::after {
    transform: scaleX(1);
    transition: transform 620ms var(--cc-motion-ease);
    transition-delay: calc(var(--cc-motion-delay, 0ms) + 170ms);
  }

  .cc-motion-enabled .cc-count.cc-count-pending .elementor-heading-title,
  .cc-motion-enabled .cc-count.cc-count-pending .elementor-icon-box-title {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    will-change: opacity, transform;
  }

  .cc-motion-enabled .cc-count.cc-count-active .elementor-heading-title,
  .cc-motion-enabled .cc-count.cc-count-active .elementor-icon-box-title {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
      opacity 520ms ease-out,
      transform 680ms var(--cc-motion-ease);
  }

  .cc-motion-enabled .cc-chart-animate.cc-chart-pending .cc-chart-grid,
  .cc-motion-enabled .cc-chart-animate.cc-chart-pending .cc-chart-axis {
    opacity: .12;
  }

  .cc-motion-enabled .cc-chart-animate.cc-chart-active .cc-chart-grid,
  .cc-motion-enabled .cc-chart-animate.cc-chart-active .cc-chart-axis {
    opacity: 1;
    transition: opacity 680ms ease-out;
  }

  .cc-motion-enabled .cc-chart-animate .cc-chart-line {
    will-change: stroke-dashoffset;
  }

  .cc-motion-enabled .cc-chart-animate.cc-chart-active .cc-chart-line {
    transition: stroke-dashoffset 1250ms var(--cc-motion-ease) 120ms;
  }

  .cc-motion-enabled .cc-chart-animate.cc-chart-pending .cc-chart-area {
    opacity: 0;
    transform: scaleY(.06);
    transform-box: fill-box;
    transform-origin: center bottom;
  }

  .cc-motion-enabled .cc-chart-animate.cc-chart-active .cc-chart-area {
    opacity: 1;
    transform: scaleY(1);
    transition:
      opacity 780ms ease-out 180ms,
      transform 1080ms var(--cc-motion-ease) 180ms;
  }

  .cc-motion-enabled .cc-chart-animate.cc-chart-pending .cc-chart-point {
    opacity: 0;
    transform: scale(.1);
    transform-box: fill-box;
    transform-origin: center;
  }

  .cc-motion-enabled .cc-chart-animate.cc-chart-active .cc-chart-point {
    opacity: 1;
    transform: scale(1);
    transition:
      opacity 280ms ease-out 980ms,
      transform 520ms cubic-bezier(.2, 1.7, .4, 1) 980ms;
  }

  .cc-motion-enabled .cc-chart-animate.cc-chart-pending .cc-chart-bar {
    transform: scaleY(0);
    transform-box: fill-box;
    transform-origin: center bottom;
  }

  .cc-motion-enabled .cc-chart-animate.cc-chart-active .cc-chart-bar {
    transform: scaleY(1);
    transition: transform 850ms var(--cc-motion-ease);
    transition-delay: var(--cc-bar-delay, 0ms);
  }
}

/* The first section is intentionally excluded from all motion work. */
.cc-motion-enabled .cc-no-motion .cc-motion,
.cc-motion-enabled .cc-hero .cc-motion {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (max-width: 767px) {
  .cc-motion-page {
    --cc-motion-distance: 24px;
    --cc-motion-duration: 720ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-motion-page *,
  .cc-motion-page *::before,
  .cc-motion-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}