/* 动画样式 */

/* 背景渐变流动 */
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 爱心飘落 */
@keyframes heartFall {
  0% {
    transform: translateY(-5vh) translateX(0) rotate(0deg) scale(var(--fall-scale, 1));
    opacity: 0;
  }
  10% { opacity: 0.8; }
  90% { opacity: 0.5; }
  100% {
    transform: translateY(105vh) translateX(var(--fall-drift, 30px)) rotate(var(--fall-rotate, 360deg)) scale(calc(var(--fall-scale, 1) * 0.6));
    opacity: 0;
  }
}

/* 樱花飘落 */
@keyframes sakuraFall {
  0% {
    transform: translateY(-5vh) translateX(0) rotateX(0deg) rotateZ(0deg);
    opacity: 0;
  }
  10% { opacity: 0.7; }
  50% {
    transform: translateY(50vh) translateX(var(--sakura-drift, 40px)) rotateX(180deg) rotateZ(90deg);
  }
  90% { opacity: 0.4; }
  100% {
    transform: translateY(105vh) translateX(calc(var(--sakura-drift, 40px) * -0.5)) rotateX(360deg) rotateZ(180deg);
    opacity: 0;
  }
}

/* 星光闪烁 */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* 云朵漂浮 */
@keyframes cloudFloat {
  0% { transform: translateX(-120px); }
  100% { transform: translateX(calc(100vw + 120px)); }
}

/* 呼吸发光 */
@keyframes breathGlow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(255, 107, 157, 0.3));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(255, 107, 157, 0.5));
    transform: scale(1.02);
  }
}

/* 弹性出现 */
@keyframes bounceIn {
  0% { transform: scale(0); opacity: 0; }
  40% { transform: scale(1.08); }
  60% { transform: scale(0.95); }
  80% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

/* 错误抖动 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
  20%, 40%, 60%, 80% { transform: translateX(6px); }
}

/* 进度条闪光 */
@keyframes progressShine {
  0% { left: -30%; }
  100% { left: 130%; }
}

/* 爱心爆散 */
@keyframes heartBurst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--burst-x), var(--burst-y)) scale(0.3);
    opacity: 0;
  }
}

/* 烟花爱心 */
@keyframes fireworkBurst {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--burst-x), var(--burst-y)) scale(0.4) rotate(var(--burst-rotate, 180deg));
    opacity: 0;
  }
}

/* 里程碑爱心雨 */
@keyframes milestoneRain {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0;
  }
}

/* 里程碑消息出现 */
@keyframes milestoneMsgIn {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* 淡入 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 淡出 */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 向上滑入 */
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 爱心呼吸（按钮内） */
@keyframes heartBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* 气泡出现 */
@keyframes bubbleIn {
  0% { transform: translateY(8px) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* 卡片出现 */
@keyframes cardAppear {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 卡片滑出 */
@keyframes slideOut {
  to { transform: translateX(100%); opacity: 0; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .floating-heart,
  .floating-sakura,
  .twinkling-star,
  .floating-cloud {
    animation: none !important;
  }

  .event-card {
    transition: opacity 0.15s ease !important;
  }

  .modal-content {
    transition: opacity 0.15s ease !important;
  }

  .burst-heart,
  .firework-heart,
  .milestone-heart,
  .crack-heart-piece {
    display: none !important;
  }

  .milestone-message {
    animation: fadeIn 0.3s ease !important;
  }
}