/* ============================================================
 * 汉设计系统 · 组件样式 (Components)
 * 所有组件使用 --dq- 设计令牌
 * 依赖：tokens.css + base.css
 * ============================================================ */


/* ============================================================
 * 1. 印章按钮 (Seal Button)
 * 红色方形印章风格按钮，模拟印章盖下的视觉感。
 * 场景：关键 CTA、提交按钮、落款确认。
 * ============================================================ */
.dq-btn-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dq-space-2);
  min-width: var(--dq-seal-size);
  height: var(--dq-seal-size);
  padding: 0 var(--dq-space-5);
  background-color: var(--dq-seal-bg);
  color: var(--dq-seal-text);
  font-family: var(--dq-font-kai);
  font-size: var(--dq-fs-md);
  font-weight: var(--dq-title-weight, var(--dq-fw-bold));
  letter-spacing: var(--dq-ls-wide);
  border: var(--dq-border-width, var(--dq-border-width-2)) solid var(--dq-seal-border);
  border-radius: var(--dq-seal-radius);
  transform: rotate(var(--dq-seal-tilt));
  box-shadow: var(--dq-shadow-seal);
  cursor: pointer;
  position: relative;
  transition:
    transform var(--dq-duration-normal) var(--dq-ease-spring),
    background-color var(--dq-duration-normal) var(--dq-ease-out),
    box-shadow var(--dq-duration-normal) var(--dq-ease-out),
    filter var(--dq-duration-normal) var(--dq-ease-out);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.dq-btn-seal:hover {
  background-color: var(--dq-seal-bg-hover);
  transform: rotate(var(--dq-seal-tilt)) scale(1.05);
  box-shadow: 3px 6px 16px rgba(192, 57, 43, 0.5);
  filter: brightness(1.08);
}

.dq-btn-seal:active {
  transform: rotate(var(--dq-seal-tilt)) scale(0.97);
  box-shadow: 1px 2px 4px rgba(192, 57, 43, 0.4);
  transition-duration: 80ms;
}

.dq-btn-seal:focus-visible {
  outline: var(--dq-border-width-2) solid var(--dq-color-gold-500);
  outline-offset: 3px;
}

.dq-btn-seal::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: calc(var(--dq-seal-radius) - 1px);
  pointer-events: none;
}

/* 大号印章按钮 */
.dq-btn-seal--lg {
  min-width: 72px;
  height: 72px;
  padding: 0 var(--dq-space-6);
  font-size: var(--dq-fs-lg);
}

/* 小号印章按钮 */
.dq-btn-seal--sm {
  min-width: 40px;
  height: 40px;
  padding: 0 var(--dq-space-3);
  font-size: var(--dq-fs-sm);
}

/* 圆形印章按钮 */
.dq-btn-seal--circle {
  min-width: var(--dq-seal-size);
  width: var(--dq-seal-size);
  height: var(--dq-seal-size);
  padding: 0;
  border-radius: 50%;
}

/* 带印章盖下动画 */
.dq-btn-seal--drop {
  animation: dq-seal-drop 0.6s var(--dq-ease-spring);
}


/* ============================================================
 * 2. 水墨导航 (Ink Navigation)
 * 底部毛笔下划线 + 墨迹扩散悬停效果。
 * 场景：网站顶部导航、菜单导航。
 * ============================================================ */
.dq-navbar {
  position: sticky;
  top: 0;
  z-index: var(--dq-z-sticky);
  height: var(--dq-nav-height);
  background-color: rgba(250, 246, 234, 0.85);
  border-bottom: 1px solid var(--dq-color-ink-200);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transition: box-shadow var(--dq-duration-normal) var(--dq-ease-out),
              background-color var(--dq-duration-normal) var(--dq-ease-out);
}

.dq-navbar.is-scrolled {
  box-shadow: 0 2px 12px rgba(26, 24, 22, 0.08);
  background-color: rgba(250, 246, 234, 0.95);
}

