/**
 * EvalShare 通用优化样式
 * 包含常用效果、动画和工具类
 * 
 * @package EvalShare
 * @since 1.0.0
 */

/* ==================== Backdrop Filter 效果 ==================== */

/* 基础毛玻璃效果 */
.backdrop-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.backdrop-blur-md {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.backdrop-blur-lg {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.backdrop-blur-xl {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* 用于模态框和弹层的背景 */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* 用于卡片的毛玻璃效果 */
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==================== 常用动画 ==================== */

/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
}

/* 向上滑入 */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slideUp {
    animation: slideUp 0.4s ease-out;
}

/* 向下滑入 */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slideDown {
    animation: slideDown 0.4s ease-out;
}

/* 缩放入场 */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scaleIn {
    animation: scaleIn 0.3s ease-out;
}

/* 脉冲动画 */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.animate-spin {
    animation: spin 1s linear infinite;
}

/* 弹跳动画 */
@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

/* 闪烁动画 */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* ==================== 悬停效果 ==================== */

/* 悬停上浮 */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 悬停缩放 */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* 悬停发光 */
.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.4);
}

/* 图片悬停缩放 */
.hover-img-zoom {
    overflow: hidden;
}

.hover-img-zoom img {
    transition: transform 0.5s ease;
}

.hover-img-zoom:hover img {
    transform: scale(1.05);
}

/* ==================== 工具类 ==================== */

/* 文字截断 */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 隐藏滚动条但保留滚动功能 */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

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

.scrollbar-thin::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* 渐变文字 */
.gradient-text {
    background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 阴影效果 */
.shadow-soft {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.shadow-medium {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.shadow-strong {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 圆角 */
.rounded-sm {
    border-radius: 8px;
}

.rounded-md {
    border-radius: 12px;
}

.rounded-lg {
    border-radius: 16px;
}

.rounded-xl {
    border-radius: 24px;
}

.rounded-full {
    border-radius: 9999px;
}

/* ==================== 响应式工具 ==================== */

@media (max-width: 768px) {
    .mobile-hide {
        display: none !important;
    }
    
    .backdrop-blur,
    .backdrop-blur-sm,
    .backdrop-blur-md,
    .backdrop-blur-lg,
    .backdrop-blur-xl {
        /* 移动端降低模糊程度以提高性能 */
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

@media (min-width: 769px) {
    .desktop-hide {
        display: none !important;
    }
}

/* ==================== 性能优化 ==================== */

/* 硬件加速 */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 内容可见性优化 */
.content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

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