/* ============================================================
 * 汉 · 标志性中式组件 (Iconic Components)
 * 中国文化标志性结构组件：卷轴、匾额、折扇、屏风、灯笼、册页
 * 依赖：tokens.css + base.css + themes.css
 * ============================================================ */


/* ============================================================
 * 1. 卷轴 (Scroll Handrail)
 * 中国传统手卷样式，两端卷轴杆 + 展开动画
 * 场景：长文展示、字画展示、历史文档
 * ============================================================ */
.han-scroll {
  position: relative;
  background: var(--han-color-bg-surface);
  border: var(--han-border-width) solid var(--han-color-border-strong);
  border-radius: var(--han-radius-lg);
  padding: var(--han-space-7) var(--han-space-8);
  box-shadow: var(--han-shadow-lg);
}

/* 卷轴杆（顶端） */
.han-scroll::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 18px;
  background: linear-gradient(
    180deg,
    var(--han-color-gold-600) 0%,
    var(--han-color-gold-500) 30%,
    var(--han-color-gold-400) 50%,
    var(--han-color-gold-500) 70%,
    var(--han-color-gold-600) 100%
  );
  border-radius: var(--han-radius-full);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

/* 卷轴杆（底端） */
.han-scroll::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 18px;
  background: linear-gradient(
    180deg,
    var(--han-color-gold-600) 0%,
    var(--han-color-gold-500) 30%,
    var(--han-color-gold-400) 50%,
    var(--han-color-gold-500) 70%,
    var(--han-color-gold-600) 100%
  );
  border-radius: var(--han-radius-full);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

/* 卷轴两端卷轴头 */
.han-scroll > .han-scroll-head {
  position: absolute;
  top: -12px;
  width: 24px;
  height: 22px;
  background: radial-gradient(
    ellipse at 30% 30%,
    var(--han-color-gold-300) 0%,
    var(--han-color-gold-500) 40%,
    var(--han-color-gold-700) 100%
  );
  border-radius: 50%;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
  z-index: 1;
}

.han-scroll > .han-scroll-head--left {
  left: -12px;
}

.han-scroll > .han-scroll-head--right {
  right: -12px;
}

/* 卷轴内容 */
.han-scroll__content {
  position: relative;
  z-index: 2;
}

/* 卷轴展开动画 */
.han-scroll--unroll {
  animation: han-scroll-unroll 1.2s var(--han-ease-out) forwards;
}

@keyframes han-scroll-unroll {
  0% { transform: scaleY(0.02); opacity: 0; max-height: 6px; }
  30% { transform: scaleY(0.1); opacity: 0.4; max-height: 30px; }
  60% { transform: scaleY(0.5); opacity: 0.8; max-height: 200px; }
  100% { transform: scaleY(1); opacity: 1; max-height: 100%; }
}

/* 迷你卷轴 */
.han-scroll--sm {
  padding: var(--han-space-5) var(--han-space-6);
}

.han-scroll--sm::before,
.han-scroll--sm::after {
  height: 12px;
  top: -7px;
  bottom: -7px;
}

.han-scroll--sm > .han-scroll-head {
  width: 18px;
  height: 16px;
  top: -9px;
}

.han-scroll--sm > .han-scroll-head--left { left: -8px; }
.han-scroll--sm > .han-scroll-head--right { right: -8px; }

/* 宽幅卷轴（横幅） */
.han-scroll--wide {
  padding: var(--han-space-8) var(--han-space-10);
}

/* 竖幅卷轴 */
.han-scroll--vertical {
  writing-mode: vertical-rl;
  max-width: 360px;
  margin: 0 auto;
}

/* 纸质纹理卷轴 */
.han-scroll--paper {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.98 0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23paper)'/%3E%3C/svg%3E");
}


/* ============================================================
 * 2. 匾额 (Plaque)
 * 中式横匾，常用于门头、堂号、书房名
 * 场景：网站Logo标题、品牌展示、栏目标题
 * ============================================================ */
