/* ==========================================================================
   INTERDECO — components.css
   导航 / 页脚 / 按钮 / 卡片 / 表单 / 图片系统 / 纹理 / Logo / 动画初始态
   暗场剧场版本
   ========================================================================== */

/* ---------------------------------------------------------------- Buttons */
/* 暗底上按钮层级：
   .btn--sand  砂金实心 = 主行动
   .btn        抬起表面 = 次级
   .btn--ghost 描边     = 三级 */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--fg);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.95em 1.7em;
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              color var(--dur) var(--ease);
  will-change: transform;
}
/* 填充从底部推上来 */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--sand);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  color: var(--void);
  box-shadow: 0 18px 40px -18px rgba(208, 194, 165, 0.45);
}
.btn:hover::after { transform: translateY(0); }
.btn .btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* 主行动：砂金实心，hover 转深 */
.btn--sand { --btn-bg: var(--sand); --btn-fg: var(--void); }
.btn--sand::after { background: var(--sand-bright); }
.btn--sand:hover { color: var(--void); box-shadow: 0 20px 44px -18px rgba(208,194,165,0.6); }

/* 三级：描边 */
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--fg);
  border: 1px solid var(--line-strong);
}
.btn--ghost::after { background: var(--sand); }
.btn--ghost:hover { color: var(--void); border-color: transparent; }

/* 文字链接 + 下划线扫入 */
.link {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; position: relative; color: var(--sand);
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------------- Logo mark */
.logo { display: inline-flex; align-items: center; gap: 0.8rem; }
.logo__mark { width: 25px; height: 35px; flex: none; }   /* viewBox 276×384，比例 0.719 */
.logo__mark .bar  { fill: var(--fg);  transition: fill var(--dur) var(--ease); }
.logo__mark .flex { fill: var(--sand); transition: fill var(--dur) var(--ease); }
/* 字标按新标志：细字重 + 大字距。原来是 800 粗体 + 0.16em，太实、太紧。
   Montserrat 是可变字体但区间只到 400（见 css/fonts.css），400 已是最细。 */
.logo__word {
  font-weight: 400; font-size: 1.05rem; letter-spacing: 0.3em;
  color: var(--fg); transition: color var(--dur) var(--ease);
}

/* --------------------------------------------------------------- Navbar */
/* 全站暗场，所以导航的「基础态」就是浅色文字。.nav--dark 由 JS 在深色区块
   上追加，作为加强态（更透、更贴）。基础态本身必须已经在暗底上可读 ——
   否则未标记 data-nav-theme 的区块会出现暗字压暗底。 */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center;
  color: var(--fg);
  transition: background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), height var(--dur) var(--ease);
}
.nav__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__link {
  position: relative; font-weight: 500; font-size: 0.92rem;
  color: var(--fg); opacity: 0.72;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%;
  background: var(--sand); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { opacity: 1; }

/* 滚动后：磨砂玻璃压深 */
.nav.is-scrolled {
  height: 64px;
  background: rgba(11, 12, 14, 0.72);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 1px 0 var(--line);
}
/* 深色区块加强态：略更透，让大图透出来 */
.nav--dark.is-scrolled { background: rgba(11, 12, 14, 0.6); }

.nav__actions { display: flex; align-items: center; gap: 1rem; }


/* 触摸设备上放大可点区域。用 pointer: coarse 而不是宽度断点 —— 依据是输入方式，
   不是屏幕大小：带触摸屏的笔记本同样需要，而窄窗口的鼠标用户并不需要。
   实测这些是全站低于 44px 触摸下限的交互元素：
   筛选 chip 95×36、页脚链接 19px 高、内联链接 26px 高。 */
@media (pointer: coarse) {
  .chip { padding: 0.72em 1.15em; }
  /* 页脚链接实测只有 19px 高，还上下紧挨着排 —— 手指点"关于"很容易点成"经销合作"。
     改成块级并加上下内边距，既撑到 44px，也把相邻项拉开。 */
  .footer__col li { margin-bottom: 0; }
  .footer__col li > a { display: block; padding-block: 0.72rem; }
  .link { display: inline-block; padding-block: 0.6rem; }
  .logo { padding-block: 0.35rem; }
  .btn { min-height: 44px; }
}

/* 汉堡菜单 */
/* 44×44 是触摸目标的下限，原来是 30×30（实测点击区只有 22×30）。
   视觉上的两道横线仍是 24px 宽，靠内边距把可点区域撑到 44 —— 看起来没变，
   手指点得中。两条线上下各距中心 4px，配合下面 5px 的位移正好交叉成 ×。 */
.nav__burger { display: none; width: 44px; height: 44px; position: relative; margin-right: -10px; }
.nav__burger span {
  position: absolute; left: 10px; right: 10px; height: 2px; background: var(--fg);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { bottom: 16px; }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* 移动端全屏菜单 */
.nav__mobile {
  position: fixed; inset: 0; z-index: 999;
  background: var(--void); color: var(--fg);
  display: flex; flex-direction: column; justify-content: center; gap: 0.2rem;
  padding: var(--gutter);
  transform: translateY(-100%);
  transition: transform 0.7s var(--ease);
  visibility: hidden;
}
/* 菜单里也放一层聚光，避免全黑板结 */
.nav__mobile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--glow-sand); opacity: 0.5;
}
body.menu-open .nav__mobile { transform: translateY(0); visibility: visible; }
/* 菜单打开时锁住背后的页面。原来只靠 JS 调 Lenis.stop()，
   而 Lenis 在 pointer:coarse 下压根不初始化 —— 也就是说手机上那个锁是空操作，
   全屏菜单底下的页面照滚。CSS 这条在所有设备上都成立。 */
