/* ============================================================
   长和翡翠酒庄 · 交互与增强样式 (电感升级)
   (Tailwind 工具类与品牌色由 index.html 内联 Tailwind 浏览器构建提供；
    本文件仅承载滚动揭示、导航状态、移动菜单、电感光晕、数字动效等增强样式。)
   ============================================================ */

:root {
  --brand-primary: #c79e73;
  --brand-darkgreen: #3E1E22;
  --brand-gold: #C9A227;
  --brand-cream: #FDFBF5;
}

/* ---------- Navigation states ---------- */
#brand-nav {
  background: transparent;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s ease, backdrop-filter 0.45s ease,
    box-shadow 0.45s ease, border-color 0.45s ease;
}
#brand-nav .nav-inner {
  position: relative;
  /* 必须高于整屏移动菜单 #mobile-menu(z-45)，否则菜单浮层会盖住 logo 与 汉堡/X 按钮。
     桌面端下拉面板(.dropdown-panel z-44)是 .nav-inner 的子元素，随父级一同浮于菜单之上，不受影响。 */
  z-index: 60;
  color: #ffffff;
  transition: color 0.35s ease;
}
/* 一离开顶部即进入纯白底态（去毛玻璃，避免偏脏），文字转黑 */
#brand-nav.nav-scrolled {
  background: #ffffff;
  border-top: 1px solid #c79e73;
  border-bottom: 1px solid #c79e73;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(199, 158, 115, 0.55), 0 8px 24px rgba(43, 36, 32, 0.06);
}
#brand-nav.nav-scrolled .nav-inner {
  color: #2B2420;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
#brand-nav #menu-toggle[aria-expanded="true"] { color: #2B2420; }

/* ============================================================
   桌面端 · 全宽二级菜单（复刻玛歌 mega dropdown，动效更丝滑）
   ============================================================ */
/* 页面遮罩：菜单展开时压暗内容，聚焦导航 */
#nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 13, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.45s ease, backdrop-filter 0.45s ease, visibility 0s linear 0.45s;
  z-index: 45;
  pointer-events: none;
}
body.nav-open #nav-overlay {
  opacity: 1;
  visibility: visible;
  background: rgba(20, 16, 13, 0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.5s ease, backdrop-filter 0.5s ease, visibility 0s;
  pointer-events: auto;
}

/* 菜单展开时，导航条强制白底（即便在最顶部），保证可读与一致性 */
body.nav-open #brand-nav {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-bottom-color: #c79e73;
}
body.nav-open #brand-nav .nav-inner { color: #2B2420; }

/* 移动端整屏菜单打开时：导航条与菜单同底（浅灰），logo/汉堡可读 */
body.mobile-menu-open #brand-nav {
  background: #F0F0EE;
  border-bottom: 1px solid rgba(43, 36, 32, 0.08);
  box-shadow: none;
}
body.mobile-menu-open #brand-nav .nav-inner { color: #2B2420; }

/* 下拉面板：默认收起（不可见、上移、指针禁用），展开时"向下延展揭开"（非闪现）
   clip-path 从顶部揭开 + 轻微上移 + 渐入，配合缓出曲线制造"生长延展"感 */
.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #f7f7f7; /* 玛歌面板底色 rgb(247,247,247)，比纯白更沉稳 */
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  border-bottom: 1px solid rgba(199, 158, 115, 0.28);
  box-shadow: 0 24px 48px rgba(43, 36, 32, 0.10);
  /* 收起态：从顶部被完全裁掉（高度为0）+ 略上移 + 透明 */
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  pointer-events: none;
  transition: clip-path 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.52s;
  z-index: 44;
}
.nav-item.open .dropdown-panel {
  /* 展开态：clip-path 完全揭开，面板"从导航栏向下生长"出来 */
  clip-path: inset(0 0 0 0);
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}
/* 面板内布局：卡片固定宽、居中排布（复刻玛歌 sizes=200px 的紧凑卡片，不再全宽拉伸） */
.dropdown-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  padding: 2rem 0 2.4rem;
}
/* 大屏卡片可略放大，但始终保持紧凑（避免整卡过宽） */
@media (min-width: 1600px) {
  .dropdown-grid { gap: 1.8rem; }
}

