/*!
 * SST Motion Layer v1.0.0
 * Industrial, restrained card micro-interactions.
 */

:root {
  --sst-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sst-motion-shadow: 0 18px 42px rgba(0, 43, 82, 0.14), 0 4px 12px rgba(0, 59, 113, 0.07);
  --sst-motion-border: rgba(0, 86, 150, 0.26);
}

.sst-motion-card {
  position: relative;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    transform 0.38s var(--sst-motion-ease),
    box-shadow 0.38s var(--sst-motion-ease),
    border-color 0.38s ease;
}

.sst-motion-card .product-thumb,
.sst-motion-card .product-card-new__thumb {
  overflow: hidden;
}

.sst-motion-card .product-thumb img,
.sst-motion-card .product-card-new__thumb img {
  transform: scale(1.001);
  transition: transform 0.58s var(--sst-motion-ease);
  will-change: transform;
}

.sst-motion-card .why-us__icon,
#applications .sst-motion-card > div:first-child {
  transition:
    transform 0.42s var(--sst-motion-ease),
    background-color 0.35s ease;
}

.sst-motion-card .product-card-new__link,
.sst-motion-card > a:last-child {
  transition: color 0.25s ease, letter-spacing 0.35s var(--sst-motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .sst-motion-card:hover,
  .sst-motion-card:focus-within {
    z-index: 2;
    transform: translate3d(0, -6px, 0) scale(1.012);
    border-color: var(--sst-motion-border);
    box-shadow: var(--sst-motion-shadow);
  }

  .sst-motion-card:hover .product-thumb img,
  .sst-motion-card:focus-within .product-thumb img,
  .sst-motion-card:hover .product-card-new__thumb img,
  .sst-motion-card:focus-within .product-card-new__thumb img {
    transform: scale(1.048);
  }

  .sst-motion-card:hover .why-us__icon,
  .sst-motion-card:focus-within .why-us__icon,
  #applications .sst-motion-card:hover > div:first-child,
  #applications .sst-motion-card:focus-within > div:first-child {
    transform: translateY(-2px) scale(1.045);
  }

  .sst-motion-card:hover .product-card-new__link,
  .sst-motion-card:focus-within .product-card-new__link,
  .sst-motion-card:hover > a:last-child,
  .sst-motion-card:focus-within > a:last-child {
    letter-spacing: 0.012em;
  }
}

@media (max-width: 820px) {
  .sst-motion-card {
    transition-duration: 0.28s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sst-motion-card,
  .sst-motion-card *,
  .sst-motion-card::before,
  .sst-motion-card::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .sst-motion-card:hover,
  .sst-motion-card:focus-within,
  .sst-motion-card:hover .product-thumb img,
  .sst-motion-card:focus-within .product-thumb img,
  .sst-motion-card:hover .product-card-new__thumb img,
  .sst-motion-card:focus-within .product-card-new__thumb img {
    transform: none !important;
  }
}
