/* ==========================================================================
   水云间 · 痒痒鼠笔记 —— 阴阳师和风主题增强（共享样式）
   在各页面内联 <style> 之后引入，用于增量覆盖与新增装饰组件。
   组件清单：
     .yys-banner            页面顶部插画横幅（配合 [data-image] 或 [data-random]）
     .yys-banner-inner/.yys-banner-title/.yys-banner-sub   横幅文案
     .yys-hero-slides/.yys-hero-slide                     hero 区插画轮播
     .yys-title             衬线大标题（金色渐变文字）
     .yys-card              金色双线边框 + 边角纹饰卡片
     .yys-btn               华丽金色按钮（页面现有 .btn-gold/.feature-btn 等同样受益）
   另外对页面现有元素做华丽化增强：.nav/.top-nav 导航纹理与金线、
   .btn 系列 hover 光晕、.feature-card hover 金边发光、.note-card/.dj-card/.article-card
   边角纹饰、.page-title 金色渐变文字。
   ========================================================================== */

:root {
    --yys-gold: #c9a44a;
    --yys-gold-light: #e8c87e;
    --yys-gold-dark: #8a6420;
    --yys-red: #b5433a;
    --yys-brown: #2c1810;
    --yys-cream: #f4eee0;
    --yys-banner-img: none;
    --yys-hero-img: none;
}

/* ---------- 全页纸纹 / 云纹底（低透明度，叠加在各页 body 背景上） ---------- */
body {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23a8842e' stroke-width='0.5' opacity='0.055'><path d='M30,80 Q50,60 70,80 T110,80 T150,80 T190,80'/><path d='M10,150 Q30,130 50,150 T90,150 T130,150 T170,150 T210,150'/><path d='M60,40 Q80,24 100,40 T140,40'/><circle cx='160' cy='110' r='1.4'/><circle cx='40' cy='120' r='1.4'/></g></svg>");
    background-size: 420px 420px;
}

/* ==========================================================================
   1. 页面顶部横幅 .yys-banner
   用法：<div class="yys-banner" data-random></div>
        data-image="/img/official/xxx.jpg"  指定插画
        data-random                          从 /api/official_images 随机取一张
   亦可与 teams.html 现有 .page-banner 组合：class="page-banner yys-banner-random"
   ========================================================================== */
.yys-banner {
    position: relative;
    height: 180px;
    overflow: hidden;
    isolation: isolate;
    background-color: #3a2418;
    background-image:
        var(--yys-banner-img),
        radial-gradient(ellipse 90% 70% at 50% 38%, #6a4028 0%, #3a2418 55%, #241209 100%);
    background-size: cover, auto;
    background-position: center 30%, center;
    background-repeat: no-repeat, no-repeat;
    border-bottom: 1px solid rgba(201, 164, 74, 0.55);
    box-shadow: 0 6px 24px rgba(60, 40, 20, 0.28);
}
/* 底部金色渐变遮罩，融入页面米黄背景 */
.yys-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(44, 24, 16, 0.22) 0%,
        rgba(44, 24, 16, 0) 34%,
        rgba(244, 238, 224, 0.45) 80%,
        var(--yys-cream) 100%);
}
/* 金色云纹浮层 */
.yys-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.55;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'><g fill='none' stroke='%23e8c87e' stroke-width='0.7' opacity='0.35'><path d='M40,90 Q80,55 120,90 T200,90 T280,90 T360,90'/><path d='M0,150 Q40,185 80,150 T160,150 T240,150 T320,150 T400,150'/><path d='M90,30 Q125,58 160,30 T230,30 T300,30'/></g></svg>");
    background-size: 560px 280px;
    background-repeat: repeat;
}
/* 顶部细金边 */
.yys-banner .yys-banner-gilt {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 3;
    background: linear-gradient(90deg, transparent, var(--yys-gold) 25%, var(--yys-gold-light) 50%, var(--yys-gold) 75%, transparent);
}
.yys-banner-inner {
    position: absolute;
    left: 0; right: 0;
    bottom: 20px;
    z-index: 3;
    text-align: center;
    pointer-events: none;
}
.yys-banner-title {
    font-family: 'STKaiti', 'KaiTi', 'Microsoft YaHei', serif;
    font-size: 1.9em;
    letter-spacing: 12px;
    color: #6a4a12;
    text-shadow: 0 1px 8px rgba(255, 250, 235, 0.9);
}
.yys-banner-sub {
    margin-top: 6px;
    font-size: 0.85em;
    letter-spacing: 5px;
    color: #8a6a2a;
    text-shadow: 0 1px 6px rgba(255, 250, 235, 0.9);
}