body.menu-open { overflow: hidden; }
/* 横屏手机上高度只有三百多，六个菜单项会溢出且无法滚动 */
.nav__mobile { overflow-y: auto; }
.nav__mobile a {
  position: relative;
  font-size: clamp(1.8rem, 8vw, 3rem); font-weight: 700; letter-spacing: -0.02em;
  padding-block: 0.35rem; opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
body.menu-open .nav__mobile a { opacity: 1; transform: translateY(0); }
body.menu-open .nav__mobile a:nth-child(1){transition-delay:.12s}
body.menu-open .nav__mobile a:nth-child(2){transition-delay:.17s}
body.menu-open .nav__mobile a:nth-child(3){transition-delay:.22s}
body.menu-open .nav__mobile a:nth-child(4){transition-delay:.27s}
body.menu-open .nav__mobile a:nth-child(5){transition-delay:.32s}
body.menu-open .nav__mobile a:nth-child(6){transition-delay:.37s}
body.menu-open .nav__mobile a:nth-child(7){transition-delay:.42s}

/* --------------------------------------------------------------- Footer */
.footer {
  background: var(--void); color: var(--fg);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem;
  border-top: 1px solid var(--line);
}
.footer a { opacity: 0.7; transition: opacity var(--dur) var(--ease); }
.footer a:hover { opacity: 1; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
/* 标志下面那句品牌标语，跟着字标的调性走：砂色、细字重、大字距 */
.footer__tag {
  margin-top: 1.1rem; color: var(--sand);
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.footer__note { color: var(--fg-3); margin-top: 0.9rem; max-width: 34ch; font-size: 0.92rem; }
.footer__col h4 {
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sand); margin-bottom: 1.1rem;
}
.footer__col li { margin-bottom: 0.6rem; font-size: 0.94rem; }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.8rem; color: var(--fg-3);
}

/* ==========================================================================
   图片系统 (.media)
   --------------------------------------------------------------------------
   设计目标：真图缺席时站点也完整，真图到位时零改代码。

   结构：
     <div class="media media--3x4">
       <div class="tex tex--slate tex--noise"></div>   ← 兜底：CSS 程序化纹理
       <img class="media__img" src="…" alt="…" loading="lazy" decoding="async">
       <div class="media__grade"></div>                ← 暗场处理：渐晕 + 边缘高光
     </div>

   .media__img 默认 opacity:0，由 main.js 的 initMedia() 在真正解码成功后
   加上 .is-loaded 才淡入。所以：
     · 文件不存在 / 404 / 路径写错 → 图静默留在 opacity:0，纹理照常显示
     · 文件存在                    → 图淡入盖住纹理
   两种情况都不需要改 HTML 或 CSS。
   ========================================================================== */
.media {
  position: relative;
  overflow: hidden;
  background: var(--surface-1);   /* 图和纹理都没有时的最终兜底 */
  isolation: isolate;
}
.media > .tex { position: absolute; inset: 0; }

.media__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.media__img.is-loaded { opacity: 1; transform: scale(1); }

/* 暗场处理层：压角渐晕 + 顶部一道极淡的边缘高光。
   这一层是"射灯感"的来源 —— 让每块材质看起来是被打光的实体，
   而不是一张贴在页面上的平图。 */
.media__grade {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 18%),
    radial-gradient(105% 85% at 50% 35%, transparent 45%, rgba(11,12,14,0.55) 100%);
}
/* 需要更强戏剧性时叠加（hero、详情大图） */
.media--dramatic .media__grade {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 14%),
    radial-gradient(90% 70% at 50% 30%, transparent 30%, rgba(11,12,14,0.82) 100%);
}
/* 底部压深，给叠在图上的文字让出可读区 */
.media--caption .media__grade {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 18%),
    linear-gradient(0deg, rgba(11,12,14,0.88) 0%, transparent 55%);
}

