/* Scroll and hover motion. The homepage hero keeps its own keyframes in hero.css. */

html.motion-ok {
  --abj-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.motion-ok [data-motion="rise"],
html.motion-ok [data-motion="children"] > *,
html.motion-ok [data-motion="cards"] > .grid-product {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s var(--abj-motion-ease), transform 0.65s var(--abj-motion-ease);
  transition-delay: var(--motion-delay, 0ms);
}

html.motion-ok [data-motion="rise"].is-in,
html.motion-ok [data-motion="children"].is-in > *,
html.motion-ok [data-motion="cards"] > .grid-product.is-in {
  opacity: 1;
  transform: none;
}

html.motion-ok [data-motion="children"] > *:nth-child(2) { --motion-delay: 80ms; }
html.motion-ok [data-motion="children"] > *:nth-child(3) { --motion-delay: 160ms; }
html.motion-ok [data-motion="children"] > *:nth-child(4) { --motion-delay: 240ms; }
html.motion-ok [data-motion="children"] > *:nth-child(5) { --motion-delay: 320ms; }
html.motion-ok [data-motion="children"] > *:nth-child(6) { --motion-delay: 400ms; }

/* Gallery photos stay painted while the slide changes. A fade here flashes the white slide behind each photo. */
.flickity-enabled .product-main-slide .image-wrap img {
  animation: none;
  opacity: 1;
}

body.template-product.alpha-pdp .variant-input-wrap label.variant__button-label {
  transition: transform 150ms ease, border-color 0.15s ease, background-color 0.15s ease;
}

body.template-product.alpha-pdp .add-to-cart.alpha-pdp__atc {
  transition: transform 150ms ease, background-color 150ms ease !important;
}

.template-product .variant__button-label:active,
.template-product .alpha-pdp__atc:active {
  transform: scale(0.98);
}

/* Card photo grows slightly with the existing second-image swap. */
.alpha-carousel .grid-product__image-mask > .grid__image-ratio img,
.alpha-carousel .grid-product__secondary-image img {
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}

.alpha-carousel .grid-product__content:hover .grid-product__image-mask > .grid__image-ratio img,
.alpha-carousel .grid-product__content:hover .grid-product__secondary-image img {
  transform: scale(1.03) !important;
}

/* Mobile menu: shorter rise than the theme's 60px drawer animation. */
html.motion-ok #NavDrawer .mobile-nav > li.appear-animation {
  transform: translateY(12px);
}

html.motion-ok.js-drawer-open #NavDrawer .mobile-nav > li.appear-animation {
  transition: transform 0.45s var(--abj-motion-ease), opacity 0.4s ease;
}

html.motion-ok.js-drawer-open #NavDrawer .mobile-nav > li:nth-child(1) { transition-delay: 40ms; }
html.motion-ok.js-drawer-open #NavDrawer .mobile-nav > li:nth-child(2) { transition-delay: 80ms; }
html.motion-ok.js-drawer-open #NavDrawer .mobile-nav > li:nth-child(3) { transition-delay: 120ms; }
html.motion-ok.js-drawer-open #NavDrawer .mobile-nav > li:nth-child(4) { transition-delay: 160ms; }
html.motion-ok.js-drawer-open #NavDrawer .mobile-nav > li:nth-child(5) { transition-delay: 200ms; }
html.motion-ok.js-drawer-open #NavDrawer .mobile-nav > li:nth-child(6) { transition-delay: 240ms; }
html.motion-ok.js-drawer-open #NavDrawer .mobile-nav > li:nth-child(7) { transition-delay: 280ms; }
html.motion-ok.js-drawer-open #NavDrawer .mobile-nav > li:nth-child(8) { transition-delay: 320ms; }

@keyframes abj-line-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

#CartDrawer .cart__item.motion-line {
  animation: abj-line-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--motion-delay, 0ms);
}

#CartDrawer .cart__item.is-leaving {
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
  transition: max-height 200ms ease, opacity 200ms ease, transform 200ms ease, margin 200ms ease, padding 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ok [data-motion="rise"],
  html.motion-ok [data-motion="children"] > *,
  html.motion-ok [data-motion="cards"] > .grid-product,
  html.motion-ok #NavDrawer .mobile-nav > li.appear-animation {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .flickity-enabled .product-main-slide .image-wrap img,
  .alpha-carousel .grid-product__image-mask > .grid__image-ratio img,
  .alpha-carousel .grid-product__secondary-image img,
  body.template-product.alpha-pdp .variant-input-wrap label.variant__button-label,
  body.template-product.alpha-pdp .add-to-cart.alpha-pdp__atc,
  #CartDrawer .cart__item.motion-line,
  #CartDrawer .cart__item.is-leaving {
    animation: none;
    transition: none;
    transform: none;
    opacity: 1;
    max-height: none;
  }

  body.template-product.alpha-pdp .add-to-cart.alpha-pdp__atc {
    transition: none !important;
    transform: none !important;
  }
}