/* teams.html 现有横幅：仅替换背景图为随机官方插画（保留原有结构与标题） */
.page-banner.yys-banner-random {
    background-image: var(--yys-banner-img, url('/img/thumb/banner_top.jpg'));
    background-size: cover;
    background-position: center 28%;
    box-shadow: 0 8px 32px rgba(120, 90, 40, 0.3), 0 0 0 1px rgba(232, 200, 126, 0.28);
}

/* ==========================================================================
   2. hero 区插画轮播（index.html）
   用法：<div class="yys-hero-slides"><div class="yys-hero-slide"></div>×3</div>
   放在 .hero 内、静态兜底背景之上；JS 从 /api/official_images 取 3 张填入。
   ========================================================================== */
.yys-hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.yys-hero-slide {
    position: absolute;
    inset: 0;
    background-image: var(--yys-hero-img);
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: yysHeroFade 24s linear infinite;
    will-change: opacity;
}
.yys-hero-slide:nth-child(1) { animation-delay: 0s; }
.yys-hero-slide:nth-child(2) { animation-delay: -16s; }
.yys-hero-slide:nth-child(3) { animation-delay: -8s; }
/* 每张约 8s：0-28% 全亮，28-36% 淡出，92-100% 淡入（与上一张交叉） */
@keyframes yysHeroFade {
    0%   { opacity: 1; }
    28%  { opacity: 1; }
    36%  { opacity: 0; }
    92%  { opacity: 0; }
    100% { opacity: 1; }
}
/* 降级：移动端 / 减少动态 → 仅静态显示第一张 */
@media (max-width: 640px) {
    .yys-hero-slide { animation: none; }
    .yys-hero-slide:nth-child(n+2) { display: none; }
    .yys-hero-slide:nth-child(1) { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .yys-hero-slide { animation: none; }
    .yys-hero-slide:nth-child(n+2) { display: none; }
    .yys-hero-slide:nth-child(1) { opacity: 1; }
}

/* ==========================================================================
   3. 导航栏华丽化（.nav：notes/mindmap；.top-nav：index）
   ========================================================================== */
/* 云纹 + 棕底双层背景 */
.nav {
    position: relative;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100'><g fill='none' stroke='%23e8c87e' stroke-width='0.6' opacity='0.14'><path d='M30,50 Q55,28 80,50 T130,50 T180,50 T230,50 T280,50'/><path d='M10,80 Q35,98 60,80 T110,80 T160,80 T210,80 T260,80'/></g></svg>"),
        linear-gradient(135deg, #2c1810, #4a2820);
    background-size: 300px 100px, auto;
}
/* 底部金色渐变下划线 */
.nav::after,
.top-nav::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 164, 74, 0.2) 12%,
        var(--yys-gold) 35%,
        var(--yys-gold-light) 50%,
        var(--yys-gold) 65%,
        rgba(201, 164, 74, 0.2) 88%,
        transparent 100%);
    pointer-events: none;
}
/* index 顶部悬浮导航：保留半透明质感，叠加云纹 + 金线 */
.top-nav {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100'><g fill='none' stroke='%23e8c87e' stroke-width='0.6' opacity='0.12'><path d='M30,50 Q55,28 80,50 T130,50 T180,50 T230,50 T280,50'/><path d='M10,80 Q35,98 60,80 T110,80 T160,80 T210,80 T260,80'/></g></svg>");
    background-size: 300px 100px;
}
/* 导航链接 hover 金线下划 */
.nav .nav-link { position: relative; }
.nav .nav-link::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: 3px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--yys-gold-light), transparent);
    transform: scaleX(0);
    transition: transform 0.25s ease;
}
.nav .nav-link:hover::after,
.nav .nav-link.active::after { transform: scaleX(1); }
/* 导航按钮 hover 微光 */
.top-nav .nav-btn,
.top-nav .nav-user {
    box-shadow: inset 0 1px 0 rgba(232, 200, 126, 0.18);
    transition: all 0.25s;
}
.top-nav .nav-btn:hover {
    box-shadow: inset 0 1px 0 rgba(232, 200, 126, 0.28), 0 0 14px rgba(232, 200, 126, 0.35);
}

