/* ==========================================================================
   治愈系 2D 动画书桌 - 动画动效与补间关键帧 (animations.css)
   ========================================================================== */

/* 1. 模态框入场动效 */
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cardSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 2. 猫咪安静呼吸起伏 */
@keyframes catBreathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025, 0.98) translateY(1px);
  }
}

.cat-purring {
  animation: catPurrShake 0.4s ease infinite !important;
}

@keyframes catPurrShake {
  0%, 100% { transform: scale(1.05) rotate(0deg); }
  25% { transform: scale(1.05) rotate(-2deg); }
  75% { transform: scale(1.05) rotate(2deg); }
}

/* 3. 茶杯热气升腾 */
@keyframes steamRise {
  0% {
    opacity: 0;
    transform: translateY(0) scaleX(0.8);
  }
  30% {
    opacity: 0.6;
    transform: translateY(-12px) scaleX(1.2) rotate(4deg);
  }
  70% {
    opacity: 0.4;
    transform: translateY(-24px) scaleX(1.6) rotate(-6deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-36px) scaleX(2.0);
  }
}

.mug-bounce {
  animation: mugBounceAnim 0.5s ease;
}

@keyframes mugBounceAnim {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1) translateY(-6px); }
}

/* 4. 白纱窗帘微风轻摆 */
@keyframes curtainBreezeLeft {
  0%, 100% { transform: rotate(0deg) skewX(0deg); }
  50% { transform: rotate(4deg) skewX(2deg) translateX(4px); }
}

@keyframes curtainBreezeRight {
  0%, 100% { transform: rotate(0deg) skewX(0deg); }
  50% { transform: rotate(-4deg) skewX(-2deg) translateX(-4px); }
}

@keyframes curtainBreezeLeftStrong {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg) skewX(5deg) translateX(12px); }
}

@keyframes curtainBreezeRightStrong {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-10deg) skewX(-5deg) translateX(-12px); }
}

/* 5. 玻璃风铃随风摆动 */
@keyframes windChimeSway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

.chime-swaying {
  animation: windChimeHit 1.2s ease;
}

@keyframes windChimeHit {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(12deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(6deg); }
  80% { transform: rotate(-3deg); }
}

/* 6. 桌面绿植切换与浇水反馈动效 */
.plant-switch-bounce {
  animation: plantSwitch 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes plantSwitch {
  0% { transform: scale(0.6) translateY(20px); opacity: 0; }
  70% { transform: scale(1.15) translateY(-5px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.plant-watered-happy {
  animation: plantHappyDance 0.8s ease;
}

@keyframes plantHappyDance {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.18) rotate(-4deg) translateY(-8px); }
  40% { transform: scale(1.18) rotate(4deg) translateY(-8px); }
  60% { transform: scale(1.08) rotate(-2deg) translateY(-4px); }
  80% { transform: scale(1.08) rotate(2deg) translateY(-4px); }
}

.watering-active {
  animation: wateringCanShake 1.0s ease;
}

@keyframes wateringCanShake {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-25deg) scale(1.05); }
  60% { transform: rotate(-30deg) scale(1.05); }
}

/* 7. 点赞心心弹跳 */
.animate-pop {
  animation: heartPop 0.35s ease;
}

@keyframes heartPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}