/* motion/cards.css — 能力卡光斑、序号/胶囊 hover、定价卡浮起。 */

/* .feature 在 styles.css 已是 position:relative，光斑层叠在卡上但不拦截指针。 */
.feature-index {
  z-index: 1;
}

.feature-icon,
.feature h3,
.feature p,
.feature .provider-pills {
  position: relative;
  z-index: 1;
}

.feature-index {
  transition: color 0.25s;
}

.feature:hover .feature-index {
  color: var(--mint);
}

@media (hover: hover) and (pointer: fine) {
  .feature::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
      320px circle at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(185, 248, 211, 0.07),
      transparent 65%
    );
    opacity: 0;
    transition: opacity 0.3s;
  }

  .feature.glow-on::after {
    opacity: 1;
  }

  .price-card {
    transition: opacity 0.55s ease, transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  }

  .price-card:hover {
    transform: translateY(-4px);
    border-color: rgba(185, 248, 211, 0.4);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  }

  .price-card.featured:hover {
    transform: translateY(-2px);
    border-color: rgba(185, 248, 211, 0.55);
    box-shadow: 0 22px 64px rgba(0, 0, 0, 0.24);
  }

  .provider-pills span {
    transition: border-color 0.2s, color 0.2s;
  }

  .provider-pills span:hover {
    border-color: var(--mint);
    color: var(--text);
  }
}