/* ============================================================
   学霸养成之路 - 动画样式
   包含 PvZ 战况面板的专属动画与交互效果
   ============================================================ */

/* ===== 阳光数字弹跳 ===== */
.sunshine-bounce {
    animation: sunshineBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sunshineBounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); color: var(--sun-orange) !important; }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ===== 阳光从天而降（获取阳光时） ===== */
.sunshine-drop {
    position: fixed;
    font-size: 32px;
    pointer-events: none;
    z-index: 200;
    animation: sunshineDrop 1.5s ease-in forwards;
}

@keyframes sunshineDrop {
    0% {
        transform: translateY(-50px) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: translateY(0) rotate(180deg) scale(1.2);
    }
    100% {
        transform: translateY(200px) rotate(720deg) scale(0.8);
        opacity: 0;
    }
}

/* ===== 答对撒花（多种颜色花瓣） ===== */
.confetti-flower {
    position: absolute;
    width: 16px;
    height: 16px;
    top: -20px;
    pointer-events: none;
}

.confetti-flower::before {
    content: '🌸';
    font-size: 20px;
    display: block;
    animation: confettiFlowerFall 2.5s linear forwards;
}

@keyframes confettiFlowerFall {
    0% {
        transform: translateY(0) rotate(0deg) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(540deg) translateX(80px);
        opacity: 0;
    }
}

/* ===== PvZ 植物种植动画 ===== */
.plant-pop-in {
    animation: plantPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes plantPopIn {
    0% {
        transform: scale(0) rotate(-30deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.2) rotate(10deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ===== PvZ 植物轻微摆动（风吹效果） ===== */
.plant-sway {
    animation: plantSway 3s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes plantSway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

/* ===== PvZ 僵尸抖动 ===== */
.zombie-shake {
    animation: zombieShake 0.5s ease-in-out infinite;
}

@keyframes zombieShake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-2px) rotate(-2deg); }
    75% { transform: translateX(2px) rotate(2deg); }
}

/* ===== PvZ 僵尸前进动画 ===== */
.zombie-walk {
    animation: zombieWalk 1.2s ease-in-out infinite;
}

@keyframes zombieWalk {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-3px) rotate(1deg); }
}

/* ===== 僵尸吃植物动画 ===== */
.zombie-eat {
    animation: zombieEat 0.4s ease-in-out 3;
}

@keyframes zombieEat {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

/* ===== 植物被吃掉消散动画 ===== */
.plant-fade-out {
    animation: plantFadeOut 0.6s ease-out forwards;
}

@keyframes plantFadeOut {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3) rotate(20deg); opacity: 0.6; filter: hue-rotate(60deg); }
    100% { transform: scale(0) rotate(90deg); opacity: 0; }
}

/* ===== 浇水效果（水滴落下） ===== */
.water-drop {
    position: absolute;
    width: 8px;
    height: 12px;
    background: linear-gradient(180deg, #87CEEB 0%, #4A90E2 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    pointer-events: none;
    animation: waterDrop 0.8s ease-in forwards;
}

@keyframes waterDrop {
    0% {
        transform: translateY(-40px) scale(1);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translateY(60px) scale(0.5);
        opacity: 0;
    }
}

/* ===== 植物成长光晕 ===== */
.growth-glow {
    animation: growthGlow 1s ease-out;
}

@keyframes growthGlow {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.6) drop-shadow(0 0 20px #FFD93D); }
    100% { filter: brightness(1); }
}

/* ===== 答错摇晃 ===== */
.shake-x {
    animation: shakeX 0.4s ease-in-out;
}

@keyframes shakeX {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* ===== 解锁烟花 ===== */
.firework {
    position: fixed;
    pointer-events: none;
    z-index: 998;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: fireworkExplode 1s ease-out forwards;
}

@keyframes fireworkExplode {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 currentColor;
    }
    100% {
        transform: scale(0.5);
        opacity: 0;
        box-shadow:
            0 -20px 0 currentColor,
            14px -14px 0 currentColor,
            20px 0 0 currentColor,
            14px 14px 0 currentColor,
            0 20px 0 currentColor,
            -14px 14px 0 currentColor,
            -20px 0 0 currentColor,
            -14px -14px 0 currentColor;
    }
}

/* ===== 关卡完成庆祝弹窗 ===== */
.celebration-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: linear-gradient(135deg, #FFD93D 0%, #FF8C42 100%);
    color: white;
    padding: 30px 50px;
    border-radius: var(--radius-xl);
    box-shadow: 0 0 60px rgba(255, 217, 61, 0.8);
    text-align: center;
    z-index: 600;
    border: 4px solid white;
    animation: celebrationPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes celebrationPop {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-20deg); }
    60% { transform: translate(-50%, -50%) scale(1.15) rotate(5deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

.celebration-popup.fade-out {
    animation: celebrationFadeOut 0.4s ease forwards;
}

@keyframes celebrationFadeOut {
    to {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
}

/* ===== 进度条脉冲（解锁新关卡时） ===== */
.pulse-glow {
    animation: pulseGlow 1.5s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 217, 61, 0.7);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(255, 217, 61, 0);
    }
}

/* ===== 向日葵花朵旋转（进度卡装饰） ===== */
.sunflower-rotate {
    animation: sunRotate 12s linear infinite;
}

/* ===== 字体弹跳（标题动效） ===== */
.title-bounce {
    animation: titleBounce 2s ease-in-out infinite;
}

@keyframes titleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ===== 按钮按下波纹 ===== */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
    pointer-events: none;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ===== 减少动画偏好（无障碍） ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .cloud,
    .mascot-svg,
    .logo-sun,
    .goal-sun {
        animation: none !important;
    }
}