/* 宽高比 */
.media--16x9 { aspect-ratio: 16 / 9; }
.media--21x9 { aspect-ratio: 21 / 9; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--4x5  { aspect-ratio: 4 / 5; }
.media--3x4  { aspect-ratio: 3 / 4; }
.media--5x6  { aspect-ratio: 5 / 6; }
.media--fill { position: absolute; inset: 0; }

.media--round { border-radius: var(--radius-lg); }

/* 悬停推近：只给可点击的容器用 */
.media--zoom .media__img,
.media--zoom > .tex { transition: transform var(--dur-slow) var(--ease); }
a:hover > .media--zoom .media__img,
a:hover > .media--zoom > .tex,
.card:hover .media--zoom .media__img,
.card:hover .media--zoom > .tex { transform: scale(1.06); }

/* --------------------------------------------------------------- Cards */
.card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px);
  background: var(--surface-2);
  border-color: var(--sand-dim);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.card__media { aspect-ratio: 4 / 5; position: relative; overflow: hidden; }
.card__media > .tex { position: absolute; inset: 0; transition: transform var(--dur-slow) var(--ease); }
.card:hover .card__media > .tex { transform: scale(1.06); }
.card__body { padding: 1.4rem 1.5rem 1.7rem; }
.card__kicker { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand); }
.card__title { font-size: 1.35rem; margin-top: 0.35rem; }
.card__desc { color: var(--fg-3); font-size: 0.94rem; margin-top: 0.5rem; }
.card__tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 3;
  background: rgba(11, 12, 14, 0.72); color: var(--sand);
  border: 1px solid var(--sand-dim);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
  padding: 0.4em 0.8em; border-radius: 100px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* --------------------------------------------------------- Texture swatches */
/* CSS 程序化石材纹理 —— 图片系统的兜底层。真图到位后它们仍留在 DOM 里，
   被 .media__img 盖住，作为加载中 / 加载失败的占位。不要删。 */
