/* =============================================================
   故宫博物院 · 藏品与文创展示 —— 自定义国风样式
   目录：
   00 主题变量        05 卡片（hover 位移 / 3D 翻转 / 迷你浮窗）
   01 基础与滚动条    06 图片放大弹窗
   02 加载动画        07 回到顶部 / 音乐开关
   03 导航栏          08 底部区域
   04 Banner 轮播     09 响应式与无障碍
   ============================================================= */

/* ---------- 00 主题变量：改配色只改这里 ---------- */
:root {
  --zhuhong: #9D2327;              /* 故宫朱红 */
  --liujin:  #D4AF37;              /* 鎏金 */
  --liujin-light: #E8CE85;
  --liujin-deep:  #A8842A;
  --mihei:   #F8F3E6;              /* 米白 */
  --mihei-paper: #FCF8EE;          /* 宣纸白（卡片底） */
  --anhei:   #2C2018;              /* 深灰黑 */
  --ease:    cubic-bezier(.22, .68, .16, 1);

  /* 祥云底纹（内联 SVG，无需外部图片） */
  --cloud-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='140' viewBox='0 0 200 140'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M40,96c-18,0-28-11-28-24s11-23 25-22c4-18 20-30 39-30 20,0 36,14 39,33 4-1 7-2 11-2 15,0 26,11 26,25s-11,20-26,20z'/%3E%3Cpath d='M96,120c10,0 18-7 18-16s-8-15-18-15'/%3E%3Cpath d='M126,72c14,0 24-9 24-20'/%3E%3Cpath d='M12,118c14,0 24-9 24-20'/%3E%3C/g%3E%3C/svg%3E");
  /* 回纹分割线 */
  --fret-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 16'%3E%3Cpath d='M2 14V3h18v8H8V7h7' fill='none' stroke='%23D4AF37' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ---------- 01 基础 ---------- */
* { -webkit-tap-highlight-color: transparent; }

body {
  overflow-x: hidden;
  background-color: var(--mihei);
  /* 页面整体淡米白纸纹 */
  background-image:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, .07), transparent 55%);
}

::selection { background: var(--zhuhong); color: var(--mihei); }

/* 细金边滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--mihei); }
::-webkit-scrollbar-thumb { background: rgba(157, 35, 39, .45); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: var(--liujin); }

/* 中文圆角边框：分区通用外框 */
.ring-cn {
  border: 1px solid rgba(212, 175, 55, .34);
  border-radius: 14px;
  position: relative;
}
.ring-cn::before,
.ring-cn::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--liujin);
  opacity: .8;
}
.ring-cn::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.ring-cn::after  { bottom: 7px; right: 7px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

/* 通用按钮 */
.btn-primary,
.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 2rem;
  border-radius: 999px;
  font-weight: 700; letter-spacing: .22em;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, color .35s, border-color .35s;
}
.btn-primary {
  background: linear-gradient(120deg, var(--zhuhong), #7A1B1E);
  color: var(--mihei);
  box-shadow: 0 10px 26px -10px rgba(157, 35, 39, .85);
}
.btn-ghost {
  border: 1px solid rgba(212, 175, 55, .7);
  color: #7A1B1E;
  background: rgba(248, 243, 230, .35);
}
.btn-primary:hover,
.btn-ghost:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -12px rgba(44, 32, 24, .5); }
.btn-ghost:hover { background: rgba(212, 175, 55, .18); }

/* 分区标题 + 回纹分割线 */
.section-title {
  margin-top: .75rem;
  font-size: clamp(1.8rem, 5vw, 2.9rem);
  font-weight: 900;
  letter-spacing: .3em;
  color: var(--anhei);
  text-shadow: 0 2px 0 rgba(212, 175, 55, .35);
}
.fret-divider {
  width: 190px; height: 16px;
  background-image: var(--fret-url);
  background-repeat: repeat-x;
  background-size: 24px 16px;
  opacity: .85;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

/* ---------- 02 加载动画 ---------- */
#loader { transition: opacity .9s ease, visibility .9s ease; }
#loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-cloud { animation: floatY 3.4s ease-in-out infinite; }
.lc-path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw 3.4s ease-in-out infinite; }
.lc-path:nth-child(2) { animation-delay: .25s; }
.lc-path:nth-child(3) { animation-delay: .5s; }
.loader-bar { animation: barSlide 1.7s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(-6px) } 50% { transform: translateY(6px) } }
@keyframes draw { 0% { stroke-dashoffset: 420 } 55% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: -420 } }
@keyframes barSlide { 0% { transform: translateX(-120%) } 100% { transform: translateX(320%) } }

