/* ============================================================
   tornier.io — 设计系统
   结构参数取自 Figma「Tornier Page」；配色由 JS 从背景图动态提取
   （Material You 式：主/次色 → 渐变映射 → 亚克力高斯模糊）。
   :root 里是「取色失败时的回退值」，JS 会在 <html> 上用内联变量覆盖。
   ============================================================ */

/* ---------- 日间（Figma 原稿） ---------- */
:root {
  --bg:            #E6E0EE;   /* 页面底色 */
  --wash:          #E8E0F1;   /* 淡紫色罩层 */
  /* 取消 backdrop-filter 后靠提高不透明度维持可读性（观感几乎一致） */
  --glass:         rgba(249, 244, 255, .90);  /* 玻璃卡片 */
  --glass-strong:  rgba(252, 248, 255, .94);  /* 游戏卡片 */
  --stroke:        #FFFFFF;   /* 玻璃白描边 */
  --chip:          #EEE7F3;   /* 标签 */
  --chip-accent:   #EADCFB;   /* 强调标签 / 图标底 / Contact 底 */
  --divider:       #DAD0E3;

  --accent:        #705398;   /* 淡紫主色 */
  --accent-soft:   #B7A6CB;
  --warm:          #E5D1C3;
  --sage:          #99ACA4;
  --green-bg:      #DCE9DC;
  --green-ink:     #3B5943;

  --text:          #292334;
  --muted:         #655E70;

  --r-lg: 36px;  --r: 28px;  --r-sm: 16px;  --r-pill: 100px;
  --blur: 18px;
  --shadow: 0 10px 34px rgba(41, 35, 52, .07);
  --atmos-opacity: .36;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- 夜间 ---------- */
html[data-theme='night'] {
  --bg:            #171320;
  --wash:          #241C33;
  --glass:         rgba(45, 36, 62, .88);
  --glass-strong:  rgba(52, 42, 71, .92);
  --stroke:        rgba(255, 255, 255, .12);
  --chip:          rgba(122, 104, 158, .28);
  --chip-accent:   rgba(150, 124, 199, .30);
  --divider:       rgba(255, 255, 255, .12);

  --accent:        #B79BE0;
  --accent-soft:   #8E77B8;
  --warm:          #C9A78F;
  --sage:          #7E948C;
  --green-bg:      rgba(120, 168, 132, .26);
  --green-ink:     #A8D3B4;

  --text:          #EDE7F5;
  --muted:         #A79EB8;

  --shadow: 0 10px 34px rgba(0, 0, 0, .3);
  --atmos-opacity: .22;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  /* 纯色 + 极淡的主色晕染：静态渐变，合成成本几乎为零 */
  background:
    radial-gradient(90% 55% at 85% -8%, var(--chip-accent), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
::selection { background: var(--chip-accent); color: var(--text); }

.wrap { max-width: 1440px; margin: 0 auto; padding: 28px 80px 32px; }
.stack { display: flex; flex-direction: column; gap: 48px; }   /* Figma 主纵向 gap 48 */

/* ---------- 玻璃卡片 ---------- */
.card {
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* 玻璃质感默认用「半透明底色 + 描边」实现，不用 backdrop-filter：
   背景本身已是模糊画作，观感几乎一致，但滚动不再逐帧重算模糊。
   想要真玻璃效果：给 <html> 加 data-glass="on"（见下方规则）。 */
html[data-glass='on'] .card,
html[data-glass='on'] .tabs,
html[data-glass='on'] .theme-btn {
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

/* 长页面优化：离屏区块跳过渲染（滚动到附近才渲染） */
.section {
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}
.card--lg { border-radius: var(--r-lg); }
.card--pad { padding: 40px; }

/* ---------- 顶栏 ---------- */
.topbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.mono {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 600;
  overflow: hidden;
}
/* Logo 是 1-bit 形状：用蒙版抠形，颜色跟随主题色（--accent） */
.mono .logo-mark {
  display: none;
  width: 100%; height: 100%;
  background: var(--accent);
  -webkit-mask: url('../img/logo-shape.png') center / 88% no-repeat;
  mask: url('../img/logo-shape.png') center / 88% no-repeat;
}
body.has-logo .mono { background: transparent; }
body.has-logo .mono .logo-mark { display: block; }
body.has-logo .mono span { display: none; }
body.no-logo .mono .logo-mark { display: none; }
.brand-name { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

.tabs {
  display: flex; gap: 4px;
  padding: 6px;
  width: max-content;
  max-width: 100%;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--stroke);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.tab:hover { color: var(--text); }
.tab.is-active { background: var(--chip-accent); color: var(--accent); font-weight: 600; }

.theme-btn {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke);
  background: var(--glass);
  color: var(--accent);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .12s ease;
}
.theme-btn:hover { transform: rotate(-10deg); }

/* ---------- 分区标题（图标方块 + 标题 + 计数 + 描述） ---------- */
.section { display: flex; flex-direction: column; gap: 24px; }
.section-head { display: flex; gap: 14px; align-items: flex-start; }
.icon-badge {
  width: 48px; height: 48px; flex: none;
  border-radius: var(--r-sm);
  background: var(--chip-accent);
  color: var(--accent);
  display: grid; place-items: center;
}
.title-count { display: flex; align-items: baseline; gap: 10px; }
.section-title { margin: 0; font-size: 32px; font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
.count { font-size: 12px; color: var(--accent); }
.section-desc { margin: 5px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }

/* ---------- 关于我 ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 20px; align-items: stretch; }
.bio { padding: 40px; display: flex; flex-direction: column; gap: 28px; }
.intro-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--accent); }

.name { margin: 0; font-size: 66px; font-weight: 400; letter-spacing: -.03em; line-height: 1.05; }
.statement { margin: 0; font-size: 42px; font-weight: 400; letter-spacing: -.02em; line-height: 1.12; color: var(--accent); }
.biography { margin: 0; font-size: 15px; line-height: 24.75px; color: var(--muted); max-width: 660px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--chip);
  font-size: 11px; font-weight: 500;
  color: var(--muted);
}
.chip--accent { background: var(--chip-accent); color: var(--accent); }
.chip--green { background: var(--green-bg); color: var(--green-ink); }

.actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 14px; font-weight: 600;
  transition: transform .12s ease;
}
.btn:hover { transform: translateY(-2px); color: #fff; }
.btn .ico { display: grid; place-items: center; }

/* 右侧画作面板 */
.art-panel { overflow: hidden; display: flex; flex-direction: column; position: relative; }
.art-panel > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 全息卡片（Dashboard → Bio → 全息效果 开/关） ----------
   只用静态渐变 + transform：无 blend-mode、无 backdrop-filter，悬浮时只走合成线程。 */
/* 三个变量全部由 site.js 的同一个平滑状态驱动（不再有 CSS transition）：
     --h   悬浮程度 0→1（抬起 / 阴影 / 高光强度同步）
     --mx / --my  高光位置 = 卡片当前倾斜量映射而来（跟着卡片，不直接跟鼠标）
   所以鼠标移开后，卡片放平的同时高光滑回中心并淡出，不会瞬移。 */
.art-panel.holo {
  --h: 0; --mx: 50%; --my: 50%;
  transform-origin: center;
  box-shadow: 0 calc(28px * var(--h)) calc(60px * var(--h)) rgba(0, 0, 0, calc(.28 * var(--h)));
}
.art-panel.holo.is-active { will-change: transform; }

/* 常驻的浅浅一层彩虹光泽（盖在 UI 之上，z-index 高于 .palette-card） */
.art-panel.holo::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 18%,
    rgba(255, 120, 200, .10) 32%,
    rgba(120, 220, 255, .12) 44%,
    rgba(160, 255, 170, .10) 56%,
    rgba(255, 230, 120, .10) 68%,
    transparent 82%
  );
  background-size: 260% 260%;
  background-position: var(--mx) var(--my);
  opacity: calc(.55 + .45 * var(--h));
}
/* 悬浮高光（同样盖在 UI 之上） */
.art-panel.holo::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .20), transparent 42%);
  opacity: var(--h);
}

.palette-card {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  z-index: 2;
  padding: 20px;
  border-radius: 24px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  display: flex; flex-direction: column; gap: 16px;
}
.palette-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.art-title { margin: 0; font-size: 20px; font-weight: 400; }
.art-medium { margin: 5px 0 0; font-size: 11px; color: var(--muted); }
.divider { height: 1px; background: var(--divider); }
.palette-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-label { font-size: 11px; font-weight: 600; }
.theme-value { font-size: 10px; color: var(--muted); }
.swatches { display: flex; gap: 5px; }
.swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; }