.han-plaque {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--han-space-4) var(--han-space-10);
  background: linear-gradient(
    180deg,
    #4A3728 0%,
    #5C4632 30%,
    #6B5240 50%,
    #5C4632 70%,
    #4A3728 100%
  );
  border: var(--han-border-width-2) solid #2A1F15;
  border-radius: var(--han-radius-sm);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 215, 128, 0.15),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3);
  color: #F5E6C8;
  font-family: var(--han-font-kai);
  font-weight: var(--han-title-weight, var(--han-fw-bold));
  letter-spacing: var(--han-title-spacing, var(--han-ls-wider));
  font-size: var(--han-fs-2xl);
  text-align: center;
}

/* 匾额装饰边框 */
.han-plaque::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: calc(var(--han-radius-sm) - 2px);
  pointer-events: none;
}

/* 匾额挂环 */
.han-plaque::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, var(--han-color-gold-400) 0%, var(--han-color-gold-600) 70%, var(--han-color-gold-700) 100%);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 金色匾额变体 */
.han-plaque--gold {
  background: linear-gradient(
    180deg,
    #8B7532 0%,
    #C4A85C 30%,
    #D4AF37 50%,
    #C4A85C 70%,
    #8B7532 100%
  );
  border-color: #5C4D1A;
  color: #2A1F15;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.han-plaque--gold::before {
  border-color: rgba(42, 31, 21, 0.3);
}

/* 红木匾额变体 */
.han-plaque--redwood {
  background: linear-gradient(
    180deg,
    #5C1F1F 0%,
    #7A2E2E 30%,
    #8B3A3A 50%,
    #7A2E2E 70%,
    #5C1F1F 100%
  );
  border-color: #3D1414;
  color: #FFD700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 小匾额 */
.han-plaque--sm {
  padding: var(--han-space-2) var(--han-space-6);
  font-size: var(--han-fs-lg);
}

/* 大匾额 */
.han-plaque--lg {
  padding: var(--han-space-5) var(--han-space-14);
  font-size: var(--han-fs-4xl);
}

/* 竖匾 */
.han-plaque--vertical {
  writing-mode: vertical-rl;
  padding: var(--han-space-6) var(--han-space-4);
  font-size: var(--han-fs-xl);
}

/* 带印章落款的匾额 */
.han-plaque__seal {
  display: inline-flex;
  width: 24px;
  height: 24px;
  margin-left: var(--han-space-3);
  background: var(--han-stamp-bg);
  color: var(--han-stamp-text);
  font-size: var(--han-fs-xs);
  align-items: center;
  justify-content: center;
  border-radius: var(--han-radius-sm);
  transform: rotate(-3deg);
  flex-shrink: 0;
}


/* ============================================================
 * 3. 折扇 (Folding Fan)
 * 中国折扇展开形态，半月形布局
 * 场景：侧边菜单、产品分类、特色展示
 * ============================================================ */
.han-fan {
  position: relative;
  width: 280px;
  height: 160px;
  margin: 0 auto;
  perspective: 800px;
}

/* 扇面（半圆） */
.han-fan__surface {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-origin: bottom center;
  width: 100%;
  height: 100%;
  background: var(--han-color-bg-surface);
  border: var(--han-border-width) solid var(--han-color-border-strong);
  border-bottom: none;
  border-radius: 140px 140px 0 0;
  box-shadow: var(--han-shadow-lg);
  overflow: hidden;
}

/* 扇骨 */
.han-fan__ribs {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-origin: bottom center;
  width: 100%;
  height: 100%;
}

.han-fan__ribs::before,
.han-fan__ribs::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: var(--han-border-width-2);
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--han-color-ink-300) 0%,
    var(--han-color-ink-500) 100%
  );
  transform-origin: bottom center;
}

.han-fan__ribs::before {
  left: 50%;
  transform: translateX(-50%) rotate(-70deg);
}

.han-fan__ribs::after {
  left: 50%;
  transform: translateX(-50%) rotate(70deg);
}