/* ---------- 03 导航栏 ---------- */
#nav { background: transparent; }
#nav.is-scrolled {
  background: rgba(44, 32, 24, .88);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 10px 34px -18px rgba(0, 0, 0, .8);
  border-bottom: 1px solid rgba(212, 175, 55, .28);
}
.nav-link {
  position: relative;
  padding: .45rem .7rem;
  font-size: .92rem;
  letter-spacing: .18em;
  color: rgba(248, 243, 230, .82);
  transition: color .3s;
  white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute; left: 50%; right: 50%; bottom: .1rem;
  height: 2px; background: var(--liujin);
  transition: left .35s var(--ease), right .35s var(--ease);
}
.nav-link:hover { color: var(--liujin-light, #E8CE85); }
.nav-link.is-active { color: var(--liujin); }
.nav-link.is-active::after { left: .7rem; right: .7rem; }
.nav-links { scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }

.icon-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 40px; min-width: 40px; padding: 0 .6rem;
  justify-content: center;
  border: 1px solid rgba(212, 175, 55, .45);
  border-radius: 999px;
  color: rgba(248, 243, 230, .9);
  background: rgba(248, 243, 230, .06);
  transition: all .3s var(--ease);
}
.icon-btn:hover { border-color: var(--liujin); color: var(--liujin); transform: translateY(-2px); }
.icon-btn[aria-pressed="true"] { border-color: var(--liujin); color: var(--liujin); background: rgba(212, 175, 55, .14); }

.clear-btn {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; line-height: 1;
  color: var(--anhei-mute, #8A7A66);
  background: rgba(44, 32, 24, .08);
  transition: all .25s;
}
.clear-btn:hover { background: var(--zhuhong); color: var(--mihei); }
.search-input { transition: border-color .3s, box-shadow .3s, background .3s; }
.search-input:focus { box-shadow: 0 0 0 3px rgba(212, 175, 55, .22); background: rgba(248, 243, 230, .16); }

/* 分类筛选按钮 */
.chip {
  padding: .55rem 1.4rem;
  font-size: .9rem; letter-spacing: .2em;
  color: #6B5847;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(212, 175, 55, .45);
  border-radius: 999px;
  transition: all .35s var(--ease);
}
.chip:hover { border-color: var(--liujin); color: var(--zhuhong); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(157, 35, 39, .6); }
.chip.is-active {
  color: var(--mihei);
  background: linear-gradient(120deg, var(--zhuhong), #7A1B1E);
  border-color: transparent;
  box-shadow: 0 10px 22px -10px rgba(157, 35, 39, .9);
}

/* ---------- 04 Banner 轮播（淡入切换 + 缓慢推近） ---------- */
.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.5s ease, visibility 1.5s;
}
.slide.is-active { opacity: 1; visibility: visible; }
.slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 9s linear;
}
.slide.is-active img { transform: scale(1); }
.slide figcaption { transform: translateY(10px); transition: transform 1.2s var(--ease) .3s; }
.slide.is-active figcaption { transform: none; }

.banner-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 20;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-size: 30px; line-height: 1;
  color: var(--mihei);
  border: 1px solid rgba(212, 175, 55, .5);
  border-radius: 50%;
  background: rgba(44, 32, 24, .35);
  backdrop-filter: blur(4px);
  transition: all .35s var(--ease);
}
.banner-arrow:hover { background: var(--zhuhong); border-color: var(--liujin); box-shadow: 0 0 24px rgba(212, 175, 55, .55); }
@media (max-width: 640px) { .banner-arrow { display: none; } }

