/* 国风美化样式 - 云间传书 */

/* 全局变量 */
:root {
    --ink-black: #333333;      /* 墨黑 */
    --jade-green: #0f4959;     /* 翡翠绿（兼容）→孔雀蓝 */
    --peacock-blue: #0f4959;   /* 孔雀蓝 */
    --light-jade: #88b3a7;     /* 浅翠 */
    --rice-white: #f9f7f1;     /* 宣纸白 */
    --paper-white: #f9f7f1;    /* 宣纸白 */
    --bamboo-green: #73a0a6;   /* 莲瓣靛（兼容旧变量名） */
    --lotus-blue: #73a0a6;     /* 莲瓣靛 */
    --cinnabar-red: #9d3026;   /* 朱砂红（宫墙红） */
    --palace-red: #9d3026;     /* 宫墙红 */
    --ochre-yellow: #d9a86c;   /* 赭黄 */
    --porcelain-blue: #81a2be; /* 青瓷蓝 */
    --cloud-gray: #e9e6df;     /* 云灰 */
    --mountain-shadow: #7a8b99; /* 山影 */
    
    /* 字体设置 */
    --font-kai: 'LXGW WenKai', 'FZKai-Z03S', 'STKaiti', 'KaiTi', 'SimKai', 'Kaiti SC', 'Kaiti TC', 'Kai', '楷体', serif;
    --font-song: 'Noto Serif SC', 'SimSun', 'Songti SC', 'Songti TC', 'Song', '宋体', serif;
    --font-hei: 'Noto Sans SC', 'SimHei', 'Heiti SC', 'Heiti TC', 'Hei', '黑体', sans-serif;
}

/* 全局样式 */
body {
    font-family: var(--font-song);
    color: var(--ink-black);
    background-color: var(--rice-white);
    background-image: url('../background/chinese-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
}

/* 云纹整体底纹 - 静态铺陈 */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url('../background/cloud-pattern.svg');
    background-repeat: repeat;
    background-size: 360px 360px;
    opacity: 0.05;
    z-index: -2;
}

/* 移动端背景适配 */
@media (max-width: 768px) {
    body {
        background-image: url('../background/chinese-bg-mobile.jpg');
    }
}

/* 主面板 - 卷轴风格 */
.main-panel {
    background-color: rgba(247, 245, 232, 0.85);
    background-image: 
        url('../background/paper-texture.png'),
        url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><defs><pattern id="bambooLeaf" width="400" height="400" patternUnits="userSpaceOnUse"><ellipse cx="80" cy="120" rx="25" ry="4" fill="rgba(93, 139, 124, 0.03)" transform="rotate(45 80 120)"/><ellipse cx="200" cy="80" rx="30" ry="5" fill="rgba(93, 139, 124, 0.04)" transform="rotate(-30 200 80)"/><ellipse cx="320" cy="200" rx="20" ry="3" fill="rgba(93, 139, 124, 0.03)" transform="rotate(60 320 200)"/><ellipse cx="150" cy="300" rx="28" ry="4" fill="rgba(93, 139, 124, 0.03)" transform="rotate(-45 150 300)"/><ellipse cx="350" cy="350" rx="22" ry="3" fill="rgba(93, 139, 124, 0.04)" transform="rotate(30 350 350)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23bambooLeaf)"/></svg>'),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.02) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.02) 0 2px, transparent 2px 4px);
    border: 1px solid rgba(93, 139, 124, 0.3);
    box-shadow: 0 8px 32px rgba(58, 117, 99, 0.15);
    position: relative;
    border-top: 2px solid var(--palace-red);
    padding-bottom: 0.1rem;
}

/* 卷轴装饰 */
.main-panel::before,
.main-panel::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 30px;
    top: 0;
    background-image: url('../background/scroll-edge.png');
    background-size: 30px 100%;
    background-repeat: repeat-y;
    z-index: 1;
}

.main-panel::before {
    left: -15px;
}

.main-panel::after {
    right: -15px;
    transform: scaleX(-1);
}

/* 标题样式 */
.logo h1 {
    font-family: var(--font-kai);
    color: var(--jade-green);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 2px;
}

/* 徽章样式 */
.header-info .badge {
    background-color: rgba(93, 139, 124, 0.1);
    color: var(--jade-green);
    border: 1px solid rgba(93, 139, 124, 0.2);
    font-family: var(--font-kai);
}

/* 上传区域 */
.upload-area {
    border: 2px dashed var(--light-jade);
    background: rgba(247, 245, 232, 0.5);
    transition: all 0.4s ease;
}

.upload-area:hover {
    border-color: var(--jade-green);
    background-color: rgba(232, 245, 233, 0.5);
}

.upload-icon i {
    color: var(--jade-green);
}

.upload-text h2 {
    font-family: var(--font-kai);
    color: var(--jade-green);
}

.btn-link {
    color: var(--jade-green);
    font-family: var(--font-kai);
}

.btn-link:hover {
    color: var(--bamboo-green);
}

/* 按钮样式 */
.btn-secondary {
    background-color: var(--palace-red);
    color: #ffffff;
    transition: all 0.3s ease;
    font-family: var(--font-kai);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(157, 48, 38, 0.3);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(157, 48, 38, 0.4);
    animation: stroke 1.2s ease-out;
}

@keyframes stroke {
    0% { box-shadow: 0 0 0 0 rgba(157, 48, 38, 0.4); }
    70% { box-shadow: 0 0 10px 6px rgba(157, 48, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(157, 48, 38, 0); }
}

/* 特性卡片 */
.feature-card, .stat-card {
    background: rgba(247, 245, 232, 0.6);
    border: 1px solid rgba(93, 139, 124, 0.2);
    box-shadow: 0 4px 12px rgba(93, 139, 124, 0.1);
}

.feature-card:hover {
    box-shadow: 0 8px 20px rgba(93, 139, 124, 0.15);
}

.feature-icon i {
    color: var(--jade-green);
}

.feature-card h3 {
    font-family: var(--font-kai);
    color: var(--jade-green);
}

.stat-number {
    color: var(--jade-green);
    font-family: var(--font-song);
}

/* 分隔线 - 水墨风格 */
.section-divider {
    height: 20px;
    background-image: url('../background/ink-divider.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    margin: 2rem 0;
    opacity: 0.7;
}

/* 结果区域 */
.results-header {
    background: linear-gradient(135deg, rgba(93, 139, 124, 0.08), rgba(93, 139, 124, 0.04));
    border: 1px solid rgba(93, 139, 124, 0.15);
}

.results-header h3 {
    color: var(--jade-green);
    font-family: var(--font-kai);
}

.result-item {
    background: rgba(247, 245, 232, 0.6);
    border: 1px solid rgba(93, 139, 124, 0.12);
    box-shadow: 0 4px 16px rgba(93, 139, 124, 0.06);
    position: relative;
    transform-origin: left center;
    transform: scaleX(0.8) rotateY(-20deg);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease;
}

.result-item.success {
    border-left: 4px solid var(--jade-green);
}

.result-item.error {
    border-left: 4px solid var(--cinnabar-red);
}

.result-item.show {
    transform: none;
    opacity: 1;
}

/* 链接样式 */
.link-label {
    color: var(--jade-green);
    background: rgba(93, 139, 124, 0.08);
    font-family: var(--font-kai);
}

.link-btn.copy {
    background: linear-gradient(45deg, var(--jade-green), var(--bamboo-green));
}

/* 通知样式 */
.notification-content {
    background: rgba(247, 245, 232, 0.95);
    border: 1px solid rgba(93, 139, 124, 0.2);
}

.notification.success .notification-content {
    border-left: 4px solid var(--jade-green);
}

.notification.error .notification-content {
    border-left: 4px solid var(--cinnabar-red);
}

.notification.warning .notification-content {
    border-left: 4px solid var(--ochre-yellow);
}

/* 音乐控制按钮 */
.music-control-btn {
    background: linear-gradient(135deg, rgba(93, 139, 124, 0.9), rgba(93, 139, 124, 0.7));
    box-shadow: 0 4px 15px rgba(93, 139, 124, 0.3);
}

.music-control-btn:hover {
    background: linear-gradient(135deg, rgba(93, 139, 124, 1), rgba(93, 139, 124, 0.8));
    box-shadow: 0 6px 20px rgba(93, 139, 124, 0.4);
}

/* 中国风装饰元素 */
.chinese-decoration {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

.decoration-top-left {
    top: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
    background-image: url('../background/decoration-top-left.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.decoration-top-right {
    top: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
    background-image: url('../background/decoration-top-right.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.decoration-bottom-left {
    bottom: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
    background-image: url('../background/decoration-bottom-left.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.decoration-bottom-right {
    bottom: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
    background-image: url('../background/decoration-bottom-right.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .chinese-decoration {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 480px) {
    .chinese-decoration {
        width: 35px;
        height: 35px;
        opacity: 0.4;
    }
}

/* 动画效果 */
@keyframes floatCloud {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-10px) translateX(5px);
    }
}

@keyframes inkDrop {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.2) translateY(10px);
    }
}

/* 水墨动画效果 */
.ink-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.ink-drop {
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url('../background/ink-drop.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    animation: inkDrop 8s ease-in-out infinite;
}

.ink-drop:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.ink-drop:nth-child(2) {
    top: 30%;
    right: 20%;
    animation-delay: 2s;
}

.ink-drop:nth-child(3) {
    bottom: 15%;
    left: 30%;
    animation-delay: 4s;
}

.ink-drop:nth-child(4) {
    bottom: 30%;
    right: 10%;
    animation-delay: 6s;
}

/* 朱印钤章 */
.stamp-red {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 60px;
    height: 60px;
    background-image: url('../background/stamp.svg');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    animation: stampFade 1s forwards;
    pointer-events: none;
}

@keyframes stampFade {
    0% { opacity: 0; transform: scale(0.8) rotate(-10deg); }
    20% { opacity: 0.6; transform: scale(1) rotate(0deg); }
    100% { opacity: 0; transform: scale(1.1) rotate(5deg); }
}

/* 墨迹流淌进度条 */
.progress-fill {
    position: relative;
    overflow: hidden;
}

.progress-fill.uploading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: radial-gradient(circle at 10% 50%, rgba(157,48,38,0.8) 0%, rgba(157,48,38,0.2) 30%, transparent 60%);
    animation: inkFlow 2s linear infinite;
}

@keyframes inkFlow {
    from { transform: translateX(0); }
    to { transform: translateX(50%); }
}

/* 落花粒子 */
.petal {
    position: fixed;
    top: -10vh;
    width: 24px;
    height: 24px;
    background-image: url('../background/petal.svg');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
    pointer-events: none;
    z-index: 9999;
    animation-name: fallPetal, swayPetal;
    animation-timing-function: linear;
}
@keyframes fallPetal {
    0% { transform: translateY(-10vh) rotate(0deg); }
    100% { transform: translateY(120vh) rotate(360deg); }
}
@keyframes swayPetal {
    0%, 100% { margin-left: 0; }
    50% { margin-left: 40px; }
}

/* ===== 新增：宣纸纤维纹理（极浅） ===== */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url('../background/paper-texture.png');
    background-repeat: repeat;
    background-size: 600px 600px; /* 纹理尺度 */
    opacity: 0.03;
    z-index: -3; /* 位于云纹之下，背景之上 */
}

/* ===== 夜间暗色主题：烛火金 ===== */
body.night-theme {
    background-color: #13100c;
    color: #f6eac1;
}

body.night-theme .main-panel {
    background-color: rgba(40, 34, 24, 0.85);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

body.night-theme .logo i,
body.night-theme .logo h1,
body.night-theme .feature-icon i,
body.night-theme .feature-card h3,
body.night-theme .stat-number {
    color: #d9a86c;
}

body.night-theme .btn-link,
body.night-theme .header-info .badge {
    color: #d9a86c;
}

body.night-theme .upload-area {
    border-color: #5e4c2f;
}

body.night-theme .poem,
body.night-theme .poem-footer {
    color: #d9a86c;
}

/* 云纹在暗色下稍微降低可见度 */
body.night-theme::after {
    opacity: 0.03;
}

.poem-footer {
    text-align: center;
    margin: 2rem 0 1rem;
    font-family: var(--font-kai);
    color: #5a6165;
    line-height: 1.8;
    white-space: pre-line; /* 保留换行 */
}

.poem-box {
    text-align: center;
    font-family: var(--font-kai);
    margin: 1rem 0 0.01rem;
    color: #5a6165;
    opacity: 0.9;
}

#jinrishici-sentence {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1.6;
    white-space: pre-line;
}

body.night-theme .poem-box,
body.night-theme #jinrishici-sentence {
    color: #d9a86c;
}