/* 全局样式补充 */
* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
}

/* Safari 14.0.2 兼容 - 修复 backdrop-blur-sm 支持 */
@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {
    .backdrop-blur-sm {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
    
    .backdrop-blur {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
    
    .backdrop-blur-md {
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
    
    .backdrop-blur-lg {
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
    dark:bg-gray-600;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
    dark:bg-gray-500;
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* 渐变蠕动动画 - 优化版 */
@keyframes gradientWiggle {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(-45%, -55%) scale(1.02) rotate(2deg);
    }
    50% {
        transform: translate(-55%, -45%) scale(0.98) rotate(-2deg);
    }
    75% {
        transform: translate(-50%, -50%) scale(1.05) rotate(0deg);
    }
}

@keyframes gradientPulse {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.animate-gradient-wiggle {
    animation: gradientWiggle 15s ease-in-out infinite;
    transform: translateZ(0); /* 提升动画性能 */
}

.animate-gradient-pulse {
    animation: gradientPulse 12s ease-in-out infinite;
    transform: translateZ(0); /* 提升动画性能 */
}

/* 模态框动画 */
.modal-enter {
    opacity: 0;
}

.modal-enter-active {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.modal-exit {
    opacity: 1;
}

.modal-exit-active {
    opacity: 0;
    transition: opacity 0.3s ease;
}