/* ---------- 作品栏（留空位） ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.art-card { padding: 7px; display: flex; flex-direction: column; gap: 0; }
.art-slot {
  aspect-ratio: 399 / 222;
  border-radius: 22px;
  border: 1px dashed var(--divider);
  background: rgba(255, 255, 255, .25);
  display: grid; place-items: center;
  color: var(--muted);
  font-size: 12px;
}
.art-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }
.art-card .caption { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 14px 12px; }
.caption .t { font-size: 17px; font-weight: 500; }
.caption .m { margin-top: 5px; font-size: 11px; color: var(--muted); }

/* ---------- 外链栏 ---------- */
.links { display: grid; gap: 10px; }
.link-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  border-radius: 20px;
  background: var(--chip);
  color: var(--text);
  transition: transform .12s ease, background .12s ease;
}
.link-row:hover { transform: translateX(3px); background: var(--chip-accent); }
.link-row .site { font-size: 14px; font-weight: 600; }
.link-row .handle { font-size: 12px; color: var(--muted); }
.link-row .arrow { color: var(--accent); }

/* ---------- 游戏卡 ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.game-card {
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  padding: 8px;
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  color: var(--text);
  transition: transform .14s ease;
}
.game-card:hover { transform: translateY(-4px); }
.preview {
  position: relative;
  aspect-ratio: 614 / 244;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--chip-accent), var(--warm));
  display: grid; place-items: center;
}
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview .ph { font-size: 12px; color: var(--muted); }
.status-pill {
  position: absolute; top: 14px; left: 14px;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--stroke);
  font-size: 11px; font-weight: 500;
}
.game-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.game-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.game-title { margin: 0; font-size: 26px; font-weight: 400; letter-spacing: -.02em; }
.round-btn {
  width: 36px; height: 36px; flex: none;
  border-radius: var(--r-pill);
  background: var(--chip-accent);
  color: var(--accent);
  display: grid; place-items: center;
}
.game-desc { margin: 0; font-size: 14px; line-height: 21px; color: var(--muted); }
.game-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); }

/* ---------- Commission ---------- */
.price-card { padding: 40px; }
.price-row { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px dashed var(--divider); }
.price-row:last-of-type { border-bottom: none; }
.tier { font-size: 28px; font-weight: 400; letter-spacing: -.02em; }
.tier-note { font-size: 12px; color: var(--muted); }
.price {
  margin-left: auto;
  font-family: var(--font);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--accent);
}
.hand-note { font-size: 13px; font-weight: 600; color: var(--accent); }
.terms { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 14px; line-height: 21px; }
.terms li { margin: .35em 0; }

