/* ================================================================
   墨阁 · 中式雅致装饰 v3
   方向：宣纸纹、卷云纹、印章点缀、毛笔笔触（克制不抢戏）
   覆盖：Hero、卡片、阅读页、空状态、骨架屏、入场动画
   ================================================================ */

/* 暗色主题：装饰层更收敛 */
:root[data-theme="dark"] {
    --cloud-opacity: 0.04;
    --seal-opacity: 0.06;
    --paper: #2a241d;
    --paper-dark: #1f1b16;
}

/* ================================================================
   1. 装饰层基础 — 卷云纹 SVG + 宣纸纹理
   ================================================================ */

/* 卷云纹背景 — 通过 background-image 内联 SVG */
.cloud-pattern-bg {
    position: relative;
}
.cloud-pattern-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: var(--cloud-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%237b4a2d' stroke-width='1.5'%3E%3Cpath d='M20 40 Q20 30 30 30 Q40 30 40 40 Q40 50 50 50 Q60 50 60 40 Q60 30 70 30 Q80 30 80 40'/%3E%3Cpath d='M60 80 Q60 70 70 70 Q80 70 80 80 Q80 90 90 90 Q100 90 100 80'/%3E%3Cpath d='M10 90 Q10 85 15 85 Q20 85 20 90' opacity='0.5'/%3E%3Cpath d='M90 20 Q90 15 95 15 Q100 15 100 20' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 120px 120px;
}

/* 宣纸纹理 — 极淡纤维质感 */
.paper-texture {
    position: relative;
}
.paper-texture::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: calc(var(--cloud-opacity) * 0.5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%237b4a2d' stroke-width='0.4' opacity='0.3'%3E%3Cpath d='M20 30 Q40 32 60 28 Q80 30 100 25'/%3E%3Cpath d='M40 80 Q60 78 80 82 Q100 80 120 85'/%3E%3Cpath d='M30 130 Q50 132 70 128 Q90 130 110 125'/%3E%3Cpath d='M120 50 Q140 48 160 52 Q180 50 190 55'/%3E%3Cpath d='M130 170 Q150 172 170 168'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    mix-blend-mode: multiply;
}

/* 印章装饰 */
.seal-decoration {
    position: absolute;
    width: 56px; height: 56px;
    opacity: var(--seal-opacity);
    pointer-events: none;
    z-index: 0;
}
.seal-decoration svg { width: 100%; height: 100%; }

/* 墨点装饰 */
.ink-splash::after {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.15;
    pointer-events: none;
}

/* ================================================================
   2. Hero — 卷云纹 + 动态光晕 + 印章 + 笔触分割
   ================================================================ */

/* Hero 卷云纹背景层 */
.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: var(--cloud-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%237b4a2d' stroke-width='1.2'%3E%3Cpath d='M30 50 Q30 38 42 38 Q54 38 54 50 Q54 62 66 62 Q78 62 78 50 Q78 38 90 38 Q102 38 102 50'/%3E%3Cpath d='M80 110 Q80 98 92 98 Q104 98 104 110 Q104 122 116 122 Q128 122 128 110' opacity='0.6'/%3E%3Cpath d='M10 130 Q10 122 18 122 Q26 122 26 130' opacity='0.4'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 160px 160px;
}

/* Hero 动态光晕 */
.hero::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(196,145,92,.06) 0%, transparent 40%);
    animation: hero-glow 8s ease-in-out infinite alternate;
}

@keyframes hero-glow {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(10%, 10%) rotate(180deg); }
}

/* Hero 印章装饰 — 右上角 */
.hero .seal-corner {
    position: absolute;
    top: 1.2rem; right: 1.5rem;
    width: 64px; height: 64px;
    opacity: .12;
    pointer-events: none;
    z-index: 0;
}

/* ================================================================
   3. 卡片顶部 — 朱砂印章细线
   ================================================================ */

.novel-card {
    animation: fadeInCard .4s ease backwards;
}

/* 卡片错位入场 */
.novel-card:nth-child(1) { animation-delay: .05s; }
.novel-card:nth-child(2) { animation-delay: .1s; }
.novel-card:nth-child(3) { animation-delay: .15s; }
.novel-card:nth-child(4) { animation-delay: .2s; }
.novel-card:nth-child(5) { animation-delay: .25s; }
.novel-card:nth-child(6) { animation-delay: .3s; }
.novel-card:nth-child(7) { animation-delay: .35s; }
.novel-card:nth-child(8) { animation-delay: .4s; }