.dropdown-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--brand-black);
  background: transparent;
  /* 固定窄卡：对齐玛歌 sizes=200px（此前 1fr 拉伸导致卡片过大） */
  flex: 0 0 auto;
  width: 200px;
  /* 入场：从下方淡入，stagger 0.05s 制造玛歌式的"逐张出现"质感；
     位移加大到 14px，配合面板向下延展形成层次 */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 大屏等比放大卡片（保持 200:170 的显示比例） */
@media (min-width: 1600px) { .dropdown-card { width: 216px; } }
@media (min-width: 2200px) { .dropdown-card { width: 240px; } }
.nav-item.open .dropdown-card { opacity: 1; transform: none; }
.nav-item.open .dropdown-card:nth-child(1) { transition-delay: 0.10s; }
.nav-item.open .dropdown-card:nth-child(2) { transition-delay: 0.16s; }
.nav-item.open .dropdown-card:nth-child(3) { transition-delay: 0.22s; }
.nav-item.open .dropdown-card:nth-child(4) { transition-delay: 0.28s; }
.nav-item.open .dropdown-card:nth-child(5) { transition-delay: 0.34s; }

.dc-img {
  display: block;
  overflow: hidden;
  /* 精确复刻玛歌菜单卡片显示尺寸：200 x 170（约 1.18:1，略横） */
  aspect-ratio: 200 / 170;
  background: rgba(43, 36, 32, 0.06);
}
.dc-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.dropdown-card:hover .dc-img img { transform: scale(1.06); }

.dc-title {
  display: block;
  position: relative;
  padding: 0.85rem 0 0.6rem;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--brand-black);
  transition: color 0.3s ease;
}
/* 玛歌式：非激活下划线透明，hover/激活时从中心展开 1px 实线 */
.dc-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--brand-primary);
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.dc-en {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--brand-font-latin);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(43, 36, 32, 0.55);
  transition: color 0.3s ease;
}
.dropdown-card:hover .dc-title { color: var(--brand-primary); }
.dropdown-card:hover .dc-title::after { width: 56%; }
.dropdown-card:hover .dc-en { color: var(--brand-primary); }
/* 一级项当前态：下划线 + 主色 */
.nav-item > .nav-trigger { position: relative; }
.nav-item.open > .nav-trigger { color: var(--brand-primary); }
.nav-item.open > .nav-trigger::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--brand-primary);
}
/* 触发器箭头：展开时旋转 */
.nav-trigger .caret {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  vertical-align: middle;
}
.nav-item.open .caret { transform: rotate(180deg); }

/* ============================================================
   移动端 · 手风琴（借鉴玛歌移动导航：全屏浮层 + 可展开二级）
   ============================================================ */
