/**
 * 雅致青绿 - 中国风装饰样式
 * 包含：宣纸纹理、水墨山水、传统纹样、毛笔笔触、墨滴动画
 */

/* ===== 1. 宣纸纹理背景（base64 噪点图案） ===== */
.elegant-layout {
    position: relative;
}

/* 宣纸纹理层 */
.elegant-rice-paper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* ===== 2. 水墨山水背景 ===== */
.elegant-ink-mountain {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;
    background: 
        /* 远山 */
        radial-gradient(ellipse at 20% 30%, rgba(80, 100, 90, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 25%, rgba(70, 90, 80, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 35%, rgba(90, 110, 100, 0.2) 0%, transparent 65%),
        /* 近山 */
        radial-gradient(ellipse at 10% 60%, rgba(60, 80, 70, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 65%, rgba(50, 70, 60, 0.15) 0%, transparent 45%),
        /* 云雾 */
        radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 45%, rgba(255, 255, 255, 0.3) 0%, transparent 35%);
    filter: blur(20px);
}

/* ===== 3. 传统回纹/云纹装饰图案 ===== */
/* 四角装饰容器 */
.elegant-corner-decoration {
    position: fixed;
    width: 120px;
    height: 120px;
    pointer-events: none;
    z-index: 10;
    opacity: 0.15;
}

.elegant-corner-decoration svg {
    width: 100%;
    height: 100%;
}

/* 左上角 */
.elegant-corner-tl {
    top: 20px;
    left: 20px;
    transform: rotate(0deg);
}

/* 右上角 */
.elegant-corner-tr {
    top: 20px;
    right: 20px;
    transform: rotate(90deg);
}

/* 左下角 */
.elegant-corner-bl {
    bottom: 20px;
    left: 20px;
    transform: rotate(-90deg);
}

/* 右下角 */
.elegant-corner-br {
    bottom: 20px;
    right: 20px;
    transform: rotate(180deg);
}

/* 回纹图案 - 使用 SVG */
.corner-pattern path {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== 4. 标题文字优化（移除毛笔笔触效果） ===== */
/* 标题保持清晰易读，不使用特殊效果 */

/* ===== 5. 墨滴扩散加载动画 ===== */
@keyframes ink-drop-expand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes ink-drop-fade {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
}

/* PJAX 加载条动画 */
@keyframes ink-loading-slide {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* 墨滴加载容器 */
.ink-loading {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ink-loading::before,
.ink-loading::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90, 138, 122, 0.8) 0%, rgba(90, 138, 122, 0) 70%);
    animation: ink-drop-expand 2s infinite;
}

.ink-loading::before {
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.ink-loading::after {
    width: 40px;
    height: 40px;
    animation-delay: 0.5s;
}

/* 墨滴点 */
.ink-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(90, 138, 122, 0.6);
    animation: ink-drop-fade 1.5s infinite;
}

.ink-dot:nth-child(1) { animation-delay: 0s; }
.ink-dot:nth-child(2) { animation-delay: 0.3s; }
.ink-dot:nth-child(3) { animation-delay: 0.6s; }
.ink-dot:nth-child(4) { animation-delay: 0.9s; }

/* ===== 6. 响应式适配 ===== */
@media (max-width: 1024px) {
    .elegant-corner-decoration {
        width: 80px;
        height: 80px;
    }
    
    .elegant-corner-tl {
        top: 10px;
        left: 10px;
    }
    
    .elegant-corner-tr {
        top: 10px;
        right: 10px;
    }
    
    .elegant-corner-bl {
        bottom: 10px;
        left: 10px;
    }
    
    .elegant-corner-br {
        bottom: 10px;
        right: 10px;
    }
    
    .elegant-rice-paper {
        opacity: 0.3;
    }
    
    .elegant-ink-mountain {
        opacity: 0.05;
    }
}

/* ===== 7. 性能优化 ===== */
.elegant-rice-paper,
.elegant-ink-mountain,
.elegant-corner-decoration {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ===== 8. 特殊页面适配 ===== */
/* 文章详情页 */
.post-content-area .elegant-rice-paper,
.post-content-area .elegant-ink-mountain {
    z-index: -1;
}

/* 友链页面 */
.links-content .elegant-rice-paper,
.links-content .elegant-ink-mountain {
    z-index: -1;
}

/* ===== 9. 移动端优化 ===== */
@media (max-width: 768px) {
    /* 移动端减少装饰元素，提升性能 */
    .elegant-corner-decoration {
        display: none;
    }
    
    .elegant-rice-paper {
        opacity: 0.2;
    }
    
    .elegant-ink-mountain {
        opacity: 0.03;
    }
}