.dq-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--dq-container-lg);
  margin: 0 auto;
  padding: 0 var(--dq-space-6);
}

.dq-navbar__brand {
  font-family: var(--dq-font-kai);
  font-size: var(--dq-fs-xl);
  font-weight: var(--dq-fw-bold);
  color: var(--dq-color-text-primary);
  letter-spacing: var(--dq-ls-wider);
}

.dq-navbar__brand span {
  color: var(--dq-color-vermilion-500);
}

.dq-navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--dq-space-6);
  list-style: none;
}

.dq-navbar__item {
  position: relative;
  padding: var(--dq-space-2) var(--dq-space-1);
  font-family: var(--dq-font-kai);
  font-size: var(--dq-fs-base);
  color: var(--dq-nav-text);
  letter-spacing: var(--dq-ls-wide);
  cursor: pointer;
  transition: color var(--dq-duration-normal) var(--dq-ease-out);
}

.dq-navbar__item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--dq-nav-ink-color) 15%,
    var(--dq-nav-ink-color) 85%,
    transparent 100%
  );
  transition: transform var(--dq-duration-slow) var(--dq-ease-out);
  transform-origin: center;
}

.dq-navbar__item:hover {
  color: var(--dq-nav-text-hover);
}

.dq-navbar__item:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.dq-navbar__item--active {
  color: var(--dq-nav-text-hover);
}

.dq-navbar__item--active::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 0.8;
}

/* 移动端汉堡按钮 */
.dq-navbar__toggle {
  display: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.dq-navbar__toggle span {
  display: block;
  height: 2px;
  width: 24px;
  background: var(--dq-color-ink-700);
  border-radius: 2px;
  transition: all var(--dq-duration-normal) var(--dq-ease-out);
}

.dq-navbar__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.dq-navbar__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.dq-navbar__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .dq-navbar__toggle { display: flex; }
  .dq-navbar__menu {
    position: absolute;
    top: var(--dq-nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--dq-nav-bg);
    border-bottom: var(--dq-border);
    padding: var(--dq-space-4) var(--dq-space-6);
    gap: var(--dq-space-4);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: all var(--dq-duration-normal) var(--dq-ease-out);
  }
  .dq-navbar--open .dq-navbar__menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}


/* ============================================================
 * 3. 卷轴卡片 (Scroll Card)
 * 模拟中国传统卷轴形态，左右两端有卷轴头。
 * 场景：产品展示、文章卡片、内容容器。
 * ============================================================ */
.dq-card-scroll {
  position: relative;
  background-color: var(--dq-scroll-bg);
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.6) 0%,
      transparent 30%,
      transparent 70%,
      rgba(139, 115, 85, 0.04) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1'/%3E%3CfeColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.78 0 0 0 0 0.65 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23s)'/%3E%3C/svg%3E");
  border-radius: var(--dq-radius-lg);
  box-shadow: var(--dq-scroll-shadow);
  padding: var(--dq-space-7) var(--dq-space-6);
  margin: var(--dq-space-6) 0;
  transition: transform var(--dq-duration-slow) var(--dq-ease-out),
              box-shadow var(--dq-duration-slow) var(--dq-ease-out);
}

.dq-card-scroll:hover {
  transform: translateY(-4px);
  box-shadow: var(--dq-shadow-xl);
}

/* 左右卷轴头 */
.dq-card-scroll::before,
.dq-card-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  background: linear-gradient(
    90deg,
    var(--dq-scroll-roller) 0%,
    #3a3833 40%,
    #4a4842 60%,
    var(--dq-scroll-roller) 100%
  );
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    2px 0 8px rgba(0, 0, 0, 0.15);
}

.dq-card-scroll::before { left: -10px; }
.dq-card-scroll::after  { right: -10px; }

