/* ============================================
   css/chapter.css
   Mucha Exhibition v7.1.17 OSS (v6 起源 + v7.1.x 暗色/优化增量)
   ============================================ */

/* ===================== 章节通用 ===================== */
.chapter{position:relative;padding:120px 6% 140px;overflow:hidden;z-index:1;
  background:linear-gradient(180deg,var(--ivory) 0%,var(--ivory-light) 50%,var(--ivory-deep) 100%)}
.chapter-decor-top{
  position:absolute;top:0;left:0;right:0;height:60px;pointer-events:none;opacity:0.4;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60' viewBox='0 0 100 60'><g fill='none' stroke='%23B8860B' stroke-width='0.8'><path d='M0,30 Q10,10 20,30 Q30,50 40,30 Q50,10 60,30 Q70,50 80,30 Q90,10 100,30'/><circle cx='20' cy='30' r='1.5' fill='%23B8860B'/><circle cx='40' cy='30' r='1.5' fill='%23B8860B'/><circle cx='60' cy='30' r='1.5' fill='%23B8860B'/><circle cx='80' cy='30' r='1.5' fill='%23B8860B'/></g></svg>");
  background-size:100px 60px;background-repeat:repeat-x;
}
.chapter-bg-pattern{position:absolute;inset:0;pointer-events:none;opacity:0.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='none' stroke='%23B8860B' stroke-width='1'><path d='M100,20 Q120,60 100,100 Q80,60 100,20'/><path d='M100,100 Q140,140 100,180 Q60,140 100,100'/><path d='M20,100 Q60,80 100,100 Q60,120 20,100'/><path d='M100,100 Q140,80 180,100 Q140,120 100,100'/><circle cx='100' cy='100' r='3'/></g></svg>");
  background-size:200px}

/* v7.1.10 暗色：chapter 顶部装饰 + 背景十字花纹 → 鎏金变月银 */
:root[data-theme="dark"] .chapter-decor-top {
  filter: hue-rotate(195deg) saturate(0.4) brightness(1.5);
  opacity: 0.3;
}
:root[data-theme="dark"] .chapter-bg-pattern {
  filter: hue-rotate(195deg) saturate(0.4) brightness(1.5);
  opacity: 0.08;
}
.chapter-num{font-family:'Cinzel Decorative',serif;font-size:clamp(60px,8vw,120px);color:var(--gold);opacity:0.25;letter-spacing:0.1em;text-align:center}
.chapter-title{font-family:'Cinzel Decorative',serif;font-size:clamp(40px,5vw,72px);font-weight:900;letter-spacing:0.15em;
  background:linear-gradient(180deg,var(--gold-pale),var(--gold-bright),var(--gold),var(--gold-bright),var(--gold-pale));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-align:center;margin:0;filter:drop-shadow(0 0 8px rgba(var(--gold-rgb), 0.2))}
.chapter-title-cn{font-family:'Noto Serif SC',serif;font-size:clamp(20px,2.5vw,32px);font-weight:600;letter-spacing:0.4em;color:var(--ink);text-align:center;margin-top:12px}
.chapter-tagline{font-family:'Cormorant Garamond',serif;font-size:20px;letter-spacing:0.3em;color:var(--gold);text-align:center;margin-top:16px;font-style:italic}

/* ===================== Hero ===================== */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;text-align:center;padding:60px 20px;overflow:hidden;z-index:1}
.hero-frame{position:absolute;inset:40px;border:1px solid var(--gold);pointer-events:none}
.hero-frame-tl,.hero-frame-tr,.hero-frame-bl,.hero-frame-br{position:absolute;width:60px;height:60px;pointer-events:none}
.hero-frame-tl{top:30px;left:30px;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}
.hero-frame-tr{top:30px;right:30px;border-top:2px solid var(--gold);border-right:2px solid var(--gold)}
.hero-frame-bl{bottom:30px;left:30px;border-bottom:2px solid var(--gold);border-left:2px solid var(--gold)}
.hero-frame-br{bottom:30px;right:30px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold)}

/* v7.1.10 暗色：hero 四角鎏金框 → 月银 */
:root[data-theme="dark"] .hero-frame,
:root[data-theme="dark"] .hero-frame-tl,
:root[data-theme="dark"] .hero-frame-tr,
:root[data-theme="dark"] .hero-frame-bl,
:root[data-theme="dark"] .hero-frame-br { border-color: var(--gold); }
.hero-quote{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.5vw,32px);font-style:italic;color:var(--ink);max-width:700px;line-height:1.8;margin:30px auto}
.hero-sub{font-family:'Noto Serif SC',serif;font-size:14px;letter-spacing:0.4em;color:var(--gold-deep);margin-top:8px}
.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.4em;color:var(--gold);text-transform:uppercase;
  animation:scrollBounce 2s infinite}