.mnav-group > .mnav-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
}
.mnav-trigger .m-caret {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.mnav-group.open .m-caret { transform: rotate(180deg); }
/* 二级面板：用 CSS Grid 轨道(0fr→1fr)做丝滑展开——无需 JS 测高、不触发逐帧重排，
   避免旧方案 max-height+scrollHeight 在手机端逐帧布局导致的卡顿与末尾"一顿" */
.mnav-sub {
  display: grid;
  grid-template-rows: 0fr; /* 收起：轨道高度塌为 0 */
  opacity: 0;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease;
}
/* 内层裁剪：grid 子项默认 min-height:auto 无法被 0fr 压扁，必须 min-height:0 + overflow:hidden */
.mnav-sub > .mnav-cards {
  overflow: hidden;
  min-height: 0;
}
.mnav-group.open .mnav-sub { grid-template-rows: 1fr; opacity: 1; }
.mnav-sub a {
  display: block;
  padding: 0.65rem 0 0.65rem 1.1rem;
  font-size: 0.85rem;
  color: rgba(43, 36, 32, 0.75);
  border-left: 1px solid rgba(199, 158, 115, 0.4);
  margin: 0.2rem 0 0.2rem 0.4rem;
  transition: color 0.25s ease, padding-left 0.3s ease;
}
.mnav-sub a:hover { color: var(--brand-primary); padding-left: 1.35rem; }

/* 菜单一级项：打开时错位淡入（玛歌式 stagger） */
.mnav-group {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#mobile-menu.open .mnav-group { opacity: 1; transform: none; }
#mobile-menu.open .mnav-group:nth-child(1) { transition-delay: 0.10s; }
#mobile-menu.open .mnav-group:nth-child(2) { transition-delay: 0.16s; }
#mobile-menu.open .mnav-group:nth-child(3) { transition-delay: 0.22s; }
#mobile-menu.open .mnav-group:nth-child(4) { transition-delay: 0.28s; }

/* ============================================================
   移动端 · 二级图片卡片（复刻玛歌 Dark Mobile：一行两列、图近正方形、object-fit:cover）
   ============================================================ */
.mnav-cards {
  /* 始终为 grid；收起由父级 .mnav-sub 的 0fr 轨道裁剪，避免 display:none 打断过渡 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  padding: 0.9rem 0 0.4rem 0.4rem;
}
.mnav-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--brand-black);
}
.mnav-card .mc-img {
  display: block;
  overflow: hidden;
  /* 接近正方形（玛歌 862x839≈1.03:1），移动端 cover 裁切后视觉为正方形 */
  aspect-ratio: 1 / 1;
  background: rgba(43, 36, 32, 0.06);
}
.mnav-card .mc-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mnav-card:active .mc-img img { transform: scale(1.04); }
.mnav-card .mc-title {
  display: block;
  padding: 0.6rem 0 0.3rem;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--brand-black);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.mnav-card:active .mc-title { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.mnav-card .mc-en {
  display: block;
  font-family: var(--brand-font-latin);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(43, 36, 32, 0.5);
  margin-top: 0.15rem;
}

.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 0;
  background: var(--brand-primary);
  transition: width 0.35s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--brand-primary); }

/* ---------- Mobile menu · 整屏覆盖（沿用原导航条，菜单在导航下方） ---------- */
#mobile-menu {
  /* 整屏铺满，但 z-index 低于导航条(50)，让原导航条(logo+汉堡X)浮在菜单上方 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 去掉 height:100vh（top/bottom:0 已铺满），避免移动端地址栏伸缩触发整层重排 */
  /* 玛歌整屏菜单底色 rgb(240,240,238) */
  background: #F0F0EE;
  /* 顶部留出原导航条高度，内容从导航下方开始 */
  padding-top: var(--nav-h, 88px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-2%);
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.42s;
  z-index: 45;
  overflow-y: auto;
  overscroll-behavior: contain; /* 抑制滚动链到背景，避免展开/收起时背景抖动 */
  -webkit-overflow-scrolling: touch;
}
#mobile-menu.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}
/* 整屏菜单打开时锁定背景滚动：用 position:fixed 而非 overflow:hidden，
   以兼容微信内置浏览器 / iOS Safari 等 webview 的 touchmove 滚动穿透 */
body.mobile-menu-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* 菜单打开时，原导航条强制浅灰底（与菜单同色），logo/汉堡可读 */
body.mobile-menu-open #brand-nav {
  background: #F0F0EE;
  border-bottom: 1px solid rgba(43, 36, 32, 0.08);
  box-shadow: none;
}
body.mobile-menu-open #brand-nav .nav-inner { color: #2B2420; }

/* 移除毛玻璃叠层（修"顶部朦胧"bug）：菜单用纯色底即可 */
#mobile-menu::before,
#mobile-menu::after { content: none; }

/* ---------- Mobile menu footer · 底部语言切换（左下角） ----------
   整屏菜单改为纵向 flex，语言栏由 margin-top:auto 推到左下角；
   选项列表向上弹出（bottom:100%），因此展开时**不改变菜单内容高度**，
   不会出现菜单被撑高/错位。 */
#mobile-menu { display: flex; flex-direction: column; }
#mobile-menu > ul { flex: 0 0 auto; }
.mnav-footer {
  margin-top: auto;             /* 推到菜单底部 */
  padding: 0 1.5rem 1.9rem;     /* px-6 pb-7.5 */
  flex: 0 0 auto;
}
.mnav-lang { position: relative; width: max-content; touch-action: manipulation; }
.mnav-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;   /* 热区高度 ≈44px */
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: 1px solid rgba(43, 36, 32, 0.26);
  border-radius: 2px;
  color: #2B2420;
  font-family: var(--brand-font-display);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