/* 扇柄 */
.han-fan__handle {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 24px;
  background: linear-gradient(
    180deg,
    var(--han-color-ink-500) 0%,
    var(--han-color-ink-700) 100%
  );
  border-radius: var(--han-radius-sm);
  box-shadow: var(--han-shadow-md);
  z-index: 2;
}

/* 扇面内容 */
.han-fan__content {
  position: absolute;
  bottom: var(--han-space-5);
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  text-align: center;
  z-index: 1;
}

/* 折扇展开动画 */
.han-fan--open .han-fan__ribs::before {
  animation: han-fan-open-left 0.8s var(--han-ease-out) forwards;
}

.han-fan--open .han-fan__ribs::after {
  animation: han-fan-open-right 0.8s var(--han-ease-out) forwards;
}

@keyframes han-fan-open-left {
  from { transform: translateX(-50%) rotate(-5deg); }
  to   { transform: translateX(-50%) rotate(-70deg); }
}

@keyframes han-fan-open-right {
  from { transform: translateX(-50%) rotate(5deg); }
  to   { transform: translateX(-50%) rotate(70deg); }
}

/* 展开的折扇 — 完整形态 */
.han-fan--spread {
  height: 180px;
}

.han-fan--spread .han-fan__surface {
  border-radius: 150px 150px 0 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Cdefs%3E%3ClinearGradient id='fanGrad' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23F5F0E0'/%3E%3Cstop offset='100%25' stop-color='%23E8DFC8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='600' height='300' fill='url(%23fanGrad)'/%3E%3Cg stroke='%23B8860B' stroke-width='1' opacity='0.3'%3E%3Cline x1='300' y1='300' x2='100' y2='30'/%3E%3Cline x1='300' y1='300' x2='180' y2='15'/%3E%3Cline x1='300' y1='300' x2='300' y2='10'/%3E%3Cline x1='300' y1='300' x2='420' y2='15'/%3E%3Cline x1='300' y1='300' x2='500' y2='30'/%3E%3C/g%3E%3C/svg%3E");
}

/* 扇面装饰 */
.han-fan__painting {
  position: absolute;
  top: 10%;
  left: 15%;
  right: 15%;
  height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--han-font-kai);
  color: var(--han-color-ink-700);
}

.han-fan__painting-title {
  font-size: var(--han-fs-lg);
  font-weight: var(--han-title-weight, var(--han-fw-bold));
  letter-spacing: var(--han-ls-wide);
}


/* ============================================================
 * 4. 屏风 (Screen)
 * 三折式中式屏风布局，可作页面布局使用
 * 场景：页面分栏、内容分区、产品展示
 * ============================================================ */
.han-screen {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--han-space-4);
  min-height: 400px;
  position: relative;
}

/* 屏风每折 */
.han-screen__panel {
  position: relative;
  background: var(--han-color-bg-surface);
  border: var(--han-border-width) solid var(--han-color-border-strong);
  border-radius: var(--han-radius-sm);
  padding: var(--han-space-6);
  box-shadow: var(--han-shadow-md);
  overflow: hidden;
}

/* 屏风折痕 */
.han-screen__panel:not(:last-child)::after {
  content: "";
  position: absolute;
  top: var(--han-space-4);
  bottom: var(--han-space-4);
  right: -2px;
  width: var(--han-border-width);
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--han-color-border) 15%,
    var(--han-color-border) 85%,
    transparent 100%
  );
}

/* 屏风框架装饰 */
.han-screen__panel::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: var(--han-border-width) solid var(--han-color-gold-400);
  border-radius: calc(var(--han-radius-sm) - 2px);
  pointer-events: none;
  opacity: 0.4;
}

/* 中间主屏风 */
.han-screen__panel--center {
  background: var(--han-color-bg);
  min-height: 480px;
}

/* 侧屏风 */
.han-screen__panel--side {
  display: flex;
  flex-direction: column;
}

/* 六折屏风 */
.han-screen--six {
  grid-template-columns: 1fr 1fr 2fr 1fr 1fr 1fr;
}

/* 折叠屏风展开动画 */
.han-screen.is-open .han-screen__panel {
  animation: han-screen-fold 0.8s var(--han-ease-out) forwards;
}