@keyframes fadeInCard {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   4. 阅读页 — 卷云纹背景 + 段落淡入 + 引用 + 毛笔分隔
   ================================================================ */

.reader-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: calc(var(--cloud-opacity) * 0.6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%237b4a2d' stroke-width='1' opacity='0.8'%3E%3Cpath d='M25 45 Q25 35 35 35 Q45 35 45 45 Q45 55 55 55 Q65 55 65 45'/%3E%3Cpath d='M75 95 Q75 85 85 85 Q95 85 95 95' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 140px 140px;
    border-radius: var(--radius-lg);
}

.reader-content > * {
    position: relative;
    z-index: 1;
}

/* 阅读页段落淡入 */
.reader-content p {
    animation: fadeInText .5s ease;
}
@keyframes fadeInText {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

/* 章节间分隔装饰 */
.reader-content + .reader-nav {
    position: relative;
}
.reader-content + .reader-nav::before {
    content: '◆';
    position: absolute;
    top: -1.5rem; left: 50%; transform: translateX(-50%);
    color: var(--accent);
    opacity: .3;
    font-size: .8rem;
}

/* ================================================================
   5. 空状态 — 插画浮动 + 入场
   ================================================================ */

.empty {
    animation: fadeInUp .5s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.empty-illustration {
    width: 96px; height: 96px;
    margin-bottom: 1rem;
    opacity: .7;
    animation: emptyFloat 3s ease-in-out infinite;
}

@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ================================================================
   6. Footer — 卷云纹背景 + 印章
   ================================================================ */

footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23c4915c' stroke-width='1'%3E%3Cpath d='M20 35 Q20 25 30 25 Q40 25 40 35 Q40 45 50 45 Q60 45 60 35'/%3E%3Cpath d='M60 70 Q60 60 70 60 Q80 60 80 70' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 100px 100px;
}

.footer-brand::after {
    content: '印';
    position: absolute;
    top: -8px; right: -28px;
    width: 22px; height: 22px;
    font-size: .6rem;
    color: var(--seal-red);
    border: 1.5px solid var(--seal-red);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .4;
    font-family: var(--serif);
    transition: var(--transition);
}
.footer-brand:hover::after { opacity: .7; transform: rotate(-3deg); }

/* ================================================================
   7. 导航栏 — 卷云纹底纹
   ================================================================ */

#navbar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60' viewBox='0 0 80 60'%3E%3Cg fill='none' stroke='%23c4915c' stroke-width='1'%3E%3Cpath d='M10 20 Q10 15 15 15 Q20 15 20 20 Q20 25 25 25 Q30 25 30 20'/%3E%3Cpath d='M50 40 Q50 35 55 35 Q60 35 60 40' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 80px 60px;
}

/* ================================================================
   8. 通用卡片装饰 — 右上角印章点缀
   ================================================================ */

.chapter-list::before,
.form-card::before {
    content: '';
    position: absolute;
    top: 8px; right: 8px;
    width: 32px; height: 32px;
    border: 1.5px solid var(--accent);
    border-radius: 3px;
    opacity: .06;
    pointer-events: none;
    z-index: 0;
}

/* ================================================================
   9. 全局淡入 — 页面切换
   ================================================================ */

main > * {
    animation: fadeInUp .4s ease;
}

.section-title {
    animation: fadeInLeft .4s ease;
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-15px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ================================================================
   10. 评分输入 hover — 弹性放大
   ================================================================ */

.star-interactive { transition: transform .2s cubic-bezier(.34,1.56,.64,1); }

/* ================================================================
   11. 响应式适配
   ================================================================ */

@media (max-width: 768px) {
    .hero .seal-corner {
        width: 48px; height: 48px;
        top: .8rem; right: .8rem;
    }
    .novel-card:hover {
        transform: translateY(-4px) scale(1);
    }
}

@media (max-width: 480px) {
    .empty-illustration {
        width: 72px; height: 72px;
    }
    .footer-brand::after {
        width: 18px; height: 18px;
        font-size: .5rem;
        right: -22px; top: -6px;
    }
}

/* ================================================================
   12. 减动效偏好 — 关闭所有装饰动画
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .hero::after,
    .empty-illustration,
    .announcement-badge,
    .announcement-dot,
    .novel-card,
    main > *,
    .reader-content p,
    .section-title,
    .star-interactive {
        animation: none !important;
        transition-duration: 0.01s !important;
    }
}