/* 触屏不做 hover 模拟，避免"第一下只出高亮、第二下才生效" */
@media (hover: hover) {
  .mnav-lang-trigger:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
  .mnav-lang-opt:hover { background: rgba(199, 158, 115, 0.16); color: var(--brand-primary); }
}
/* 触屏即时反馈 */
.mnav-lang-trigger:active { border-color: var(--brand-primary); color: var(--brand-primary); }
.mnav-lang-opt:active { background: rgba(199, 158, 115, 0.22); color: var(--brand-primary); }
.mnav-lang-globe { width: 16px; height: 16px; opacity: 0.85; }
.mnav-lang-label { line-height: 1; white-space: nowrap; }
.mnav-lang-caret {
  width: 11px; height: 11px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mnav-lang.open .mnav-lang-caret { transform: rotate(180deg); }
/* 语言列表：向上展开，避免被菜单底部裁切，也不撑高整屏菜单 */
.mnav-lang-menu {
  position: absolute;
  bottom: calc(100% + 0.55rem);
  left: 0;
  min-width: 172px;
  margin: 0; padding: 0.35rem;
  list-style: none;
  background: #FAF8F4;
  border: 1px solid rgba(43, 36, 32, 0.12);
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(43, 36, 32, 0.16);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
  z-index: 5;
}
.mnav-lang.open .mnav-lang-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.mnav-lang-opt {
  display: block; width: 100%; text-align: left;
  padding: 0.72rem 0.8rem;
  background: transparent; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: #2B2420;
  font-family: var(--brand-font-display);
  font-size: 0.95rem; letter-spacing: 0.12em;
  border-radius: 2px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mnav-lang-opt.is-active { color: var(--brand-primary); }
.mnav-lang-opt.is-active::before { content: "·"; margin-right: 0.45rem; color: var(--brand-primary); }

/* ---------- 页脚语言切换 · .ft-lang ----------
   替代原先顶栏/汉堡菜单内的语言入口：页脚承载力更强，不挤占导航，
   且作为静态 <a> 可被搜索引擎识别语种的对应关系。
   深/浅两套皮肤由父级页脚決定，组件本身不带颜色硬编码。 */
.ft-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 1.6rem;
  font-family: var(--brand-font-display, "Cormorant Garamond", serif);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  /* 触屏：禁用双击缩放手势 -> 去掉 300ms 点击判定等待 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* 默认浅底（二级页 .sub-footer 米色） */
  --ft-lang-muted: #8C8279;
  --ft-lang-on: #2B2420;
  --ft-lang-accent: #9C7049;
}
.ft-lang-opt {
  position: relative;
  /* 热区加大到 ≥44×44（移动端可靠一次点中）；
     对称内边距使 box 中心 = 文字中心，换行/对齐不受影响 */
  padding: 0.7rem 0.4rem;
  min-width: 2.75rem;
  text-align: center;
  color: var(--ft-lang-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}
/* 记忆点：金色细线自中心展开，指示当前语种（宽度仍贴合文字，不含热区内边距） */
.ft-lang-opt::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0.36rem;
  height: 1px;
  background: var(--ft-lang-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
/* 按下即给的即时反馈：触屏上没有 hover，必须让用户看到"这点中了"，
   否则会被误以为没点到而再点一次 */
.ft-lang-opt:active { color: var(--ft-lang-accent); }
.ft-lang-opt:active::after { transform: scaleX(1); opacity: 0.8; }
.ft-lang-opt.is-active {
  color: var(--ft-lang-on);
  font-weight: 500;
}
.ft-lang-opt.is-active::after { transform: scaleX(1); }
/* hover 效果只给真实指针设备：触屏上避免"第一次点击只出 hover、第二次才跳转" */
@media (hover: hover) {
  .ft-lang-opt:not(.is-active):hover { color: var(--ft-lang-accent); }
  .ft-lang-opt:not(.is-active):hover::after { transform: scaleX(1); opacity: 0.45; }
}
.ft-lang-sep {
  color: var(--ft-lang-muted);
  opacity: 0.5;
  transform: translateY(-0.12em);
}
/* 首页深色页脚（带背景图）皮肤：白字 + 品牌金强调；
   首页文案块为左对齐容器，这里让语言切换独占一行并整体居中（内页保持原样） */
#footer .ft-lang {
  display: flex;
  width: 100%;
  justify-content: center;
  /* 首页 footer 有背景图/渐变遮罩与 reveal 合成层，抬高语言组件保证命中优先 */
  position: relative;
  z-index: 5;
  --ft-lang-muted: rgba(255, 255, 255, 0.58);
  --ft-lang-on: #ffffff;
  --ft-lang-accent: var(--brand-primary, #c79e73);
}
@media (max-width: 640px) {
  .ft-lang { gap: 0.15rem; font-size: 0.9rem; letter-spacing: 0.12em; }
}

/* ---------- Scroll-reveal animations · 更细腻（小位移、无模糊、缓入） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-left { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal-left.is-visible,
.reveal-right.is-visible { transform: none; }

.reveal-scale { transform: scale(0.985); }
.reveal-scale.is-visible { transform: scale(1); }

/* ---------- Section 入场 · 极简细分隔线（去电感扫光，呼应玛歌章节感） ---------- */
section[id] {
  position: relative;
  isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Hero · 极简滚动指示（去磁吸环，保留纤细竖线） ---------- */
.scroll-cue { animation: cue-bob 2.4s ease-in-out infinite; }
@keyframes cue-bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
  50% { transform: translate(-50%, 8px); opacity: 0.9; }
}
.scroll-line {
  display: block;
  width: 1px;
  height: 40px;
  margin: 0 auto;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 100%);
}

.hero-kicker { animation: hero-fade 1.2s ease both; }
.hero-title { animation: hero-fade 1.2s ease 0.2s both; }
.hero-sub { animation: hero-fade 1.2s ease 0.4s both; }
.hero-cta { animation: hero-fade 1.2s ease 0.6s both; }
@keyframes hero-fade {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Numbers · 纯净数字（去除荧光光晕） ---------- */
.num-glow {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  padding: 0.05em 0.15em;
}
.num-glow::before,
.num-glow::after {
  content: none;
}

/* 数字字符级逐字入场 · reveal-letters（仅作用于已拆分的"叶子"节点）
   去掉 rotateX 3D 旋转：逗号、数字被逐字拆成 inline-block 后，3D 旋转会导致标点旋转偏移错位；
   改为轻微上移 + 淡出，逗号与数字共享同一基线，天然对齐。 */
.reveal-letters > * {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-letters.is-visible > * {
  opacity: 1;
  transform: none;
}

/* 数字渲染 · 整段普通文本（count-up）
   不再逐字拆分：逗号由浏览器按自然语言排版，天然不旋转、不偏移、跨浏览器稳定。
   等宽数字(tnum)保证 count-up 递增时宽度不抖动。 */
[data-counter] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* 数字入场：整块淡入上移（仅 opacity/translate，无旋转，稳定） */
.reveal-number .num-glow {
  opacity: 0;
  transform: translateY(0.24em);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-number.is-visible .num-glow {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-number .num-glow { opacity: 1; transform: none; transition: none; }
}

/* ---------- Parallax image & Hero video ---------- */
.hero-img {
  transition: transform 0.4s ease-out;
  will-change: transform;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

img[data-parallax],
video[data-parallax] {
  will-change: transform;
  transition: transform 0.15s linear;
}

/* Hero 视频渐入 */
.hero-video-enter {
  animation: video-fade-in 2.4s ease both;
}
@keyframes video-fade-in {
  0% { opacity: 0; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- Wine series cards ---------- */
.wine-card {
  position: relative;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease;
}
.wine-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--brand-primary);
  transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}
.wine-card:hover { transform: translateY(-8px); border-top-color: transparent; }
.wine-card:hover::before { width: 100%; }

/* ---------- Scroll progress bar · 极简细线（去发光，克制的金色进度） ---------- */
#scroll-progress {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.1s linear;
  background: var(--brand-primary);
  opacity: 0.9;
}

/* ===== 单品区分标记（Badge）· 系列页 ===== */
.wine-groups { width: 100%; }
.wine-group + .wine-group { margin-top: 3.5rem; }
@media (min-width: 1024px) { .wine-group + .wine-group { margin-top: 5rem; } }

.wg-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 2rem; padding-top: 2.5rem; border-top: 1px solid rgba(199, 158, 115, 0.28); }
.wg-head::after { content: ""; flex: 1; height: 1px; background: rgba(199, 158, 115, 0.28); }
.wg-title { flex: none; font-size: 0.78rem; font-weight: 300; letter-spacing: 0.24em; color: var(--brand-primary); }
.wg-title::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 0.75rem; vertical-align: 0.35em; background: var(--brand-primary); transform: rotate(45deg); }

.wine-badge { display: block; margin-bottom: 0.5rem; font-size: 0.72rem; font-weight: 300; letter-spacing: 0.2em; color: var(--brand-primary); }
.fig-badge { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2; padding: 0.4rem 0.75rem; background: var(--brand-black); color: #fff; font-size: 0.68rem; font-weight: 300; letter-spacing: 0.18em; line-height: 1; }

.wb-gold .wine-fig { background: #FCFAF7; }
.wb-gold .wine-fig::after { content: ""; position: absolute; inset: 0.55rem; border: 1px solid rgba(199, 158, 115, 0.55); pointer-events: none; }

.wb-ribbon .wine-fig { position: relative; }

.wb-ink .wine-fig { background: var(--brand-black); border-color: rgba(199, 158, 115, 0.55); }
.wb-ink .wine-title { color: var(--brand-black); }

/* 无样式：卡片不渲染任何标记视觉，与常规款一致，仅靠沉底分组区分；保留类以便后续微调 */
.wb-none { }

/* 详情页标记胶囊 */
.wb-chip { display: inline-block; margin-bottom: 0.9rem; padding: 0.42rem 0.85rem; font-size: 0.7rem; font-weight: 300; letter-spacing: 0.2em; line-height: 1; border: 1px solid rgba(199, 158, 115, 0.55); color: var(--brand-primary); }
.wb-chip.wb-chip-ribbon { background: var(--brand-black); border-color: var(--brand-black); color: #fff; }
.wb-chip.wb-chip-ink { background: var(--brand-black); border-color: rgba(199, 158, 115, 0.55); color: var(--brand-primary); }

/* 首页 06 酒款：列数不写死，由 series-sync.js 按启用系列数算出写入 data-cols，
   排版规则为「能整除优先、其次末行不少于 2 张」，避免出现孤零零一张撑满一行。
   手机端恒为单列；data-cols-md 用于平板（768–1279），data-cols 用于桌面（≥1280）。 */
#home-wines { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  #home-wines[data-cols-md="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #home-wines[data-cols-md="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #home-wines[data-cols-md="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  #home-wines[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #home-wines[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #home-wines[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 后台关闭「显示标记名称」：依然区分，但只留线条，不出现标记文字 */
.wg-head-line { padding-top: 2.2rem; margin-bottom: 1.6rem; }
.wg-head-line::after { background: rgba(199, 158, 115, 0.42); }
.wb-noname.wb-ribbon .wine-fig::before { content: ""; position: absolute; top: 0.95rem; left: 0.85rem; z-index: 2; width: 2.4rem; height: 2px; background: var(--brand-black); }
.wb-noname.wb-ink .wine-fig::before { content: ""; position: absolute; top: 0.95rem; left: 0.85rem; z-index: 2; width: 2.4rem; height: 2px; background: var(--brand-primary); }
.wb-rule { display: inline-block; width: 2.6rem; height: 1px; margin-bottom: 0.9rem; background: rgba(199, 158, 115, 0.75); vertical-align: middle; }

/* ---------- 首页 06 酒款：系列中文名 + 英文名同行，字号整体上调 ----------
   字号由 --hw-* 变量统一控制（只随屏幕宽度变化，不随列数变化），
   列数由 js/series-sync.js 现场测量「标题能否单行排下」后写入 data-cols。
   --hw-scale 是最后兜底：连最少列都排不下时由脚本下调，保证永不错行。 */
#home-wines { --hw-scale: 1; }
#home-wines .hw-title {
  display: flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap;
  gap: .5em; font-weight: 300; line-height: 1.2; letter-spacing: .08em;
  color: var(--brand-black);
  font-size: calc(var(--hw-en) * var(--hw-scale));
}
#home-wines .hw-en { flex: 0 0 auto; font-family: var(--brand-font-latin); }
#home-wines .hw-cn {
  flex: 0 0 auto; letter-spacing: .16em; color: var(--brand-muted-foreground);
  font-size: calc(var(--hw-cn) * var(--hw-scale));
}
#home-wines .hw-desc { font-size: calc(var(--hw-desc) * var(--hw-scale)); }
#home-wines .hw-cta { font-size: calc(var(--hw-cta) * var(--hw-scale)); }
/* 品类图统一 16 / 9：后台品类封面素材本身就是 1890×1063（=16:9），
   容器与素材同比例时 object-cover 不会裁掉任何画面（此前 21/9 + max-height:300px
   把图压成 748×300，上下被裁掉近三成，看起来又扁又缺肉）。
   max-height 只是超宽屏（≥2560 两列，卡片近 860px 宽）的兜底，常规屏幕不触发。 */
#home-wines .hw-fig { aspect-ratio: 16 / 9; max-height: 480px; }

/* 字号阶梯：屏幕越宽字越大（比改版前整体上调约 15%–20%） */
#home-wines {
  --hw-en: clamp(1.375rem, 5.6vw, 1.9rem);
  --hw-cn: clamp(.8rem, 2.9vw, 1.05rem);
  --hw-desc: clamp(.8rem, 2.7vw, .95rem);
  --hw-cta: clamp(.78rem, 2.5vw, .9rem);
}
@media (min-width: 768px) {
  #home-wines {
    --hw-en: clamp(1.75rem, 2.7vw, 2.4rem);
    --hw-cn: clamp(.95rem, 1.35vw, 1.25rem);
    --hw-desc: clamp(.875rem, 1.2vw, 1rem);
    --hw-cta: clamp(.8rem, 1.1vw, .95rem);
  }
}
@media (min-width: 1280px) {
  #home-wines {
    --hw-en: clamp(2rem, 2.1vw, 2.75rem);
    --hw-cn: clamp(1.05rem, 1.1vw, 1.375rem);
    --hw-desc: clamp(.95rem, 1.05vw, 1.1rem);
    --hw-cta: clamp(.875rem, 1vw, 1rem);
  }
}
@media (min-width: 1536px) {
  #home-wines {
    --hw-en: clamp(2.5rem, 2.25vw, 3.25rem);
    --hw-cn: clamp(1.25rem, 1.2vw, 1.6rem);
    --hw-desc: clamp(1rem, 1.1vw, 1.2rem);
    --hw-cta: clamp(.95rem, 1.05vw, 1.15rem);
  }
}
@media (min-width: 2560px) {
  #home-wines {
    --hw-en: clamp(3rem, 1.8vw, 4rem);
    --hw-cn: clamp(1.5rem, 1vw, 2.1rem);
    --hw-desc: clamp(1.2rem, .9vw, 1.5rem);
    --hw-cta: clamp(1.15rem, .85vw, 1.4rem);
  }
}

