/* 强制覆盖动画样式 - 确保在Laravel主页中正常工作 */

/* 基础过渡动画 */
.transition-all {
    transition: all 0.3s ease !important;
}

.transition-colors {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important;
}

.transition-transform {
    transition: transform 0.3s ease !important;
}

.duration-300 {
    transition-duration: 0.3s !important;
}

.duration-200 {
    transition-duration: 0.2s !important;
}

.duration-500 {
    transition-duration: 0.5s !important;
}

.duration-600 {
    transition-duration: 0.6s !important;
}

/* 缩放动画 */
.hover\:scale-105:hover {
    transform: scale(1.05) !important;
}

.hover\:scale-110:hover {
    transform: scale(1.1) !important;
}

.active\:scale-95:active {
    transform: scale(0.95) !important;
}

/* Group hover 缩放 */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1) !important;
}

/* 阴影动画 */
.hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* 鼠标指针 */
.cursor-pointer {
    cursor: pointer !important;
}

/* Group hover 颜色变化 - 浅色模式 */
.group:hover .group-hover\:text-blue-600 {
    color: #2563eb !important;
}

.group:hover .group-hover\:text-green-600 {
    color: #16a34a !important;
}

.group:hover .group-hover\:text-orange-600 {
    color: #ea580c !important;
}

.group:hover .group-hover\:text-red-600 {
    color: #dc2626 !important;
}

/* Group hover 颜色变化 - 深色模式 */
.dark .group:hover .group-hover\:text-blue-400 {
    color: #60a5fa !important;
}

.dark .group:hover .group-hover\:text-green-400 {
    color: #4ade80 !important;
}

.dark .group:hover .group-hover\:text-orange-400 {
    color: #fb923c !important;
}

.dark .group:hover .group-hover\:text-red-400 {
    color: #f87171 !important;
}

/* 普通hover颜色 */
.hover\:text-indigo-600:hover {
    color: #4f46e5 !important;
}

.dark .hover\:text-indigo-400:hover {
    color: #818cf8 !important;
}

/* 弹跳动画 */
.animate-bounce {
    animation: bounceAnimation 0.6s ease-in-out !important;
}

@keyframes bounceAnimation {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0px);
    }
    40%, 43% {
        transform: translateY(-15px);
    }
    70% {
        transform: translateY(-7px);
    }
    90% {
        transform: translateY(-3px);
    }
}

/* 心跳动画 */
.animate-heartbeat {
    animation: heartbeatAnimation 1.5s ease-in-out infinite !important;
}

@keyframes heartbeatAnimation {
    0%, 100% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.15);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.15);
    }
    70% {
        transform: scale(1);
    }
}

/* Settings Panel 特殊动画 */
.flip-container.flipped .flip-face-back .settings-content {
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    70% {
        transform: scale(0.95);
        opacity: 0.9;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 确保所有动画元素都有基础样式 */
[class*="hover:"], [class*="group-hover:"], [class*="transition"], [class*="animate-"] {
    will-change: transform, opacity, color, background-color, box-shadow;
}

/* 强制应用到具体元素 */
button[class*="hover:scale"], 
div[class*="hover:scale"], 
.card[class*="hover:scale"] {
    transition: transform 0.3s ease !important;
}

button[class*="hover:scale"]:hover,
div[class*="hover:scale"]:hover,
.card[class*="hover:scale"]:hover {
    transform: scale(1.05) !important;
}

/* 特殊处理group元素 */
.group .group-hover\:scale-110 {
    transition: transform 0.3s ease !important;
}

.group:hover .group-hover\:scale-110 {
    transform: scale(1.1) !important;
}