/* ---------- Contact ---------- */
.contact {
  background: var(--chip-accent);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.contact h2 { margin: 0; font-size: 34px; font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
.contact p { margin: 8px 0 0; font-size: 14px; line-height: 21px; color: var(--muted); }

.colophon { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.colophon .socials { display: flex; gap: 24px; margin-left: auto; }
.colophon a { font-size: 12px; color: var(--accent); }
.fine-print { font-size: 10px; color: var(--muted); }

/* ---------- 页脚表情包 ---------- */
.sticker { height: 72px; width: auto; }

/* ---------- 响应式：细长窗口 → 移动端形态（Figma 2:4663） ---------- */
@media (max-width: 1080px) {
  .wrap { padding: 24px 32px 28px; }
  .about { grid-template-columns: 1fr; }
  .art-panel { min-height: 360px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .wrap { padding: 20px 16px 24px; }
  .stack { gap: 32px; }
  .tabs { order: 3; width: 100%; margin-left: 0; }
  .topbar { gap: 12px; }

  .bio { padding: 24px; gap: 24px; }
  .name { font-size: 46px; }
  .statement { font-size: 30px; }
  .section-title { font-size: 27px; }

  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cards { grid-template-columns: 1fr; gap: 16px; }

  .price-card { padding: 24px; }
  .price-row { flex-wrap: wrap; }
  .price { margin-left: 0; width: 100%; }

  .contact { flex-direction: column; align-items: flex-start; border-radius: var(--r); padding: 24px; }
  .contact h2 { font-size: 28px; }
  .colophon .socials { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }