/* ========================================
   祥麟集 - 国潮非遗风格统一样式
   ======================================== */

/* 字体引入 */
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@300;400;500;700;900&family=ZCOOL+KuaiLe&display=swap');

/* 基础设置 */
body {
    font-family: 'Noto Serif SC', serif;
    background-color: #1A1A1A;
    color: #F8F4E8;
}

/* 国潮标题装饰 */
.chinese-title {
    font-family: 'Ma Shan Zheng', cursive;
    position: relative;
    display: inline-block;
    color: #D4AF37;
    padding: 0 30px;
}

.chinese-title::before,
.chinese-title::after {
    content: '◆';
    color: #C8102E;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6em;
}

.chinese-title::before {
    left: 0;
}

.chinese-title::after {
    right: 0;
}

/* 传统印章样式 */
.seal-stamp {
    display: inline-block;
    padding: 8px 16px;
    border: 3px solid #C8102E;
    border-radius: 4px;
    color: #C8102E;
    font-family: 'ZCOOL KuaiLe', cursive;
    font-weight: bold;
    background: rgba(200, 16, 46, 0.05);
    box-shadow: inset 0 0 0 2px rgba(200, 16, 46, 0.1);
}

/* 中国风边框 */
.chinese-border {
    position: relative;
    border: 2px solid #D4AF37;
    padding: 24px;
}

.chinese-border::before,
.chinese-border::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid #C8102E;
}

.chinese-border::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.chinese-border::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

/* 传统云纹背景 - 增强版 */
.cloud-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.8' opacity='0.12'%3E%3Cpath d='M20 40C20 30 30 20 40 20C50 20 60 30 60 40C70 40 80 50 80 60C90 60 100 50 100 40C100 30 90 20 80 20C70 20 60 30 60 40C60 50 50 60 40 60C30 60 20 50 20 40Z'/%3E%3Cpath d='M70 80C70 70 80 60 90 60C100 60 110 70 110 80C110 90 100 100 90 100C80 100 70 90 70 80Z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 120px 120px;
}

/* 传统回纹背景 - 增强版 */
.meander-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.6' opacity='0.1'%3E%3Cpath d='M0 0L15 0L15 15M30 0L30 15L45 15L45 30M60 0L60 15L45 15M60 30L45 30L45 45M60 60L45 60L45 45M30 60L30 45L15 45L15 30M0 60L15 60L15 45L0 45M0 30L15 30L15 15L0 15'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 60px 60px;
}

/* 祥云纹背景 - 新增 */
.xiangyun-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C8102E' stroke-width='0.5' opacity='0.08'%3E%3Cpath d='M10 30C10 20 20 10 30 10C40 10 50 20 50 30C60 30 70 40 70 50C70 60 60 70 50 70C40 70 30 60 30 50C30 40 20 30 10 30Z'/%3E%3Ccircle cx='30' cy='30' r='3' fill='%23D4AF37' opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%23D4AF37' opacity='0.08'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 80px 80px;
}

/* 麒麟纹背景 - 新增 */
.qilin-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.5' opacity='0.06'%3E%3Cpath d='M30 20C35 15 45 15 50 20C55 15 65 15 70 20C75 25 75 35 70 40C75 45 75 55 70 60C65 65 55 65 50 60C45 65 35 65 30 60C25 55 25 45 30 40C25 35 25 25 30 20Z'/%3E%3Ccircle cx='50' cy='40' r='5'/%3E%3Cpath d='M50 20L50 10M50 90L50 80M10 40L20 40M80 40L90 40'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 100px 100px;
}

/* 如意纹背景 - 新增 */
.ruyi-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='90' height='90' viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.7' opacity='0.09'%3E%3Cpath d='M45 10C55 10 65 20 65 30C65 35 70 40 75 40C85 40 90 35 90 30C90 15 75 0 60 0C50 0 40 10 40 20C40 30 30 40 20 40C10 40 0 35 0 30C0 15 15 0 30 0'/%3E%3Ccircle cx='45' cy='45' r='3' fill='%23C8102E' opacity='0.1'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 90px 90px;
}

/* 综合非遗纹样背景 - 多种纹样组合 */
.heritage-pattern {
    background-image:
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.5' opacity='0.06'%3E%3Cpath d='M20 40C20 30 30 20 40 20C50 20 60 30 60 40C70 40 80 50 80 60C90 60 100 50 100 40C100 30 90 20 80 20C70 20 60 30 60 40C60 50 50 60 40 60C30 60 20 50 20 40Z'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='2' fill='%23C8102E' opacity='0.05'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23D4AF37' opacity='0.08'/%3E%3Ccircle cx='60' cy='60' r='1.5' fill='%23D4AF37' opacity='0.08'/%3E%3C/svg%3E");
    background-repeat: repeat, repeat;
    background-size: 120px 120px, 60px 60px;
}

/* 渐变祥云背景 - 用于重要区域 */
.cloud-gradient-bg {
    background:
        linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(26, 26, 26, 0.85) 100%),
        url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.5' opacity='0.08'%3E%3Cpath d='M20 50C20 35 35 20 50 20C65 20 80 35 80 50C95 50 110 65 110 80C110 95 95 110 80 110C65 110 50 95 50 80C50 65 35 50 20 50Z'/%3E%3Cpath d='M90 40C90 25 105 10 120 10C135 10 150 25 150 40'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: cover, 150px 150px;
}