/* 06 板块容器放宽：站点的 Tailwind 响应式变体目前未生效（容器被锁在 max-w-5xl=1024），
   这里用原生媒体查询直接放宽，让酒款卡利用左右留白、内容整体放大。
   只作用于 06 板块，不影响其它图文板块的版心。 */

/* 06 板块高度放开：2×2 卡片 + 16:9 封面（素材本身就是 16:9，不能再压扁）之后内容高约 1100–1500px，
   远超 lg 断点给的 h-[1080px] / max-h-[1080px]。板块是 flex 居中，超出部分会同时向上下溢出，
   顶部正好压在 05 酒窖板块的背景图上（1920 实测侵入 199px、1600 侵入 145px）。
   这里用原生媒体查询让高度按内容自适应，min-height 保留整屏观感。
   ID 选择器权重高于 Tailwind 的类选择器，不受 Tailwind 变体是否生效影响。 */
@media (min-width: 1024px) {
  #products {
    height: auto;
    max-height: none;
    min-height: 1080px;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1280px) { #products > div { max-width: 1200px; } }
@media (min-width: 1536px) { #products > div { max-width: 1360px; } }
@media (min-width: 1920px) { #products > div { max-width: 1520px; } }
@media (min-width: 2560px) { #products > div { max-width: 1760px; } }