.tex { background-color: var(--surface-2); background-blend-mode: overlay, multiply, normal; }
.tex--slate {
  background:
    linear-gradient(115deg, rgba(255,255,255,.05), rgba(0,0,0,.28)),
    repeating-linear-gradient(48deg, rgba(0,0,0,.10) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #4c5157, #2b2f34 60%, #1c2024);
}
.tex--marble {
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.5), transparent 40%),
    repeating-linear-gradient(70deg, rgba(150,140,120,.18) 0 1px, transparent 1px 22px),
    linear-gradient(150deg, #efeae0, #d9d2c4 55%, #cbbfa9);
}
.tex--sand {
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(255,255,255,.35), transparent 45%),
    repeating-linear-gradient(28deg, rgba(120,105,80,.10) 0 3px, transparent 3px 11px),
    linear-gradient(150deg, #ddceb0, #cbb994 60%, #b7a279);
}
.tex--travertine {
  background:
    radial-gradient(80% 60% at 30% 40%, rgba(255,255,255,.28), transparent 55%),
    repeating-linear-gradient(0deg, rgba(150,130,100,.14) 0 2px, transparent 2px 16px),
    linear-gradient(160deg, #e7ddca, #d3c4a6 60%, #c2b090);
}
.tex--concrete {
  background:
    radial-gradient(90% 90% at 60% 20%, rgba(255,255,255,.22), transparent 50%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, #b9b7b2, #97968f 60%, #7e7d77);
}
.tex--rust {
  background:
    radial-gradient(120% 80% at 20% 80%, rgba(0,0,0,.3), transparent 50%),
    repeating-linear-gradient(120deg, rgba(80,40,20,.18) 0 3px, transparent 3px 14px),
    linear-gradient(150deg, #b78a63, #8f6242 55%, #6d4630);
}
.tex--onyx {
  background:
    radial-gradient(110% 80% at 70% 10%, rgba(200,180,150,.4), transparent 45%),
    repeating-linear-gradient(58deg, rgba(180,150,110,.14) 0 1px, transparent 1px 26px),
    linear-gradient(160deg, #3a3630, #26221d 55%, #171410);
}
.tex--mica {
  background:
    radial-gradient(90% 90% at 40% 30%, rgba(255,240,210,.35), transparent 50%),
    repeating-linear-gradient(35deg, rgba(255,220,160,.10) 0 2px, transparent 2px 7px),
    linear-gradient(150deg, #8a7c63, #6c604b 60%, #4f4636);
}
.tex--noise::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- Forms */
.form { display: grid; gap: 1.4rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--fg-3); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.9em 1em; border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-1); color: var(--fg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-4); }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--sand);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px rgba(208, 194, 165, 0.16);
}
/* 下拉箭头在暗底上要手动补，否则某些浏览器给的是深色三角 */
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sand) 50%),
                    linear-gradient(135deg, var(--sand) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6em;
}
.field select option { background: var(--surface-1); color: var(--fg); }
.form__note { font-size: 0.82rem; color: var(--fg-3); }
.form__success, .form__error {
  display: none; padding: 1.1rem 1.3rem; border-radius: 12px; font-weight: 500;
}
.form__success {
  background: rgba(208, 194, 165, 0.10); border: 1px solid var(--sand-dim);
  color: var(--sand-bright);
}
/* 失败提示必须够醒目。这里用暖红而非砂金 —— 砂金是全站的"正常"色，
   成功和失败长得像，用户会看漏。 */
.form__error {
  background: rgba(200, 92, 66, 0.12); border: 1px solid rgba(200, 92, 66, 0.45);
  color: #E8A08C;
}
.form__success.is-visible, .form__error.is-visible { display: block; }

/* 提交中：整体压暗 + 禁用光标，不改 DOM。
   改按钮文字会破坏里面的 data-en / data-zh 双语 span。 */
.form.is-sending { opacity: 0.6; pointer-events: none; }

/* 蜜罐字段。移出视口而非 display:none —— 部分爬虫会跳过 display:none 的
   输入框，移出视口的照填不误。真人看不见，键盘也 tab 不到（tabindex=-1）。 */
.hp {
  position: absolute !important;
  left: -9999px; top: auto; width: 1px; height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------- Reveal (JS) */
[data-reveal] { opacity: 0; transform: translateY(28px); }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* pill / chip */
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 1em; border-radius: 100px;
  border: 1px solid var(--line-strong); color: var(--fg-2);
  font-size: 0.82rem; font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.chip.is-active, .chip:hover {
  background: var(--sand); color: var(--void); border-color: var(--sand);
}

/* stat */
.stat__num { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.stat__unit { font-size: 0.5em; font-weight: 600; color: var(--sand); margin-left: 0.15em; }
/* 区间连接号。
   .stat__num 的 -0.03em 负字距是给大数字用的，会把连接号一并收紧，
   "2–6" 被挤成一坨、读不出是两个数。这里把连接号从主体里摘出来：
   归零字距 + 两侧留白，字重降到 400、颜色压暗，让两个数字当主角。 */
.stat__dash {
  letter-spacing: 0;
  margin-inline: 0.14em;
  font-weight: 400;
  /* 用 fg-2 而非更暗的 fg-3：连接号要明显弱于数字，但不能弱到读成
     "2  6" 两个独立的数 —— 它得让人一眼看出这是个区间。 */
  color: var(--fg-2);
}
.stat__label { margin-top: 0.6rem; font-size: 0.88rem; color: var(--fg-3); letter-spacing: 0.02em; }