/* 国潮按钮样式 */
.btn-chinese {
    background: linear-gradient(135deg, #C8102E, #A63D29);
    color: #F8F4E8;
    border: 1px solid #D4AF37;
    padding: 12px 32px;
    font-family: 'ZCOOL KuaiLe', cursive;
    font-size: 1.1em;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(200, 16, 46, 0.3), inset 0 1px 0 rgba(212, 175, 55, 0.2);
}

.btn-chinese::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    transition: left 0.5s;
}

.btn-chinese:hover::before {
    left: 100%;
}

.btn-chinese:hover {
    background: linear-gradient(135deg, #A63D29, #C8102E);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(200, 16, 46, 0.3), 0 0 30px rgba(212, 175, 55, 0.2);
}

/* 主按钮样式 - 靛青色 */
.btn-primary {
    background: linear-gradient(135deg, #2C5F8D, #1E4D8C);
    color: #F8F4E8;
    border: 1px solid #D4AF37;
    padding: 10px 24px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(44, 95, 141, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1E4D8C, #2C5F8D);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(44, 95, 141, 0.4);
}

/* 次要按钮样式 */
.btn-outline {
    background: transparent;
    color: #D4AF37;
    border: 2px solid #D4AF37;
    padding: 10px 24px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: rgba(212, 175, 55, 0.1);
    color: #F8F4E8;
    border-color: #F8F4E8;
}

/* 卡片传统装饰 */
.card-traditional {
    position: relative;
    background: rgba(42, 42, 42, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-traditional::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    pointer-events: none;
}

.card-traditional:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(212, 175, 55, 0.15), 0 10px 10px -5px rgba(200, 16, 46, 0.1);
    border-color: rgba(212, 175, 55, 0.5);
}

/* 卡片四角装饰 - 用于产品卡片 */
.card-corners {
    position: relative;
}

.card-corners::before,
.card-corners::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: #D4AF37;
    border-style: solid;
    pointer-events: none;
}

.card-corners::before {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
}

.card-corners::after {
    bottom: 0;
    right: 0;
    border-width: 0 2px 2px 0;
}

/* 祥云边框装饰 */
.cloud-border {
    position: relative;
    border: 2px solid transparent;
    background:
        linear-gradient(#1A1A1A, #1A1A1A) padding-box,
        linear-gradient(135deg, #D4AF37, #C8102E, #D4AF37) border-box;
    padding: 20px;
}

/* 传统纹理背景卡片 */
.card-texture {
    background:
        linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(42, 42, 42, 0.85)),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.3' opacity='0.05'%3E%3Cpath d='M0 0L15 0L15 15M30 0L30 15L45 15L45 30M60 0L60 15L45 15M60 30L45 30L45 45M60 60L45 60L45 45M30 60L30 45L15 45L15 30M0 60L15 60L15 45L0 45M0 30L15 30L15 15L0 15'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover, 60px 60px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    position: relative;
}

.card-texture::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 1px solid rgba(212, 175, 55, 0.15);
    pointer-events: none;
}

/* 分隔线装饰 */
.divider-chinese {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 32px 0;
}

.divider-chinese::before,
.divider-chinese::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

.divider-chinese::before {
    margin-right: 16px;
}

.divider-chinese::after {
    margin-left: 16px;
}

.divider-chinese span {
    color: #D4AF37;
    font-size: 1.5em;
    padding: 0 16px;
}

/* 竖排文字 */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Kaiti SC', 'STKaiti', KaiTi, serif;
    letter-spacing: 0.2em;
}

/* 水墨效果 */
.ink-wash {
    position: relative;
}

.ink-wash::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(26, 26, 26, 0.3) 100%);
    pointer-events: none;
}

/* 金色文字渐变 */
.gold-text {
    background: linear-gradient(135deg, #D4AF37 0%, #F8D878 50%, #D4AF37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 标签装饰 */
.tag-chinese {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.2), rgba(166, 61, 41, 0.2));
    border: 1px solid #C8102E;
    color: #F8F4E8;
    font-size: 0.85em;
    font-family: 'ZCOOL KuaiLe', cursive;
}

/* 价格标签国潮风格 */
.price-tag {
    display: inline-block;
    background: linear-gradient(135deg, #C8102E, #A63D29);
    color: #F8F4E8;
    padding: 8px 20px;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 1.8em;
    position: relative;
}

.price-tag::before {
    content: '¥';
    font-size: 0.6em;
    margin-right: 4px;
}

/* 导航链接国潮样式 */
.nav-link-chinese {
    position: relative;
    padding: 8px 16px;
    font-family: 'ZCOOL KuaiLe', cursive;
    transition: all 0.3s ease;
}

.nav-link-chinese::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
    transition: width 0.3s ease;
}

.nav-link-chinese:hover::after,
.nav-link-chinese.active::after {
    width: 100%;
}

/* 页脚装饰 */
.footer-decoration {
    position: relative;
    padding-top: 32px;
}

.footer-decoration::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .chinese-title {
        font-size: 1.5em;
        padding: 0 20px;
    }

    .card-traditional {
        padding: 16px;
    }

    .btn-chinese {
        padding: 10px 24px;
        font-size: 1em;
    }
}

/* 动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.shimmer {
    background: linear-gradient(90deg, #D4AF37 0%, #F8D878 50%, #D4AF37 100%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
    -webkit-background-clip: text;
    background-clip: text;
}