/* ====================================
   动画关键帧 Animations
   ==================================== */

/* Heartbeat 心跳 */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.18); }
  28% { transform: scale(1); }
  42% { transform: scale(1.18); }
  70% { transform: scale(1); }
}

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

/* Blink 光标闪烁 */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Bounce down 向下弹跳 */
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* Float up 上浮心形 */
@keyframes floatUp {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-110vh) rotate(360deg) scale(1.1);
    opacity: 0;
  }
}

/* Pulse glow 发光脉动 */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow:
      0 8px 30px rgba(168, 50, 67, 0.35),
      0 0 0 0 rgba(168, 50, 67, 0.4);
  }
  50% {
    box-shadow:
      0 8px 30px rgba(168, 50, 67, 0.35),
      0 0 0 14px rgba(168, 50, 67, 0);
  }
}

/* Pop in 弹入 */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.92);
  }
  70% {
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Petal Fall 花瓣飘落 */
@keyframes petalFall {
  0% {
    transform: translateY(-10vh) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) translateX(60px) rotate(540deg);
    opacity: 0;
  }
}

/* Heart Burst 心形爆散 */
@keyframes burstHeart {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(1.1);
    opacity: 0;
  }
}

/* Message In 留言进入 */
@keyframes messageIn {
  0% {
    opacity: 0;
    transform: translateX(-20px) scale(0.96);
  }
  60% {
    transform: translateX(4px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Sparkle 闪烁 */
@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Fade In Up 向上渐显 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In 渐显 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Envelope open 信封打开（额外补充） */
@keyframes envelopeOpen {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-180deg);
  }
}

/* Music spin 音乐旋转 */
@keyframes musicSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.music-on {
  display: inline-block;
  animation: musicSpin 4s linear infinite;
}