/**
 * CardStack - 卡牌堆叠组件样式（穿透模式）
 * 最小 CSS - 仅保留 Tailwind 无法处理的动态计算
 */

/* CSS 变量（通过 JS 动态设置） */
.card-stack-container {
  --card-width: 160px;
  --card-height: 230px;
  --stack-offset: 30px;
  --hover-lift: -40px;
  --center-offset: 4.5; /* 默认值，JS 会根据实际卡片数量动态设置 */
  --max-cards-per-row: 10;
  --row: 0;
  --row-center-offset: 4.5;
}

/* 动态定位计算（依赖 CSS 变量） - 单行布局 */
.card-stack-item {
  left: calc(50% - var(--card-width) / 2 + var(--index) * var(--stack-offset) - var(--row-center-offset) * var(--stack-offset));
  top: 0;
  width: var(--card-width);
  height: var(--card-height);
}

/* 悬停变换（依赖 CSS 变量） */
.card-stack-item.active {
  transform: translateY(var(--hover-lift)) scale(1.1);
}

/* 生成中渐变（复杂渐变） */
.card-stack-item.generating .card-stack-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    -33.04deg,
    rgba(206, 224, 255, 0.18) 0.13%,
    rgba(112, 136, 255, 0) 39.92%,
    rgba(197, 142, 255, 0) 59.95%,
    rgba(250, 228, 255, 0.18) 100%
  );
  border: 1px dashed #414245;
}

/* 旋转动画 */
@keyframes card-stack-spin {
  to { transform: rotate(360deg); }
}

.card-stack-spinner {
  animation: card-stack-spin 1s linear infinite;
}