/* Shared motion states, workflow connectors and reduced-motion accessibility.
 * One definition per selector and condition. Edit the owning rule; do not append override blocks. */

.motion-ready [data-animate="fade-in"] {
  opacity: 0;
  transition-delay: var(--animate-delay, 0s);
  transition-duration: var(--ntc-motion-base);
  transition-property: opacity;
  transition-timing-function: var(--ntc-motion-ease);
  will-change: opacity;
}

.motion-ready [data-animate="fade-up"] {
  opacity: 0;
  transition-delay: var(--animate-delay, 0s);
  transition-duration: var(--ntc-motion-base);
  transition-property: opacity, transform;
  transition-timing-function: var(--ntc-motion-ease);
  will-change: opacity,transform;
  transform: translate3d(0,var(--ntc-motion-distance),0);
}

.motion-ready [data-animate="image"] {
  opacity: 0;
  transition-delay: var(--animate-delay, 0s);
  transition-property: opacity, transform;
  transition-timing-function: var(--ntc-motion-ease);
  will-change: opacity,transform;
  transition-duration: var(--ntc-motion-image);
  transform: translate3d(0, 8px, 0);
}

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

.page-home .home-story-media .story-image-main {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.page-home .home-story-media .story-image-secondary {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.page-home .home-story-media .story-image-label {
  opacity: 1;
  transform: translateY(0);
}

.motion-ready .page-home .home-story-media[data-animate="image"] .story-image-main {
  opacity: 0;
  transform: translate3d(12px, 0, 0);
}

.motion-ready .page-home .home-story-media[data-animate="image"] .story-image-secondary,
.motion-ready .page-home .home-story-media[data-animate="image"] .story-image-label {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

.motion-ready .page-home .home-story-media[data-animate="image"].is-animated .story-image-main,
.motion-ready .page-home .home-story-media[data-animate="image"].is-animated .story-image-secondary,
.motion-ready .page-home .home-story-media[data-animate="image"].is-animated .story-image-label {
  opacity: 1;
  transform: none;
}

.motion-ready [data-animate="stagger"]>[data-animate-item],
.motion-ready [data-animate="workflow"]>[data-animate-item],
.motion-ready [data-animate="timeline"]>[data-animate-item] {
  opacity: 0;
  transition: opacity var(--ntc-motion-base) var(--ntc-motion-ease),transform var(--ntc-motion-base) var(--ntc-motion-ease);
  transition-delay: calc(var(--animate-index, 0) * var(--ntc-motion-stagger));
  will-change: opacity,transform;
  transform: translate3d(0, var(--ntc-motion-distance), 0);
}

.motion-ready [data-animate="stagger"].is-animated>[data-animate-item],
.motion-ready [data-animate="workflow"].is-animated>[data-animate-item],
.motion-ready [data-animate="timeline"].is-animated>[data-animate-item] {
  opacity: 1;
  will-change: auto;
  transform: none;
}

[data-animate="image"] img {
  transition: transform .9s var(--ntc-motion-ease);
}

.motion-ready [data-animate="workflow"] .express-workflow-card:not(:last-child)::after,
.motion-ready [data-animate="workflow"] .warehouse-workflow-card:not(:last-child)::after {
  transition: transform .8s var(--ntc-motion-ease);
  transition-delay: calc(.25s + var(--animate-index, 0) * var(--ntc-motion-stagger));
  transform: scaleX(0);
}

.motion-ready [data-animate="workflow"] .express-workflow-card:not(:last-child)::before,
.motion-ready [data-animate="workflow"] .warehouse-workflow-card:not(:last-child)::before {
  opacity: 0;
  transition: opacity .4s;
  transition-delay: calc(.75s + var(--animate-index, 0) * var(--ntc-motion-stagger));
}

.motion-ready [data-animate="workflow"].is-animated .express-workflow-card:not(:last-child)::after,
.motion-ready [data-animate="workflow"].is-animated .warehouse-workflow-card:not(:last-child)::after {
  transform: scaleX(1);
}

.motion-ready [data-animate="workflow"].is-animated .express-workflow-card:not(:last-child)::before,
.motion-ready [data-animate="workflow"].is-animated .warehouse-workflow-card:not(:last-child)::before {
  opacity: 1;
}

.btn i[class*="arrow"],
a[class*="link"] i[class*="arrow"] {
  transition: transform var(--ntc-motion-fast) var(--ntc-motion-ease);
}

.btn:hover i[class*="arrow-right"] {
  transform: translateX(3px);
}

.btn:hover i.bi-arrow-up-right,
a[class*="link"]:hover i.bi-arrow-up-right {
  transform: translate(3px, -3px);
}

.btn:hover i.bi-arrow-down {
  transform: translateY(3px);
}

@media (max-width:767.98px) {

  :root {
    --ntc-motion-distance: 6px;
    --ntc-motion-stagger: 60ms;
    --ntc-motion-base: .65s;
  }

  .motion-ready [data-animate="image"] {
    transform: translate3d(0, 8px, 0);
  }
}

@media (hover:hover) {

  [data-animate="image"].is-animated:hover img {
    transform: scale(1.012);
  }
}

@media (prefers-reduced-motion:reduce) {

  html {
    scroll-behavior: auto !important;
  }

  *,
*::before,
*::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .motion-ready [data-animate],
.motion-ready [data-animate]>[data-animate-item],
.motion-ready .page-home .home-story-media .story-image-main,
.motion-ready .page-home .home-story-media .story-image-secondary,
.motion-ready .page-home .home-story-media .story-image-label {
    opacity: 1 !important;
    transform: none !important;
  }

  .motion-ready [data-animate="workflow"] [data-animate-item]::after {
    transform: none !important;
  }
}