/* ================================
   AI Page Effects
   4 selected effects applied to the project
   ================================ */

/* ===== 1. 标题渐变色 (Title Gradient) - #4 ===== */
.ai-section-title-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  font-weight: 600;
  transition: background-position 0.5s ease;
}

.ai-section-title-gradient:hover {
  background-position: 100% 50%;
}

/* ===== 2. 卡片 Hover 升起 (Card Hover Lift) - #3 ===== */
.ai-article-card-lift {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
}

.ai-article-card-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25) !important;
}

/* ===== 3. 磁吸效果 (Magnetic Effect) - #27 ===== */
.ai-article-card-magnetic {
  position: relative;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

.ai-article-card-magnetic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
              rgba(102, 126, 234, 0.1), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.ai-article-card-magnetic:hover::before {
  opacity: 1;
}

/* 确保内容在磁吸光晕上方 */
.ai-article-card-magnetic .article-card-content {
  position: relative;
  z-index: 2;
}

/* ===== 4. 梯形级联动画 (Staircase Cascade) - #44 ===== */
@keyframes staircaseIn {
  0% {
    opacity: 0;
    transform: translateX(-100px) translateY(100px) scale(0.8);
  }
  60% {
    transform: translateX(10px) translateY(-10px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

.ai-article-card-staircase {
  animation: staircaseIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ai-article-card-staircase:nth-child(1) {
  animation-delay: 0s;
}

.ai-article-card-staircase:nth-child(2) {
  animation-delay: 0.1s;
}

.ai-article-card-staircase:nth-child(3) {
  animation-delay: 0.2s;
}

.ai-article-card-staircase:nth-child(4) {
  animation-delay: 0.3s;
}

.ai-article-card-staircase:nth-child(5) {
  animation-delay: 0.4s;
}

.ai-article-card-staircase:nth-child(n+6) {
  animation-delay: 0.4s;
}

/* ===== Combined Effects ===== */
.ai-article-card-all-effects {
  animation: staircaseIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

.ai-article-card-all-effects::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
              rgba(102, 126, 234, 0.1), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.ai-article-card-all-effects:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25) !important;
}

.ai-article-card-all-effects:hover::before {
  opacity: 1;
}

.ai-article-card-all-effects .article-card-content {
  position: relative;
  z-index: 2;
}

.ai-article-card-all-effects:nth-child(1) {
  animation-delay: 0s;
}

.ai-article-card-all-effects:nth-child(2) {
  animation-delay: 0.1s;
}

.ai-article-card-all-effects:nth-child(3) {
  animation-delay: 0.2s;
}

.ai-article-card-all-effects:nth-child(4) {
  animation-delay: 0.3s;
}

.ai-article-card-all-effects:nth-child(5) {
  animation-delay: 0.4s;
}

.ai-article-card-all-effects:nth-child(n+6) {
  animation-delay: 0.4s;
}