.banner-dot {
  width: 34px; height: 4px; border-radius: 4px;
  background: rgba(248, 243, 230, .4);
  transition: all .45s var(--ease);
}
.banner-dot.is-active { width: 56px; background: linear-gradient(90deg, var(--liujin-deep, #A8842A), var(--liujin)); }

.scroll-cue { position: relative; overflow: hidden; }
.scroll-cue::after {
  content: '';
  position: absolute; left: 50%; top: 7px;
  width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 3px; background: currentColor;
  animation: cueDrop 1.9s ease-in-out infinite;
}
@keyframes cueDrop { 0% { transform: translateY(-6px); opacity: 0 } 35% { opacity: 1 } 100% { transform: translateY(16px); opacity: 0 } }

/* ---------- 05 滚动入场动画 ---------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* 筛选隐藏时：原地淡出收缩（!important 保证覆盖 .is-visible） */
.card-fade {
  opacity: 0 !important;
  transform: scale(.94) !important;
  transition: opacity .3s ease, transform .3s ease !important;
}

/* ---------- 06 卡片：hover 位移 / 金边发光 / 3D 翻转 / 迷你浮窗 ---------- */
.card {
  position: relative;
  perspective: 1500px;
  border-radius: 16px;
  background: var(--mihei-paper, #FCF8EE);
  border: 1px solid rgba(212, 175, 55, .35);
  box-shadow: 0 10px 26px -20px rgba(44, 32, 24, .8);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  outline: none;
}
/* ① 轻微向上位移 + 金色描边发光 */
.card:hover, .card:focus-visible {
  transform: translateY(-12px);
  border-color: var(--liujin);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, .9),
    0 26px 48px -24px rgba(44, 32, 24, .85),
    0 0 46px -10px rgba(212, 175, 55, .75);
  z-index: 30;
}
.card:focus-visible { outline: 2px dashed var(--liujin); outline-offset: 4px; }

/* 3D 翻转容器：正反两面用 grid 叠放，容器高度自动取较高者 */
.card-3d {
  display: grid;
  transform-style: preserve-3d;
  transition: transform .9s var(--ease);
}
.card-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card-back { transform: rotateY(180deg); }
.card:hover .card-3d, .card:focus-visible .card-3d { transform: rotateY(180deg); }

.card-media { position: relative; flex: none; overflow: hidden; background: #EFE6D2; }
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter .6s;
}
.card:hover .card-media img { transform: scale(1.07); filter: saturate(1.06) contrast(1.03); }

/* ② 文字渐亮 */
.card-title { transition: color .4s, text-shadow .4s; }
.card:hover .card-title, .card:focus-visible .card-title {
  color: var(--zhuhong);
  text-shadow: 0 0 16px rgba(212, 175, 55, .55);
}
.card:hover .card-desc, .card:focus-visible .card-desc { color: #6B5847; }

.card-cat {
  position: absolute; top: 12px; left: 12px;
  padding: .25rem .8rem;
  font-size: .72rem; letter-spacing: .22em;
  color: var(--mihei);
  background: linear-gradient(120deg, var(--zhuhong), #7A1B1E);
  border-radius: 999px;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8);
}
.card-zoom-tip {
  position: absolute; right: 10px; bottom: 10px;
  padding: .22rem .6rem;
  font-size: .68rem; letter-spacing: .16em;
  color: var(--anhei);
  background: rgba(248, 243, 230, .85);
  border: 1px solid rgba(212, 175, 55, .7);
  border-radius: 999px;
  opacity: 0; transform: translateY(6px);
  transition: all .4s var(--ease);
}
.card:hover .card-zoom-tip { opacity: 1; transform: none; }

/* 搜索命中非名称字段时的来源标注（如「匹配 · 年代」） */
.card-match {
  position: absolute; top: 12px; right: 12px;
  padding: .25rem .7rem;
  font-size: .68rem; letter-spacing: .12em;
  color: var(--anhei);
  background: rgba(212, 175, 55, .92);
  border-radius: 999px;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8);
}

/* ③ 右下角迷你介绍浮窗 */
.mini-pop {
  position: absolute; right: -6px; bottom: -6px;
  width: min(74%, 250px);
  padding: .85rem 1rem;
  color: var(--mihei);
  background: linear-gradient(140deg, rgba(44, 32, 24, .95), rgba(90, 42, 30, .92));
  border: 1px solid rgba(212, 175, 55, .8);
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
  opacity: 0; visibility: hidden;
  transform: translateY(14px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
  pointer-events: none;
  z-index: 35;
}
.card:hover .mini-pop, .card:focus-visible .mini-pop { opacity: 1; visibility: visible; transform: none; }
.mini-title { font-size: .82rem; font-weight: 700; letter-spacing: .12em; color: var(--liujin); }
.mini-desc { margin-top: .35rem; font-size: .74rem; line-height: 1.7; color: rgba(248, 243, 230, .88); }
.mini-meta { margin-top: .45rem; font-size: .66rem; letter-spacing: .08em; color: rgba(212, 175, 55, .8); }

/* 卡片背面 */
.back-kicker { font-size: .68rem; letter-spacing: .4em; color: var(--liujin-deep, #A8842A); }
.back-title { font-size: 1.2rem; font-weight: 800; letter-spacing: .1em; color: var(--anhei); }
.back-desc { font-size: .82rem; line-height: 1.95; color: #5A4A3A; }
.back-tag {
  padding: .18rem .6rem;
  font-size: .68rem; letter-spacing: .12em;
  color: #6B5847;
  background: rgba(212, 175, 55, .16);
  border: 1px solid rgba(212, 175, 55, .5);
  border-radius: 999px;
}
.back-hint { font-size: .7rem; letter-spacing: .18em; color: var(--zhuhong); }

/* ---------- 07 图片放大弹窗 ---------- */
/* 用 visibility 切换，避免与 Tailwind 的 hidden/flex 工具类冲突 */
#lightbox {
  position: fixed; inset: 0; z-index: 90;
  transition: opacity .38s ease, visibility .38s;
}
#lightbox.is-shut { opacity: 0; visibility: hidden; pointer-events: none; }
[data-lb-anim] { animation: lbPop .5s var(--ease); }
@keyframes lbPop { from { opacity: 0; transform: scale(.92) translateY(18px) } to { opacity: 1; transform: none } }
.lightbox-btn {
  position: absolute; z-index: 5;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--mihei);
  font-size: 1.1rem;
  border: 1px solid rgba(212, 175, 55, .55);
  border-radius: 50%;
  background: rgba(44, 32, 24, .5);
  transition: all .3s var(--ease);
}
.lightbox-btn:hover { background: var(--zhuhong); border-color: var(--liujin); transform: scale(1.06); }
#lightboxPrev, #lightboxNext { top: 50%; transform: translateY(-50%); font-size: 1.6rem; }
#lightboxPrev:hover, #lightboxNext:hover { transform: translateY(-50%) scale(1.06); }

/* 轮播文案切换时的淡出淡入 */
#bannerCaption, #bannerName { transition: opacity .45s var(--ease); }

/* ---------- 08 回到顶部 / 音乐开关 ---------- */
.back-top {
  position: fixed; right: 18px; bottom: 26px; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  color: var(--mihei);
  background: linear-gradient(140deg, var(--zhuhong), #7A1B1E);
  border: 1px solid rgba(212, 175, 55, .85);
  border-radius: 50%;
  box-shadow: 0 12px 26px -12px rgba(157, 35, 39, .9);
  opacity: 0; visibility: hidden;
  transform: translateY(18px) scale(.9);
  transition: all .45s var(--ease);
}
.back-top.is-show { opacity: 1; visibility: visible; transform: none; }
.back-top:hover { box-shadow: 0 0 0 6px rgba(212, 175, 55, .22), 0 16px 30px -12px rgba(157, 35, 39, 1); }

.music-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.music-bars i {
  width: 3px; height: 5px; border-radius: 2px;
  background: currentColor;
  transition: height .3s;
}
#musicToggle[aria-pressed="true"] .music-bars i { animation: bounce .95s ease-in-out infinite; }
#musicToggle[aria-pressed="true"] .music-bars i:nth-child(2) { animation-delay: .18s; }
#musicToggle[aria-pressed="true"] .music-bars i:nth-child(3) { animation-delay: .36s; }
@keyframes bounce { 0%, 100% { height: 4px } 50% { height: 14px } }

/* ---------- 09 底部区域 ---------- */
.fret-top { background-repeat: repeat-x; margin-bottom: 0; width: 100%; }
.fret-bottom { margin: 3rem 0 2rem; }
.footer-h {
  font-size: .92rem; font-weight: 700; letter-spacing: .3em;
  color: var(--liujin);
  margin-bottom: 1.1rem;
}
.footer-link { transition: color .3s, padding-left .3s; }
.footer-link:hover { color: var(--liujin-light, #E8CE85); padding-left: 5px; }

/* ---------- 10 响应式：触屏设备取消翻转，改为直接展示简介 ---------- */
/* 默认（桌面/鼠标）：一句话简介放在背面与浮窗中，正面不重复 */
.card-desc { display: none; }

@media (hover: none) and (pointer: coarse) {
  .card:hover { transform: none; box-shadow: 0 10px 26px -20px rgba(44, 32, 24, .8); }
  .card-3d { transform: none !important; }
  .card-back { display: none; }              /* 触屏不翻转，正面信息即全部 */
  .card-face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .mini-pop { display: none; }              /* 触屏无 hover，隐藏迷你浮窗 */
  .card-zoom-tip { opacity: 1; transform: none; }
  .card-desc { display: block; }            /* 触屏正面强制显示一句话简介 */
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .slide img { transform: none !important; }
}