/* 脉冲动画 */
@keyframes pulse {
    0% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }
}

/* 老虎机滚动动画 */
@keyframes spin {
    0% {
        transform: rotateY(0deg);
    }
    25% {
        transform: rotateY(90deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    75% {
        transform: rotateY(270deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

/* 网格项目滚动动画 */
.grid-item.spinning {
    animation: spin 0.5s ease-in-out;
    background: linear-gradient(135deg, #ff9a9e, #fecfef, #fecfef, #fecfef);
    background-size: 400% 400%;
    animation: spin 0.5s ease-in-out, gradient-shift 0.5s ease-in-out;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 结果显示动画 */
.result-text.show-result {
    animation: result-bounce 0.6s ease-out;
    color: #FF6B6B;
}

@keyframes result-bounce {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 按钮点击效果 */
.btn-clicked {
    animation: button-click 0.2s ease-out;
}

@keyframes button-click {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* 页面切换动画 */
.page-transition {
    animation: fade-in 0.5s ease-out;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 选中网格项的特殊效果 */
.grid-item.highlight {
    animation: highlight-flash 0.3s ease-in-out;
}

@keyframes highlight-flash {
    0% {
        background: rgba(255, 255, 255, 0.9);
        transform: scale(1);
    }
    50% {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
    }
    100% {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        transform: scale(1);
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }
}

/* 悬浮效果增强 */
.drink-btn:hover .drink-icon {
    animation: bounce-icon 0.6s ease-in-out infinite;
}

@keyframes bounce-icon {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-3px);
    }
}

/* 按钮跳动动画 */
@keyframes bounce-button {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(-3px);
    }
    40% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* 网格项跳动动画 */
@keyframes bounce-grid {
    0%, 20%, 50%, 80%, 100% {
        transform: scale(1) translateY(0);
    }
    40% {
        transform: scale(1.1) translateY(-3px);
    }
    60% {
        transform: scale(1.05) translateY(-1px);
    }
}

/* 图标旋转跳动 */
@keyframes icon-bounce {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(-10deg);
    }
    50% {
        transform: scale(1.3) rotate(0deg);
    }
    75% {
        transform: scale(1.2) rotate(10deg);
    }
}

/* 选中项特殊跳动 */
.grid-item.selected .icon {
    animation: icon-bounce 3s ease-in-out infinite;
}

/* 所有表情包的持续动画 */
.grid-item:not(.invisible) .icon {
    animation: floating 4s ease-in-out infinite;
}

.grid-item:not(.invisible):nth-child(2n) .icon {
    animation: floating 4s ease-in-out infinite reverse;
}

.grid-item:not(.invisible):nth-child(3n) .icon {
    animation: wiggle 5s ease-in-out infinite;
}

.grid-item:not(.invisible):nth-child(4n) .icon {
    animation: pulse-icon 3s ease-in-out infinite;
}

/* 浮动动画 */
@keyframes floating {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.05);
    }
}

/* 摆动动画 */
@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(-5deg) scale(1.02);
    }
    75% {
        transform: rotate(5deg) scale(1.02);
    }
}

/* 脉冲动画 */
@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* 滚动时的连续跳动效果 */
.grid-item.active-bounce {
    animation: bounce-grid 0.6s ease-in-out;
}

/* 跳动时表情包的特殊变化 */
.grid-item.spinning .icon {
    animation: emoji-dance 0.6s ease-in-out !important;
}

/* 表情包跳舞动画 */
@keyframes emoji-dance {
    0% {
        transform: scale(1) rotate(0deg);
        filter: hue-rotate(0deg);
    }
    25% {
        transform: scale(1.3) rotate(-15deg);
        filter: hue-rotate(90deg);
    }
    50% {
        transform: scale(1.5) rotate(0deg);
        filter: hue-rotate(180deg);
    }
    75% {
        transform: scale(1.3) rotate(15deg);
        filter: hue-rotate(270deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        filter: hue-rotate(360deg);
    }
}

/* 结果显示时的特殊跳动 */
.grid-item.final-bounce {
    animation: bounce-grid 0.8s ease-in-out 5, glow 3s ease-in-out infinite;
}

/* 最终结果表情包的超级动画 */
.grid-item.final-bounce .icon {
    animation: final-celebration 1s ease-in-out 3 !important;
}

@keyframes final-celebration {
    0% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1) hue-rotate(0deg);
        text-shadow: 0 0 10px gold;
    }
    20% {
        transform: scale(1.8) rotate(72deg);
        filter: brightness(1.5) hue-rotate(72deg);
        text-shadow: 0 0 20px gold, 0 0 30px orange;
    }
    40% {
        transform: scale(1.5) rotate(144deg);
        filter: brightness(1.8) hue-rotate(144deg);
        text-shadow: 0 0 30px gold, 0 0 40px orange, 0 0 50px red;
    }
    60% {
        transform: scale(2) rotate(216deg);
        filter: brightness(2) hue-rotate(216deg);
        text-shadow: 0 0 40px gold, 0 0 50px orange, 0 0 60px red;
    }
    80% {
        transform: scale(1.6) rotate(288deg);
        filter: brightness(1.5) hue-rotate(288deg);
        text-shadow: 0 0 30px gold, 0 0 40px orange;
    }
    100% {
        transform: scale(1) rotate(360deg);
        filter: brightness(1) hue-rotate(360deg);
        text-shadow: 0 0 15px gold;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 35px rgba(255, 215, 0, 1), 0 0 50px rgba(255, 165, 0, 0.8);
    }
}