/* 卷轴装饰铆钉 */
.dq-card-scroll > .dq-scroll-rivet,
.dq-card-scroll::before {
  /* 铆钉通过伪元素添加 */
}

.dq-card-scroll .dq-rivet {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #e9be64, var(--dq-scroll-rivet));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.dq-card-scroll .dq-rivet--tl { top: 6px;  left: 2px; }
.dq-card-scroll .dq-rivet--tr { top: 6px;  right: 2px; }
.dq-card-scroll .dq-rivet--bl { bottom: 6px; left: 2px; }
.dq-card-scroll .dq-rivet--br { bottom: 6px; right: 2px; }

.dq-card-scroll__header {
  font-family: var(--dq-font-kai);
  font-size: var(--dq-fs-xl);
  font-weight: var(--dq-fw-bold);
  color: var(--dq-color-text-primary);
  letter-spacing: var(--dq-ls-wide);
  margin-bottom: var(--dq-space-4);
  padding-bottom: var(--dq-space-3);
  border-bottom: 1px dashed var(--dq-color-ink-200);
}

.dq-card-scroll__body {
  font-size: var(--dq-fs-base);
  line-height: var(--dq-lh-relaxed);
  color: var(--dq-color-text-secondary);
}

.dq-card-scroll__footer {
  margin-top: var(--dq-space-5);
  padding-top: var(--dq-space-4);
  border-top: 1px dashed var(--dq-color-ink-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--dq-fs-sm);
  color: var(--dq-color-text-tertiary);
}

/* 迷你卷轴卡片 */
.dq-card-scroll--sm {
  padding: var(--dq-space-5) var(--dq-space-5);
}


/* ============================================================
 * 4. 窗花边框 (Window Frame)
 * 传统中式窗花纹样边框装饰。
 * 场景：重要区域分区、特殊模块框定。
 * ============================================================ */
.dq-frame-window {
  position: relative;
  padding: var(--dq-space-7) var(--dq-space-6);
  background: var(--dq-color-bg-surface);
  border: var(--dq-border-width) solid var(--dq-color-ink-300);
  border-radius: var(--dq-radius-xl);
  margin: var(--dq-space-6) 0;
}

/* 四角装饰 */
.dq-frame-window::before,
.dq-frame-window::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%235e5a53' stroke-width='1.5'%3E%3Cpath d='M2 2 L2 12 M2 2 L12 2 M2 2 L10 10'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3Cpath d='M8 2 L8 8 L2 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.dq-frame-window::before { top: -2px; left: -2px; }
.dq-frame-window::after  { bottom: -2px; right: -2px; transform: rotate(180deg); }

/* 另外两个角 */
.dq-frame-window > .dq-corner-tr,
.dq-frame-window > .dq-corner-bl {
  position: absolute;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%235e5a53' stroke-width='1.5'%3E%3Cpath d='M26 2 L26 12 M26 2 L16 2 M26 2 L18 10'/%3E%3Ccircle cx='24' cy='4' r='2'/%3E%3Cpath d='M20 2 L20 8 L26 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.dq-frame-window > .dq-corner-tr { top: -2px; right: -2px; }
.dq-frame-window > .dq-corner-bl { bottom: -2px; left: -2px;  transform: rotate(180deg); }

/* 中心窗格纹样（可选装饰） */
.dq-frame-window--ornament::selection {
  background: transparent;
}

/* 竖排纹样装饰线 */
.dq-frame-window--pattern {
  background-image:
    linear-gradient(to bottom, transparent 48%, var(--dq-color-ink-200) 48%, var(--dq-color-ink-200) 52%, transparent 52%),
    linear-gradient(to right, transparent 48%, var(--dq-color-ink-200) 48%, var(--dq-color-ink-200) 52%, transparent 52%);
  background-size: 24px 24px;
  background-position: center;
}

/* 金边装饰 */
.dq-frame-window--gold {
  border-color: var(--dq-color-gold-400);
  box-shadow:
    0 0 0 3px var(--dq-color-bg-surface),
    0 0 0 4px var(--dq-color-gold-300);
}

.dq-frame-window--gold::before,
.dq-frame-window--gold::after,
.dq-frame-window--gold > .dq-corner-tr,
.dq-frame-window--gold > .dq-corner-bl {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23c68a2e' stroke-width='1.5'%3E%3Cpath d='M2 2 L2 12 M2 2 L12 2 M2 2 L10 10'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3Cpath d='M8 2 L8 8 L2 8'/%3E%3C/svg%3E");
}


/* ============================================================
 * 5. 水墨分割线 (Ink Divider)
 * 毛笔笔触效果的分割线。
 * 场景：章节分隔、内容区分。
 * ============================================================ */
.dq-divider-ink {
  position: relative;
  height: 24px;
  margin: var(--dq-space-7) 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dq-space-4);
}

.dq-divider-ink::before,
.dq-divider-ink::after {
  content: "";
  flex: 1;
  max-width: 40%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--dq-color-ink-400) 10%,
    var(--dq-color-ink-500) 50%,
    var(--dq-color-ink-400) 90%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(0.5px);
}