/* teams 左侧栏：淡云纹叠加，去素 */
.sidebar {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23a8842e' stroke-width='0.5' opacity='0.07'><path d='M30,80 Q50,60 70,80 T110,80 T150,80 T190,80'/><path d='M10,150 Q30,130 50,150 T90,150 T130,150 T170,150'/></g></svg>");
    background-size: 320px 320px;
}

/* ==========================================================================
   4. 按钮华丽化（页面现有按钮类直接受益）
   ========================================================================== */
.yys-btn,
.btn-gold,
.btn-primary,
.feature-btn {
    text-shadow: 0 1px 2px rgba(90, 60, 10, 0.4);
    box-shadow: 0 4px 14px rgba(168, 132, 46, 0.35),
                inset 0 1px 0 rgba(255, 246, 220, 0.45);
    transition: all 0.25s;
}
.btn-gold:hover:not(:disabled),
.feature-btn:hover,
.yys-btn:hover {
    box-shadow: 0 6px 22px rgba(201, 164, 74, 0.55),
                0 0 18px rgba(232, 200, 126, 0.5),
                inset 0 1px 0 rgba(255, 246, 220, 0.55);
    filter: brightness(1.05);
}
.btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(181, 67, 58, 0.5),
                0 0 16px rgba(232, 200, 126, 0.35),
                inset 0 1px 0 rgba(255, 235, 220, 0.35);
}
.btn-outline:hover:not(:disabled),
.btn-plain:hover:not(:disabled),
.btn-ghost:hover:not(:disabled),
.nav-link:hover {
    box-shadow: 0 0 12px rgba(201, 164, 74, 0.28);
}
/* 明确的华丽按钮组件（金渐变 + 圆角装饰），新代码可直接使用 */
.yys-btn {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid rgba(138, 100, 32, 0.55);
    border-radius: 8px;
    background: linear-gradient(160deg, #e8c87e 0%, #c9a44a 40%, #a8842e 100%);
    color: #fff8ee;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: bold;
    letter-spacing: 3px;
    cursor: pointer;
    text-decoration: none;
}

/* ==========================================================================
   5. 卡片华丽化：金色双线边框 + 边角纹饰 + hover 发光
   ========================================================================== */
.yys-card {
    position: relative;
    border: 1px solid rgba(201, 164, 74, 0.45);
    outline: 1px solid rgba(201, 164, 74, 0.18);
    outline-offset: 3px;
    border-radius: 12px;
    background: linear-gradient(150deg, #fffdf6, #fdf8ea);
    box-shadow: 0 6px 24px rgba(140, 110, 50, 0.12);
}
/* 右上角边角纹饰（卷草纹双弧线） */
.yys-card::before,
.note-card::after,
.dj-card::after,
.article-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    pointer-events: none;
    opacity: 0.65;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><g fill='none' stroke='%23c9a44a' stroke-width='1.1'><path d='M2 24 V7 Q2 2 7 2 H24'/><path d='M7 24 V10 Q7 7 10 7 H24' opacity='0.55'/><circle cx='4.5' cy='4.5' r='1' fill='%23c9a44a' stroke='none'/></g></svg>") no-repeat center / contain;
}
.note-card,
.dj-card,
.article-card {
    position: relative;
    border-color: rgba(201, 164, 74, 0.42);
    box-shadow: 0 6px 24px rgba(140, 110, 50, 0.12),
                inset 0 0 0 1px rgba(255, 253, 246, 0.55);
}
.note-card:hover {
    border-color: rgba(201, 164, 74, 0.6);
    box-shadow: 0 14px 40px rgba(140, 110, 50, 0.2),
                0 0 18px rgba(232, 200, 126, 0.3),
                inset 0 0 0 1px rgba(255, 253, 246, 0.6);
}
.dj-card,
.article-card { transition: box-shadow 0.25s, border-color 0.25s; }
.dj-card:hover,
.article-card:hover {
    border-color: rgba(201, 164, 74, 0.6);
    box-shadow: 0 12px 36px rgba(140, 110, 50, 0.2),
                0 0 16px rgba(232, 200, 126, 0.28),
                inset 0 0 0 1px rgba(255, 253, 246, 0.6);
}

/* index 功能卡 hover：金边发光 + 外描金线 + 上浮阴影 */
.feature-card:hover {
    border-color: var(--yys-gold-light);
    outline: 1px solid rgba(201, 164, 74, 0.55);
    outline-offset: 4px;
    box-shadow: 0 18px 50px rgba(140, 110, 50, 0.28),
                0 0 26px rgba(232, 200, 126, 0.4);
}
.feature-icon {
    box-shadow: 0 4px 12px rgba(140, 110, 50, 0.25),
                inset 0 0 12px rgba(232, 200, 126, 0.2),
                0 0 0 3px rgba(255, 253, 246, 0.6);
}
.feature-card:hover .feature-icon {
    box-shadow: 0 4px 16px rgba(140, 110, 50, 0.35),
                inset 0 0 14px rgba(232, 200, 126, 0.35),
                0 0 0 3px rgba(255, 253, 246, 0.7),
                0 0 20px rgba(232, 200, 126, 0.55);
}

/* ==========================================================================
   6. 标题华丽化：衬线字距 + 金色渐变文字
   ========================================================================== */
.yys-title {
    font-family: 'STKaiti', 'KaiTi', 'Microsoft YaHei', serif;
    letter-spacing: 0.3em;
    background: linear-gradient(160deg, #6a4a12 8%, #c9a44a 42%, #e8c87e 50%, #c9a44a 58%, #6a4a12 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.page-title {
    font-family: 'STKaiti', 'KaiTi', 'Microsoft YaHei', serif;
    background: linear-gradient(160deg, #6a4a12 8%, #c9a44a 42%, #e8c87e 50%, #c9a44a 58%, #6a4a12 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 4px; /* 渐变裁切兜底，避免字符下缘被裁 */
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .yys-title, .page-title { color: #8a5a14; background: none; }
}

/* 分隔装饰：金线 + 中点菱形（可选组件）
   <div class="yys-divider"></div> */
.yys-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px auto;
    max-width: 420px;
}
.yys-divider::before,
.yys-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 164, 74, 0.7));
}
.yys-divider::after { transform: scaleX(-1); }
.yys-divider span {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--yys-gold-light), var(--yys-gold));
    box-shadow: 0 0 8px rgba(232, 200, 126, 0.6);
}

