:root {
  --lux-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-card {
  will-change: transform, opacity, filter;
  transition:
    transform 760ms var(--lux-ease),
    opacity 420ms ease,
    filter 760ms var(--lux-ease),
    box-shadow 760ms var(--lux-ease);
  transform-origin: center center;
}

.carousel-card video,
.carousel-card img {
  transition: opacity 240ms ease;
}

.dot {
  transition:
    transform 220ms ease,
    width 220ms ease,
    opacity 220ms ease,
    background-color 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-card,
  .carousel-card video,
  .carousel-card img,
  .dot {
    transition: none !important;
  }
}

#carousel {
  touch-action: pan-y; /* allow vertical page scroll, we handle horizontal swipe */
  -webkit-user-select: none;
  user-select: none;
}