.dq-divider-ink > .dq-divider-dot {
  width: 8px;
  height: 8px;
  background: var(--dq-color-ink-600);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--dq-color-paper-100),
              0 0 0 4px var(--dq-color-ink-300);
}

/* 带印章装饰的分割线 */
.dq-divider-ink--seal > .dq-divider-dot {
  width: 28px;
  height: 28px;
  background: var(--dq-color-vermilion-500);
  color: var(--dq-color-paper-100);
  border-radius: var(--dq-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dq-font-kai);
  font-size: var(--dq-fs-xs);
  font-weight: var(--dq-fw-bold);
  letter-spacing: 0;
  box-shadow: var(--dq-shadow-seal);
  transform: rotate(-3deg);
}

/* 毛笔墨痕不对称分割线 */
.dq-divider-ink--brush {
  height: 32px;
}

.dq-divider-ink--brush::before {
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--dq-color-ink-700) 8%,
    var(--dq-color-ink-600) 45%,
    var(--dq-color-ink-700) 85%,
    transparent 100%
  );
  filter: blur(0.8px);
  border-radius: 50%;
}

.dq-divider-ink--brush::after {
  height: 1px;
  opacity: 0.4;
  margin-top: 8px;
  filter: blur(1px);
}

/* 双分割线（印章居中型） */
.dq-divider-ink--double::before,
.dq-divider-ink--double::after {
  height: 1px;
}


/* ============================================================
 * 6. 印章 (Stamp)
 * 红色方形印章组件，可用于署名或强调。
 * 场景：文章署名、品牌印章、认证标记。
 * ============================================================ */
.dq-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dq-stamp-size);
  height: var(--dq-stamp-size);
  background-color: var(--dq-stamp-bg);
  color: var(--dq-stamp-text);
  font-family: var(--dq-font-kai);
  font-size: var(--dq-stamp-font);
  font-weight: var(--dq-fw-bold);
  letter-spacing: 0;
  line-height: 1;
  border-radius: var(--dq-stamp-border-radius);
  box-shadow: var(--dq-shadow-seal);
  transform: rotate(-5deg);
  position: relative;
  overflow: hidden;
  user-select: none;
  padding: var(--dq-space-2);
  text-align: center;
  transition: transform var(--dq-duration-slow) var(--dq-ease-spring);
}

.dq-stamp:hover {
  transform: rotate(-5deg) scale(1.1);
}

/* 印章斑驳效果（通过伪元素模拟岁月痕迹） */
.dq-stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15) 0%, transparent 25%),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.1) 0%, transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.08) 0%, transparent 15%);
  pointer-events: none;
}