.han-screen.is-open .han-screen__panel:nth-child(1) { animation-delay: 0s; }
.han-screen.is-open .han-screen__panel:nth-child(2) { animation-delay: 0.15s; }
.han-screen.is-open .han-screen__panel:nth-child(3) { animation-delay: 0.3s; }

@keyframes han-screen-fold {
  from {
    opacity: 0;
    transform: perspective(600px) rotateY(-30deg);
  }
  to {
    opacity: 1;
    transform: perspective(600px) rotateY(0);
  }
}

/* 屏风装饰画 */
.han-screen__painting {
  position: absolute;
  inset: var(--han-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--han-font-kai);
  color: var(--han-color-ink-500);
  opacity: 0.8;
  pointer-events: none;
}

.han-screen__painting--mountain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M10 180 L50 100 L80 130 L120 60 L160 120 L190 90 L190 190 L10 190 Z' fill='%238B9E9A' opacity='0.3'/%3E%3Cpath d='M40 180 L70 140 L100 160 L140 110 L180 150 L180 190 L40 190 Z' fill='%236B8E8A' opacity='0.4'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: bottom;
}


/* ============================================================
 * 5. 灯笼 (Lantern)
 * 中式挂灯笼，带流苏和摇晃动画
 * 场景：节日装饰、传统活动、喜庆页面
 * ============================================================ */
.han-lantern {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* 灯笼盖 */
.han-lantern__cap {
  width: 40px;
  height: 10px;
  background: linear-gradient(
    180deg,
    #B8860B 0%,
    #DAA520 50%,
    #B8860B 100%
  );
  border-radius: var(--han-radius-sm) var(--han-radius-sm) 0 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 灯笼主体 */
.han-lantern__body {
  position: relative;
  width: 60px;
  height: 70px;
  background: linear-gradient(
    180deg,
    #C41E3A 0%,
    #DC143C 50%,
    #C41E3A 100%
  );
  border-radius: 50%;
  box-shadow:
    0 4px 12px rgba(192, 57, 43, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.2),
    inset 0 -2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFD700;
  font-family: var(--han-font-kai);
  font-weight: var(--han-title-weight, var(--han-fw-bold));
  font-size: var(--han-fs-lg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  animation: han-lantern-sway 3s var(--han-ease-in-out) infinite;
  transform-origin: top center;
}

/* 灯笼上下箍 */
.han-lantern__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    180deg,
    #DAA520 0%,
    #B8860B 100%
  );
  border-radius: 50% 50% 0 0;
}

.han-lantern__body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    180deg,
    #B8860B 0%,
    #DAA520 100%
  );
  border-radius: 0 0 50% 50%;
}

/* 灯笼流苏 */
.han-lantern__tassel {
  width: 4px;
  height: 24px;
  background: linear-gradient(
    180deg,
    #DAA520 0%,
    #B8860B 100%
  );
  border-radius: 0 0 var(--han-radius-sm) var(--han-radius-sm);
}

/* 灯笼摇晃动画 */
@keyframes han-lantern-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* 灯笼 — 大 */
.han-lantern--lg .han-lantern__body {
  width: 80px;
  height: 90px;
  font-size: var(--han-fs-xl);
}

.han-lantern--lg .han-lantern__cap {
  width: 50px;
  height: 14px;
}

.han-lantern--lg .han-lantern__tassel {
  height: 32px;
  width: 6px;
}

/* 灯笼 — 小 */
.han-lantern--sm .han-lantern__body {
  width: 44px;
  height: 50px;
  font-size: var(--han-fs-sm);
}

.han-lantern--sm .han-lantern__cap {
  width: 32px;
  height: 8px;
}

.han-lantern--sm .han-lantern__tassel {
  height: 16px;
}

/* 灯笼 — 金色 */
.han-lantern--gold .han-lantern__body {
  background: linear-gradient(
    180deg,
    #B8860B 0%,
    #DAA520 50%,
    #B8860B 100%
  );
  color: #5C1F1F;
}

