:root {
  --gdk-card-hover-duration: 340ms;
  --gdk-filmstrip-duration: 560ms;
  --gdk-card-hover-shadow:
    0 22px 44px -22px rgba(0, 60, 63, 0.46),
    0 12px 24px -18px rgba(15, 23, 42, 0.42);
}

[data-gdk-catalog-card="true"] {
  position: relative;
  z-index: 0;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, box-shadow;
  transition:
    transform var(--gdk-card-hover-duration)
      cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow var(--gdk-card-hover-duration)
      cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 220ms ease-out;
}

[data-gdk-filmstrip-track="true"] {
  --gdk-filmstrip-offset: 0%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform var(--gdk-filmstrip-duration)
      cubic-bezier(0.22, 0.72, 0.24, 1) !important;
}

[data-gdk-filmstrip-track="true"][data-gdk-filmstrip-active="true"] {
  transform: translate3d(
    var(--gdk-filmstrip-offset, 0%),
    0,
    0
  ) !important;
}

[data-gdk-filmstrip-track="true"] > * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@keyframes gdk-card-micro-shake {
  0% {
    transform:
      translate3d(0, 0, 0)
      scale(1)
      rotate(0deg);
  }
  30% {
    transform:
      translate3d(-0.5px, -3px, 0)
      scale(1.018)
      rotate(-0.72deg);
  }
  58% {
    transform:
      translate3d(0.5px, -4.5px, 0)
      scale(1.026)
      rotate(0.56deg);
  }
  79% {
    transform:
      translate3d(-0.2px, -4px, 0)
      scale(1.024)
      rotate(-0.18deg);
  }
  100% {
    transform:
      translate3d(0, -4px, 0)
      scale(1.025)
      rotate(0deg);
  }
}

@media (hover: hover) and (pointer: fine) {
  [data-gdk-catalog-card="true"]:hover,
  [data-gdk-catalog-card="true"].is-gdk-hovered,
  [data-gdk-catalog-card="true"]:focus-within {
    z-index: 8;
    border-color: rgba(0, 60, 63, 0.26);
    box-shadow: var(--gdk-card-hover-shadow);
    transform:
      translate3d(0, -4px, 0)
      scale(1.025)
      rotate(0deg);
    animation:
      gdk-card-micro-shake
      var(--gdk-card-hover-duration)
      ease-out
      both;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-gdk-catalog-card="true"],
  [data-gdk-filmstrip-track="true"] {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  [data-gdk-catalog-card="true"]:hover,
  [data-gdk-catalog-card="true"].is-gdk-hovered,
  [data-gdk-catalog-card="true"]:focus-within {
    transform: none;
    box-shadow:
      0 14px 28px -20px rgba(0, 60, 63, 0.48);
  }
}