@keyframes scrollBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ===================== 关于穆夏 ===================== */
.timeline{position:relative;max-width:1000px;margin:60px auto 0;padding:40px 0}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold),var(--gold-light),var(--gold),transparent);transform:translateX(-50%)}
.timeline-item{position:relative;width:50%;padding:24px 50px;opacity:0;transform:translateY(30px);transition:opacity 0.8s,transform 0.8s}
.timeline-card{display:inline-flex;gap:16px;align-items:center}
.timeline-item.left .timeline-card{flex-direction:row-reverse;text-align:right}
.timeline-item.right .timeline-card{flex-direction:row;text-align:left}
.timeline-thumb{width:90px;height:90px;border-radius:50%;object-fit:cover;
  border:2px solid var(--gold-light);box-shadow:0 0 20px rgba(var(--gold-rgb), 0.3);
  flex-shrink:0;background:var(--ivory-deep)}
.timeline-content{flex:1}
.timeline-item.visible{opacity:1;transform:translateY(0)}
.timeline-item.left{left:0;text-align:right}
.timeline-item.right{left:50%;text-align:left}
.timeline-item::before{content:'';position:absolute;top:40px;width:20px;height:20px;
  background:radial-gradient(circle,var(--gold-bright) 0%,var(--gold) 70%);
  border:3px solid var(--ivory);border-radius:50%;box-shadow:0 0 20px rgba(var(--gold-rgb), 0.6)}
.timeline-item.left::before{right:-10px}
.timeline-item.right::before{left:-10px}
.timeline-year{font-family:'Cinzel Decorative',serif;font-size:32px;font-weight:700;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.timeline-title{font-size:18px;font-weight:700;color:var(--ink);margin:8px 0;letter-spacing:0.1em}
.timeline-text{font-size:14px;line-height:1.8;color:var(--ink);opacity:0.85}

/* ===================== 审美内涵（手绘 SVG） ===================== */
.aesthetic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;max-width:1200px;margin:60px auto 0}
.aesthetic-card{position:relative;padding:40px 30px;
  background:linear-gradient(135deg,rgba(244,236,216,0.6),rgba(232,220,192,0.4));
  border:1px solid var(--gold-light);text-align:center;transition:all 0.4s;overflow:hidden}
.aesthetic-card::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at center,rgba(var(--gold-rgb), 0.1) 0%,transparent 70%);opacity:0;transition:opacity 0.4s}
.aesthetic-card:hover{transform:translateY(-5px);border-color:var(--gold-bright)}
.aesthetic-card:hover::before{opacity:1}
.mucha-icon{width:80px;height:80px;margin:0 auto 20px;display:block;color:var(--gold-deep);
  filter:drop-shadow(0 0 8px rgba(var(--gold-deep-rgb), 0.4))}
.aesthetic-card h3{font-family:'Cinzel Decorative',serif;font-size:22px;color:var(--gold-deep);margin:0 0 8px;letter-spacing:0.1em}
.aesthetic-card .aesthetic-card-cn{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:16px;letter-spacing:0.2em}
.aesthetic-card p{font-size:14px;line-height:1.9;color:var(--ink);opacity:0.85;margin:0}


/* v7.1.10 暗色：章节连接处渐变过渡蒙层（避免硬切突兀） */
.chapter::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--ivory));
  pointer-events: none;
  z-index: 2;
}
.chapter::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 60px;
  background: linear-gradient(0deg, transparent, var(--ivory));
  pointer-events: none;
  z-index: 2;
}
/* v7.1.15: 暗色蒙层改用更柔的"牙色→暗夜蓝"半透明渐变（避免"大黑色"硬切感）
   旧版 transparent → #0F1B2A 实色 = 大黑色，新版透明叠加 = 自然过渡 */
:root[data-theme="dark"] .chapter::after {
  background: linear-gradient(180deg, rgba(15, 27, 42, 0) 0%, rgba(15, 27, 42, 0.6) 100%);
}
:root[data-theme="dark"] .chapter::before {
  background: linear-gradient(0deg, rgba(15, 27, 42, 0) 0%, rgba(15, 27, 42, 0.6) 100%);
}

/* ============================================
   v7.1.12 chapter 暗色增强（hero / timeline / aesthetic-card / chapter-num）
   ============================================ */