/* 多灯笼组合 */
.han-lantern-group {
  display: flex;
  gap: var(--han-space-12);
  justify-content: center;
  align-items: flex-start;
}

.han-lantern-group .han-lantern:nth-child(2) .han-lantern__body {
  animation-delay: 0.5s;
}

.han-lantern-group .han-lantern:nth-child(3) .han-lantern__body {
  animation-delay: 1s;
}


/* ============================================================
 * 6. 册页 (Album)
 * 中国传统册页/古籍封面样式
 * 场景：文档封面、作品集封面、产品手册
 * ============================================================ */
.han-album {
  position: relative;
  background: var(--han-color-bg-surface);
  border: var(--han-border-width-2) solid var(--han-color-ink-700);
  border-radius: var(--han-radius-sm);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    inset 0 0 0 6px var(--han-color-bg-surface),
    inset 0 0 0 8px var(--han-color-gold-500);
  padding: var(--han-space-8) var(--han-space-7);
}

/* 册页书脊 */
.han-album::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(
    90deg,
    var(--han-color-ink-700) 0%,
    var(--han-color-ink-500) 30%,
    var(--han-color-ink-400) 70%,
    var(--han-color-ink-500) 100%
  );
  border-radius: var(--han-radius-sm) 0 0 var(--han-radius-sm);
  box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.3);
}

/* 册页标题 */
.han-album__title {
  font-family: var(--han-font-kai);
  font-weight: var(--han-title-weight, var(--han-fw-bold));
  font-size: var(--han-fs-3xl);
  color: var(--han-color-ink-700);
  letter-spacing: var(--han-title-spacing, var(--han-ls-wider));
  margin-bottom: var(--han-space-3);
  padding-left: var(--han-space-5);
}

/* 册页副标题 */
.han-album__subtitle {
  font-family: var(--han-font-song);
  font-size: var(--han-fs-sm);
  color: var(--han-color-text-secondary);
  letter-spacing: var(--han-ls-wide);
  margin-bottom: var(--han-space-6);
  padding-left: var(--han-space-5);
}

/* 册页内容 */
.han-album__body {
  font-size: var(--han-fs-base);
  line-height: var(--han-lh-relaxed);
  color: var(--han-color-text-primary);
  padding-left: var(--han-space-5);
  border-top: var(--han-border-width) dashed var(--han-color-ink-200);
  padding-top: var(--han-space-5);
}

/* 册页印章落款 */
.han-album__seal {
  position: absolute;
  bottom: var(--han-space-6);
  right: var(--han-space-6);
  width: 36px;
  height: 36px;
  background: var(--han-stamp-bg);
  color: var(--han-stamp-text);
  font-family: var(--han-font-kai);
  font-size: var(--han-fs-sm);
  font-weight: var(--han-fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--han-radius-sm);
  transform: rotate(-5deg);
  box-shadow: var(--han-shadow-md);
  line-height: 1.1;
  text-align: center;
}

/* 蓝色封面册页 */
.han-album--blue {
  background: #2C3E50;
  color: #ECF0F1;
  border-color: #1A252F;
}

.han-album--blue::before {
  background: linear-gradient(
    90deg,
    #1A252F 0%,
    #2C3E50 50%,
    #3D566E 100%
  );
}

.han-album--blue .han-album__title { color: #F5E6C8; }
.han-album--blue .han-album__subtitle { color: rgba(245, 230, 200, 0.7); }
.han-album--blue .han-album__body { color: rgba(245, 230, 200, 0.9); border-top-color: rgba(245, 230, 200, 0.3); }

/* 布面烫金册页 */
.han-album--cloth {
  background:
    repeating-linear-gradient(
      0deg,
      #4A3728 0px,
      #4A3728 2px,
      #5C4632 2px,
      #5C4632 4px
    );
  color: #D4AF37;
  border-color: #2A1F15;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 0 0 4px #8B7532,
    inset 0 0 0 6px #4A3728;
}

.han-album--cloth .han-album__title {
  color: #D4AF37;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.han-album--cloth .han-album__subtitle { color: rgba(212, 175, 55, 0.7); }
.han-album--cloth .han-album__body { color: rgba(212, 175, 55, 0.9); border-top-color: rgba(212, 175, 55, 0.3); }

/* 打开的册页 */
.han-album--open {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--han-space-8);
  padding: var(--han-space-10) var(--han-space-8);
}

.han-album--open::before {
  left: 50%;
  top: var(--han-space-6);
  bottom: var(--han-space-6);
  width: var(--han-border-width);
  border-radius: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--han-color-ink-300) 15%,
    var(--han-color-ink-300) 85%,
    transparent 100%
  );
}

