/* ========================================
   熟女茶话会 - 动画样式
   ======================================== */

/* --- 滚动进入动画 --- */
.mtp-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.mtp-animate.mtp-visible {
  opacity: 1;
  transform: translateY(0);
}

.mtp-animate-delay-1 { transition-delay: 0.1s; }
.mtp-animate-delay-2 { transition-delay: 0.2s; }
.mtp-animate-delay-3 { transition-delay: 0.3s; }
.mtp-animate-delay-4 { transition-delay: 0.4s; }

/* --- 页面切换平滑效果 --- */
.mtp-page-enter {
  animation: mtpPageSlideIn 0.5s ease forwards;
}

@keyframes mtpPageSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- 卡片悬停动画 --- */
.mtp-hover-float {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mtp-hover-float:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 36px rgba(109, 93, 110, 0.18);
}

/* --- 脉冲动画 --- */
@keyframes mtpPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.mtp-pulse {
  animation: mtpPulse 2s ease-in-out infinite;
}

/* --- 淡入动画 --- */
@keyframes mtpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mtp-fade-in {
  animation: mtpFadeIn 0.8s ease forwards;
}

/* --- 水彩边框效果 --- */
.mtp-watercolor-border {
  position: relative;
}

.mtp-watercolor-border::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 10%;
  right: 10%;
  height: 4px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--mtp-secondary) 20%, 
    var(--mtp-accent) 50%, 
    var(--mtp-link) 80%, 
    transparent
  );
  border-radius: 4px;
  opacity: 0.6;
}