:root[data-theme="dark"] .chapter {
  background: linear-gradient(180deg, #0F1B2A 0%, #1A2840 50%, #0F1B2A 100%);
}
:root[data-theme="dark"] .hero {
  /* 暗色下 hero 背景：深月蓝径向渐变 */
  background: radial-gradient(ellipse at center, #1A2840 0%, #0A1220 100%);
}
:root[data-theme="dark"] .hero-frame,
:root[data-theme="dark"] .hero-frame-tl,
:root[data-theme="dark"] .hero-frame-tr,
:root[data-theme="dark"] .hero-frame-bl,
:root[data-theme="dark"] .hero-frame-br {
  border-color: var(--gold-light);
}
:root[data-theme="dark"] .hero-quote {
  color: var(--text-light);
}
:root[data-theme="dark"] .hero-sub {
  color: var(--gold-light);
}
:root[data-theme="dark"] .scroll-hint {
  color: var(--gold-light);
}
/* v7.1.15: 罗马数字暗色增强可见性（用户多次反映"黑夜模式变色失效"）
   旧版 var(--gold-light) 暗色值 #C0D0E0 + opacity 0.5 在 #0F1B2A 暗夜蓝上仍然偏淡
   改为：月白银实色 #D8E5F0 + opacity 0.6 + 6px 月银光晕（清晰可见） */
:root[data-theme="dark"] .chapter-num {
  color: #D8E5F0;
  opacity: 0.65;
  text-shadow: 0 0 8px rgba(168, 192, 216, 0.5), 0 0 16px rgba(168, 192, 216, 0.3);
  filter: drop-shadow(0 0 4px rgba(168, 192, 216, 0.4));
}
:root[data-theme="dark"] .chapter-title-cn {
  color: var(--text-light);
}
:root[data-theme="dark"] .chapter-tagline {
  color: var(--gold-light);
}
:root[data-theme="dark"] .timeline::before {
  background: linear-gradient(180deg, transparent, var(--gold-light), var(--gold-bright), var(--gold-light), transparent);
}
:root[data-theme="dark"] .timeline-item::before {
  background: radial-gradient(circle, var(--gold-bright) 0%, var(--gold-light) 70%);
  border-color: #0F1B2A;
  box-shadow: 0 0 20px rgba(168, 192, 216, 0.6);
}
:root[data-theme="dark"] .timeline-thumb {
  border-color: var(--gold-light);
  background: #1A2840;
}
:root[data-theme="dark"] .timeline-year {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-theme="dark"] .timeline-title {
  color: var(--text-light);
}
:root[data-theme="dark"] .timeline-text {
  color: var(--text-light);
  opacity: 0.9;
}
:root[data-theme="dark"] .aesthetic-card {
  background: linear-gradient(135deg, rgba(36, 58, 82, 0.5), rgba(15, 27, 42, 0.3));
  border-color: var(--gold-light);
}
:root[data-theme="dark"] .aesthetic-card h3 {
  color: var(--gold-bright);
}
:root[data-theme="dark"] .aesthetic-card .aesthetic-card-cn {
  color: var(--text-light);
}
:root[data-theme="dark"] .aesthetic-card p {
  color: var(--text-light);
  opacity: 0.9;
}
:root[data-theme="dark"] .mucha-icon {
  color: var(--gold-bright);
  filter: drop-shadow(0 0 10px rgba(168, 192, 216, 0.4));
}

/* ============================================
   v7.1.16: 章节内副标 / intro 段统一 class
   用于 chapter-num 下的 chapter-subhead 类小字
   (II 章节 timeline 说明 / IV 章节题词 / V 章节 intro / VI 章节 subhead)
   ============================================ */
.chapter-subhead{
  font-family:'Cormorant Garamond','Noto Serif SC',serif;
  font-size:15px;font-style:italic;
  line-height:1.85;
  color:var(--gold-deep);
  text-align:center;
  letter-spacing:0.15em;
  margin:12px auto 8px;
  opacity:0.85;
  max-width:800px;
}
:root[data-theme="dark"] .chapter-subhead {
  color:var(--gold-light);
  opacity:0.85;
}

/* ============================================
   v7.1.16: 章节内联 style 抽出 → class
   替换原本的 style="..." 内联属性
   ============================================ */

/* L926: seasons 章节 padding-top 改 0(让 chapter-decor-top 紧贴) */
.chapter--tight-top{padding-top:120px;padding-bottom:140px;padding-left:6%;padding-right:6%;overflow:hidden;z-index:1;background:linear-gradient(180deg,var(--ivory) 0%,var(--ivory-light) 50%,var(--ivory-deep) 100%);position:relative}

/* L1017 / L1159: gold-divider 修饰版 */
.divider--narrow{margin:0 auto 50px;max-width:300px}
.divider--spaced{margin-top:60px}

/* L1065: critical-essay-section 间距(VI 章节内) */
.critical-section--spaced{margin-top:60px}

/* L1067: critical-title 小字号(diaochan-critical 段) */
.critical-title--small{font-size:clamp(28px,4vw,52px)}

/* L1150: end 章节 VIII 罗马数字 鎏金实色 + 弱化 */
.chapter-num--end{color:#B8860B;opacity:0.4}