/* Carousel container styles - using Tailwind and ui-carousel, no additional CSS needed */

/* Keyframes for card entrance animation */
@keyframes cardEntrance {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Keyframes for unstacking animation */
@keyframes unstack {
  from {
    transform: translateX(var(--distance-to-center));
  }
  to {
    transform: translateX(0);
  }
}

crm-customer-card {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Ease-out-back for slight overshoot */
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.25);

  /* Initial entrance animation with staggered delay */
  animation: cardEntrance 0.4s cubic-bezier(0.25, 1, 0.5, 1) backwards;
  animation-delay: calc(var(--card-index, 0) * 80ms);
}

/* Unstacked state (default) */
crm-customer-card {
  transform: translateX(0);
}

/* Stacked state transformations */
.stacked crm-customer-card,
.single-card crm-customer-card {
  transform: translateX(var(--distance-to-center));
}

/* Use data attributes instead of nth-child for dynamic positioning */
.stacked crm-customer-card[data-stack-position='0'] {
  z-index: 3;
}

.stacked crm-customer-card[data-stack-position='1'] {
  transform: translateX(calc(var(--distance-to-center) - 3.6rem))
    translateY(1rem) rotate(-2.538deg);
  z-index: 2;
}

.stacked crm-customer-card[data-stack-position='2'] {
  transform: translateX(calc(var(--distance-to-center) + 3.6rem))
    translateY(1rem) rotate(2.538deg);
  z-index: 1;
}

/* Hide cards beyond the 3rd position */
.stacked
  crm-customer-card:not([data-stack-position='0']):not([data-stack-position='1']):not([data-stack-position='2']) {
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  crm-customer-card {
    animation: none;
    transition-duration: 0.1s;
  }
}