/* ==========================================================================
   7. 移动端适配（max-width: 640px）
   ========================================================================== */
@media (max-width: 640px) {
    .yys-banner { height: 110px; }
    .yys-banner-inner { bottom: 12px; }
    .yys-banner-title { font-size: 1.3em; letter-spacing: 7px; }
    .yys-banner-sub { font-size: 0.75em; letter-spacing: 3px; }
    .yys-card::before,
    .note-card::after,
    .dj-card::after,
    .article-card::after { width: 20px; height: 20px; opacity: 0.5; }
    .feature-card:hover { outline: none; } /* 小屏去掉外描边，防抖动 */
}

/* ==========================================================================
   8. hero 轮播 ken burns 增强（暗夜鎏金首页）
   在淡入淡出基础上叠加缓慢缩放（scale 1→1.08，24s），仅 index.html 使用。
   注意：本段在文件末尾，会覆盖第 2 节的动画定义，因此移动端/减动效降级需在此重申。
   ========================================================================== */
.yys-hero-slide {
    animation: yysHeroKenBurns 24s linear infinite;
    will-change: opacity, transform;
}
/* 每张约 8s 可见：0-28% 全亮，28-36% 淡出，92-100% 淡入（与上一张交叉）；
   同时整周期内 scale 1→1.08 缓慢推进 */
@keyframes yysHeroKenBurns {
    0%   { opacity: 1; transform: scale(1); }
    28%  { opacity: 1; }
    36%  { opacity: 0; }
    92%  { opacity: 0; }
    100% { opacity: 1; transform: scale(1.08); }
}
@media (max-width: 640px) {
    .yys-hero-slide { animation: none; transform: none; }
    .yys-hero-slide:nth-child(n+2) { display: none; }
    .yys-hero-slide:nth-child(1) { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .yys-hero-slide { animation: none; transform: none; }
    .yys-hero-slide:nth-child(n+2) { display: none; }
    .yys-hero-slide:nth-child(1) { opacity: 1; }
}

/* ===== 备案信息条 ===== */
.yys-beian {
    text-align: center;
    padding: 14px 12px 18px;
    font-size: 12px;
    letter-spacing: 1px;
    color: #ab9c7c;
}
.yys-beian a { color: #ab9c7c; text-decoration: none; }
.yys-beian a:hover { color: #c9a44a; }