/* ===================================
   全局动画关键帧 + CSS 变量配色
   =================================== */

:root {
    /* ---- 马卡龙主色调 ---- */
    --color-pink:    #FFB7C5;
    --color-pink-light: #FFD1DC;
    --color-mint:    #B5EAD7;
    --color-purple:  #C7CEEA;
    --color-yellow:  #FFEAA7;
    --color-blue:    #A0D2DB;
    --color-cream:   #FFF5BA;

    /* ---- 辅助色 ---- */
    --color-gold:    #FFD700;
    --color-white:   #FFF8F0;
    --color-dark:    #5B4B5E;
    --color-dark-purple: #6C5B7B;
    --color-text:    #4A3F50;

    /* ---- 动画速度 ---- */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ 浮动动画 ============ */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-20px); }
}

/* ============ 呼吸闪烁 ============ */
@keyframes twinkle {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

@keyframes twinkle-delayed {
    0%, 100% { opacity: 0.6; }
    30%      { opacity: 0.2; }
    70%      { opacity: 1; }
}

/* ============ 抖动 ============ */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%      { transform: translateX(-8px) rotate(-2deg); }
    30%      { transform: translateX(8px) rotate(2deg); }
    50%      { transform: translateX(-6px) rotate(-1deg); }
    70%      { transform: translateX(6px) rotate(1deg); }
    90%      { transform: translateX(-3px); }
}

/* ============ 弹入弹出 ============ */
@keyframes pop-in {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes pop-out {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* ============ 淡入淡出 ============ */
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ============ 旋转 ============ */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============ 上下弹跳 ============ */
@keyframes bounce-up {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(-30px); }
    60%      { transform: translateY(-15px); }
    80%      { transform: translateY(-25px); }
}