/* 印章文字排版（竖排两字或四字） */
.dq-stamp--2char {
  font-size: calc(var(--dq-stamp-font) * 1.4);
  flex-direction: column;
  gap: 2px;
}

.dq-stamp--4char {
  font-size: calc(var(--dq-stamp-font) * 1.1);
  flex-direction: column;
  gap: 1px;
}

.dq-stamp--multi {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: var(--dq-space-1);
  font-size: calc(var(--dq-stamp-font) * 0.9);
}

/* 印章带边框 */
.dq-stamp--border {
  border: var(--dq-border-width-2) solid var(--dq-color-gold-500);
  background: var(--dq-color-vermilion-500);
}

/* 印泥效果（印章底部阴影） */
.dq-stamp::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 10%;
  right: 10%;
  height: 6px;
  background: radial-gradient(ellipse at center, rgba(192, 57, 43, 0.35) 0%, transparent 70%);
  filter: blur(3px);
  pointer-events: none;
}

/* 大号印章 */
.dq-stamp--lg {
  --dq-stamp-size: 72px;
  --dq-stamp-font: 24px;
}

/* 小号印章 */
.dq-stamp--sm {
  --dq-stamp-size: 36px;
  --dq-stamp-font: 12px;
}

/* 方形印章（正正方方，不倒角） */
.dq-stamp--square {
  --dq-stamp-border-radius: 0;
}

/* 印章组（用于署名） */
.dq-stamp-group {
  display: inline-flex;
  gap: var(--dq-space-3);
  align-items: flex-end;
}


/* ============================================================
 * 辅助组件：分隔和标签
 * ============================================================ */

/* 标签 */
.dq-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--dq-space-1) var(--dq-space-3);
  font-family: var(--dq-font-sans);
  font-size: var(--dq-fs-xs);
  color: var(--dq-color-text-secondary);
  background: var(--dq-color-bg-surface);
  border: var(--dq-border);
  border-radius: var(--dq-radius-pill);
  letter-spacing: var(--dq-ls-wide);
}

.dq-tag--vermilion {
  color: var(--dq-color-vermilion-600);
  border-color: var(--dq-color-vermilion-300);
  background: var(--dq-color-vermilion-50);
}

.dq-tag--gold {
  color: var(--dq-color-gold-700);
  border-color: var(--dq-color-gold-300);
  background: var(--dq-color-gold-50);
}

/* 徽章 */
.dq-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--dq-space-2);
  font-size: var(--dq-fs-xs);
  font-weight: var(--dq-fw-bold);
  color: var(--dq-color-paper-100);
  background: var(--dq-color-vermilion-500);
  border-radius: var(--dq-radius-pill);
}


/* ============================================================
 * 动画辅助类
 * ============================================================ */
.dq-animate-fade-in {
  animation: dq-fade-in var(--dq-duration-slower) var(--dq-ease-out) both;
}

.dq-animate-fade-in-up {
  animation: dq-fade-in-up var(--dq-duration-slower) var(--dq-ease-out) both;
}

.dq-animate-ink-spread {
  animation: dq-ink-spread var(--dq-duration-slower) var(--dq-ease-out) both;
}

.dq-animate-seal-drop {
  animation: dq-seal-drop 0.6s var(--dq-ease-spring) both;
}

.dq-animate-sway {
  animation: dq-sway 4s var(--dq-ease-inout) infinite;
}


/* ============================================================
 * 浏览器兼容与降级
 * ============================================================ */

/* backdrop-filter 降级 */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .dq-navbar {
    background-color: var(--dq-color-bg);
    opacity: 0.95;
  }
}

/* writing-mode 降级 */
@supports not (writing-mode: vertical-rl) {
  .dq-vertical {
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: left top;
  }
}

/* 减少动画时移除 transform */
@media (prefers-reduced-motion: reduce) {
  .dq-btn-seal,
  .dq-stamp {
    transform: none !important;
  }
  .dq-card-scroll:hover {
    transform: none;
  }
}