/* SuCos 博客系统 - 特效与动画样式 */

/* ==================== 更平滑的过渡 ==================== */
a, button, .btn, .card, input, textarea, select {
    transition: all 0.3s ease;
}

/* ==================== 卡片阴影层次 ==================== */
.card-shadow-sm { 
    box-shadow: 0 1px 3px rgba(139, 115, 85, 0.05); 
}

.card-shadow-md { 
    box-shadow: 0 4px 12px rgba(139, 115, 85, 0.08); 
}

.card-shadow-lg { 
    box-shadow: 0 12px 24px rgba(139, 115, 85, 0.12); 
}

/* ==================== 渐变背景 ==================== */
.bg-gradient-orange {
    background: linear-gradient(135deg, #FFB347 0%, #D2B48C 100%);
}

.bg-gradient-cream {
    background: linear-gradient(135deg, #FFF8DC 0%, #FFEBCD 100%);
}

/* ==================== 玻璃态效果 ==================== */
.glass-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

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

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

.pulse-slow {
    animation: pulse 3s ease-in-out infinite;
}

/* ==================== 呼吸灯效果 ==================== */
@keyframes breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.breathe {
    animation: breathe 2s ease-in-out infinite;
}

/* ==================== 微交互动画 ==================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.5s ease-out;
}

/* ==================== 性能优化 ==================== */
/* 减少重绘 */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* GPU加速 */
.gpu-accelerated {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ==================== 特殊效果 ==================== */
/* 彩虹加载条 */
.loading-rainbow {
    background: linear-gradient(
        90deg,
        var(--orange-warm) 0%,
        var(--brown-light) 25%,
        var(--cream-dark) 50%,
        var(--brown-light) 75%,
        var(--orange-warm) 100%
    );
    background-size: 200% 100%;
    animation: rainbow 2s linear infinite;
}

@keyframes rainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 文字渐变 */
.text-gradient-orange {
    background: linear-gradient(135deg, var(--orange-warm), var(--brown-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* ==================== 提示工具增强 ==================== */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1000;
}

[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* ==================== 选择高亮 ==================== */
::selection {
    background: var(--orange-warm);
    color: white;
}

::-moz-selection {
    background: var(--orange-warm);
    color: white;
}