.han-album--open .han-album__title,
.han-album--open .han-album__subtitle {
  padding-left: 0;
}

/* 册页翻页动画 */
.han-album__page {
  transition: transform var(--han-duration-slow) var(--han-ease-in-out);
  transform-origin: left center;
  backface-visibility: hidden;
}

.han-album__page:hover {
  transform: perspective(1000px) rotateY(-5deg);
}


/* ============================================================
 * 7. 中堂布局 (Main Hall Layout)
 * 中国传统中堂对称布局：中间书画 + 两侧对联
 * 场景：首页、产品展示、文化主题页
 * ============================================================ */
.han-layout-hall {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--han-space-6);
  align-items: start;
}

/* 中堂对联 */
.han-couplet-panel {
  writing-mode: vertical-rl;
  background: var(--han-color-bg-surface);
  border: var(--han-border-width) solid var(--han-color-border-strong);
  border-radius: var(--han-radius-sm);
  padding: var(--han-space-6) var(--han-space-5);
  text-align: center;
  font-family: var(--han-font-kai);
  font-size: var(--han-fs-xl);
  color: var(--han-color-ink-700);
  letter-spacing: var(--han-space-3);
  line-height: 2;
  max-height: 500px;
}

/* 中堂主画 */
.han-hall-center {
  position: relative;
  background: var(--han-color-bg-surface);
  border: var(--han-border-width) solid var(--han-color-border-strong);
  border-radius: var(--han-radius-md);
  padding: var(--han-space-8);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.han-hall-center::before {
  content: "";
  position: absolute;
  inset: var(--han-space-3);
  border: var(--han-border-width) solid var(--han-color-gold-400);
  border-radius: calc(var(--han-radius-md) - var(--han-space-3));
  opacity: 0.4;
  pointer-events: none;
}

/* 中堂匾额 */
.han-hall-plaque {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
}

/* 中堂对联横批 */
.han-hall-horizontal {
  text-align: center;
  padding: var(--han-space-3) var(--han-space-6);
  background: var(--han-color-bg-surface);
  border: var(--han-border-width) solid var(--han-color-border-strong);
  border-radius: var(--han-radius-sm);
  font-family: var(--han-font-kai);
  font-size: var(--han-fs-lg);
  color: var(--han-color-ink-700);
  letter-spacing: var(--han-space-4);
  margin-bottom: var(--han-space-4);
  display: inline-block;
}


/* ============================================================
 * 8. 印章相框 (Seal Frame)
 * 带四角装饰的中式相框
 * 场景：图片展示、书画展示、产品图片
 * ============================================================ */
.han-frame {
  position: relative;
  display: inline-block;
  padding: var(--han-space-3);
  background: var(--han-color-bg-surface);
  border: var(--han-border-width-2) solid var(--han-color-border-strong);
  border-radius: var(--han-radius-md);
  box-shadow: var(--han-shadow-lg);
}

/* 四角装饰 */
.han-frame__corner {
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 2 L2 8 M2 2 L8 2 M2 2 L6 6' fill='none' stroke='%23c0392b' stroke-width='1.5'/%3E%3Ccircle cx='4' cy='4' r='1.5' fill='%23c0392b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}

.han-frame__corner--tl { top: var(--han-space-1); left: var(--han-space-1); }
.han-frame__corner--tr { top: var(--han-space-1); right: var(--han-space-1); transform: scaleX(-1); }
.han-frame__corner--bl { bottom: var(--han-space-1); left: var(--han-space-1); transform: scaleY(-1); }
.han-frame__corner--br { bottom: var(--han-space-1); right: var(--han-space-1); transform: scale(-1); }

.han-frame > img,
.han-frame > .han-frame__content {
  border-radius: var(--han-radius-sm);
  display: block;
}

/* 卷轴画框 */
.han-frame--scroll {
  padding: var(--han-space-6) var(--han-space-5);
  background: linear-gradient(
    180deg,
    var(--han-color-gold-400) 0%,
    var(--han-color-gold-300) 8%,
    var(--han-color-bg-surface) 8%,
    var(--han-color-bg-surface) 92%,
    var(--han-color-gold-300) 92%,
    var(--han-color-gold-400) 100%
  );
  border: var(--han-border-width) solid var(--han-color-gold-600);
}

/* 木质画框 */
.han-frame--wood {
  background:
    repeating-linear-gradient(
      90deg,
      #6B4423 0px,
      #6B4423 1px,
      #7A5230 1px,
      #7A5230 2px
    );
  border: var(--han-border-width-2) solid #4A2F15;
  padding: var(--han-space-4);
}

.han-frame--wood::before {
  content: "";
  position: absolute;
  inset: var(--han-space-2);
  border: var(--han-border-width) solid rgba(212, 175, 55, 0.5);
  border-radius: var(--han-radius-sm);
  pointer-events: none;
}


/* ============================================================
 * 9. 中式封面 (Chinese Cover)
 * 传统蓝布封面或红金封面样式
 * 场景：手册封面、书籍封面、产品目录
 * ============================================================ */
.han-cover {
  position: relative;
  background: var(--han-color-bg-surface);
  border: var(--han-border-width-2) solid var(--han-color-ink-700);
  border-radius: var(--han-radius-sm);
  box-shadow: var(--han-shadow-xl);
  overflow: hidden;
}

/* 封面装饰线 */
.han-cover::before {
  content: "";
  position: absolute;
  inset: var(--han-space-4);
  border: var(--han-border-width) solid var(--han-color-gold-500);
  border-radius: calc(var(--han-radius-sm) - var(--han-space-4));
  pointer-events: none;
}

/* 封面标题区 */
.han-cover__header {
  padding: var(--han-space-10) var(--han-space-6) var(--han-space-5);
  text-align: center;
  position: relative;
}

.han-cover__title {
  font-family: var(--han-font-kai);
  font-weight: var(--han-title-weight, var(--han-fw-bold));
  font-size: var(--han-fs-4xl);
  color: var(--han-color-ink-700);
  letter-spacing: var(--han-title-spacing, var(--han-ls-widest));
  margin-bottom: var(--han-space-3);
}

.han-cover__author {
  font-family: var(--han-font-song);
  font-size: var(--han-fs-sm);
  color: var(--han-color-text-secondary);
  letter-spacing: var(--han-ls-wide);
}

/* 封面插画区 */
.han-cover__illustration {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--han-gradient-paper);
  border-top: var(--han-border-width) solid var(--han-color-ink-200);
  border-bottom: var(--han-border-width) solid var(--han-color-ink-200);
}

/* 封面底部 */
.han-cover__footer {
  padding: var(--han-space-5) var(--han-space-6) var(--han-space-6);
  text-align: center;
  position: relative;
}

.han-cover__seal {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background: var(--han-stamp-bg);
  color: var(--han-stamp-text);
  font-family: var(--han-font-kai);
  font-size: var(--han-fs-xs);
  align-items: center;
  justify-content: center;
  border-radius: var(--han-radius-sm);
  transform: rotate(-5deg);
  box-shadow: var(--han-shadow-md);
  line-height: 1.2;
  text-align: center;
}

/* 蓝色布面封面 */
.han-cover--blue {
  background: linear-gradient(135deg, #2C3E50 0%, #3D566E 100%);
  color: #ECF0F1;
}

.han-cover--blue::before { border-color: #D4AF37; }
.han-cover--blue .han-cover__title { color: #F5E6C8; }
.han-cover--blue .han-cover__author { color: rgba(245, 230, 200, 0.7); }

/* 红色烫金封面 */
.han-cover--red {
  background: linear-gradient(135deg, #5C1F1F 0%, #8B3A3A 100%);
  color: #FFD700;
}

.han-cover--red::before { border-color: #FFD700; }
.han-cover--red .han-cover__title { color: #FFD700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.han-cover--red .han-cover__author { color: rgba(255, 215, 0, 0.8); }


/* ============================================================
 * 10. 古建装饰 (Architectural Decorations)
 * 中国古建筑元素：瓦当、斗拱、藻井
 * 场景：页面顶/底部装饰、品牌区域
 * ============================================================ */

/* 瓦当（屋檐装饰） */
.han-tile {
  display: flex;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.han-tile > li {
  width: 24px;
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--han-color-ink-500) 0%,
    var(--han-color-ink-700) 100%
  );
  border-radius: 12px 12px 0 0;
  margin: 0 1px;
  position: relative;
}

.han-tile > li::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 8px;
  background: var(--han-color-gold-400);
  border-radius: 50%;
  opacity: 0.8;
}

/* 藻井（天花板装饰） */
.han-ceiling {
  width: 100%;
  height: 120px;
  background:
    radial-gradient(
      circle at center,
      var(--han-color-gold-400) 0%,
      var(--han-color-gold-500) 20%,
      var(--han-color-gold-600) 40%,
      var(--han-color-ink-700) 100%
    );
  position: relative;
  border-radius: 0 0 var(--han-radius-lg) var(--han-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -4px 12px rgba(0, 0, 0, 0.3);
}

.han-ceiling::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: repeating-linear-gradient(
    45deg,
    transparent 0px,
    transparent 8px,
    rgba(255, 255, 255, 0.1) 8px,
    rgba(255, 255, 255, 0.1) 10px
  );
  border-radius: inherit;
}


/* ============================================================
 * 响应式适配
 * ============================================================ */
@media (max-width: 768px) {
  .han-scroll { padding: var(--han-space-5); }
  .han-plaque { padding: var(--han-space-3) var(--han-space-6); font-size: var(--han-fs-lg); }
  .han-screen { grid-template-columns: 1fr; }
  .han-screen--six { grid-template-columns: 1fr 1fr; }
  .han-album--open { grid-template-columns: 1fr; }
  .han-album--open::before { display: none; }
  .han-layout-hall { grid-template-columns: 1fr; }
  .han-couplet-panel { writing-mode: horizontal-tb; max-height: none; }
  .han-frame { padding: var(--han-space-2); }
  .han-lantern-group { gap: var(--han-space-6); }
}

@media (max-width: 480px) {
  .han-plaque--lg { font-size: var(--han-fs-2xl); padding: var(--han-space-3) var(--han-space-8); }
  .han-fan { width: 240px; height: 140px; }
}


/* ============================================================
 * 动效辅助类
 * ============================================================ */

/* 灯笼组依次点亮 */
.han-lantern-group.is-animated .han-lantern__body {
  animation: han-lantern-glow 2s var(--han-ease-in-out) infinite;
}

@keyframes han-lantern-glow {
  0%, 100% {
    box-shadow:
      0 4px 12px rgba(192, 57, 43, 0.4),
      inset 0 2px 8px rgba(255, 200, 100, 0.3),
      inset 0 -2px 8px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow:
      0 4px 20px rgba(255, 200, 100, 0.8),
      inset 0 2px 12px rgba(255, 220, 150, 0.5),
      inset 0 -2px 8px rgba(0, 0, 0, 0.2);
  }
}

/* 匾额光泽效果 */
.han-plaque--shine {
  position: relative;
  overflow: hidden;
}

.han-plaque--shine::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 215, 128, 0.2) 50%,
    transparent 70%
  );
  animation: han-plaque-shine 4s var(--han-ease-in-out) infinite;
}

@keyframes han-plaque-shine {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}