/* Motang Studio — visual refinement layer
   Loaded after site.css. Keeps the existing token system and content intact. */

/* Brand mark: use the studio's own pixel symbol instead of a generic square. */
.brand__mark {
  width: var(--sp-24);
  height: var(--sp-24);
  border-radius: 0;
  background: linear-gradient(145deg, var(--c-orange-light), var(--c-orange) 62%, var(--c-orange-dark));
  box-shadow: none;
  -webkit-mask: url('./brand/motang-mark.svg') center / contain no-repeat;
  mask: url('./brand/motang-mark.svg') center / contain no-repeat;
}
.brand { gap: var(--sp-12); letter-spacing: var(--t-label-track); }

/* A little more definition in the sticky navigation, without turning it into a heavy bar. */
.topbar {
  background: rgba(var(--rgb-paper), .92);
  box-shadow: 0 var(--sp-4) var(--sp-16) rgba(var(--rgb-ink), .035);
}
.nav a {
  padding-block: var(--sp-8);
  transition: color var(--dur-base) var(--ease-standard);
}
.lang { border: var(--ln-hairline) solid rgba(var(--rgb-ink), var(--a-hairline)); }
.lang a { border-radius: var(--r-chip); }

/* The intro reads more like a studio cover, with a clearer visual/text balance. */
.report-intro { margin-top: var(--sp-64); }
.report-intro__surface {
  background:
    radial-gradient(ellipse at 92% 12%, rgba(var(--rgb-orange), .075), rgba(var(--rgb-orange), 0) 42%),
    var(--c-apple);
}
.report-intro__content { max-width: 58ch; }
.report-intro__summary { max-width: 52ch; line-height: 1.9; }
.report-intro__meta span + span::before {
  content: "";
  display: inline-block;
  width: var(--ln-regular);
  height: var(--ln-regular);
  margin: 0 var(--sp-12) var(--sp-4) 0;
  border-radius: 50%;
  background: var(--c-orange);
}
.hero-stack { padding: var(--sp-12); }
.hero-stack__card--1 { outline: var(--ln-regular) solid rgba(var(--rgb-paper), .8); }

/* More intentional rhythm between sections. */
section { scroll-margin-top: calc(var(--topbar-h) + var(--sp-24)); }
.section-head { align-items: end; padding-bottom: var(--sp-12); border-bottom: var(--ln-hairline) solid rgba(var(--rgb-ink), var(--a-hairline)); }
.section-head__more { display: inline-flex; align-items: center; gap: var(--sp-8); }
.section-head__more::after { content: "↗"; color: var(--c-orange); transition: transform var(--dur-base) var(--ease-standard); }
.section-head__more:hover::after { transform: translate(var(--sp-4), calc(var(--sp-4) * -1)); }

/* Cards: more breathing room, calmer borders, consistent image behavior. */
.card--tile {
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.card__thumb { border-radius: var(--r-panel); }
.card__thumb img { transition: transform var(--dur-slow) var(--ease-standard), filter var(--dur-slow) var(--ease-standard); }
.card--tile:hover { border-color: rgba(var(--rgb-orange), .28); }
.card--tile:hover .card__thumb img { filter: saturate(1.06); }
.card__foot { justify-content: space-between; }
.card__foot .btn { white-space: nowrap; }

/* Long-form pages and screenshot galleries feel less like raw documentation. */
.shot { overflow: hidden; }
.shot img { transition: transform var(--dur-slow) var(--ease-standard); }
.shot:hover img { transform: scale(1.018); }
.kv > div { border-bottom: var(--ln-hairline) solid rgba(var(--rgb-ink), var(--a-hairline)); padding-block: var(--sp-12); }
.kv > div:last-child { border-bottom: 0; }
.brandbar { border-radius: var(--r-card); overflow: hidden; }

/* Footer gets a quiet visual landing rather than ending abruptly. */
.site-footer {
  margin-top: var(--sp-64);
  padding-top: var(--sp-32);
  border-top: var(--ln-hairline) solid rgba(var(--rgb-ink), var(--a-hairline));
}
.footer__label { color: var(--c-ink); margin-bottom: var(--sp-12); }
.footer__grid a { transition: color var(--dur-base) var(--ease-standard); }
.footer__legal { margin-top: var(--sp-32); padding-top: var(--sp-16); border-top: var(--ln-hairline) solid rgba(var(--rgb-ink), var(--a-hairline)); }

@media (max-width: 768px) {
  .report-intro { margin-top: var(--sp-24); }
  .report-intro__meta span + span::before { margin-right: var(--sp-8); }
  .section-head { align-items: start; }
  .card__foot { align-items: center; }
  .site-footer { margin-top: var(--sp-48); }
}

@media (prefers-reduced-motion: reduce) {
  .nav a, .section-head__more::after, .card--tile, .card__thumb img, .shot img, .footer__grid a { transition: none; }
  .shot:hover img { transform: none; }
}

/* ============================================================
   2026-10 视觉打磨（第二批）
   目标：首屏更有立体感、卡片更精致、深色更有层次、动效更细腻。
   纪律同上一批：只用套件变量与 --s-* 站点变量，不写死色值 / px / ms。
   ============================================================ */

/* ---------- ① 首屏：把"一手牌"立起来 ---------- */
/* 牌堆后面垫一层暖色底光，深色主题下也能把三张牌从背景里托出来。
   绝对定位 → 不参与 .hero-stack 的网格排布（否则会多占一格）。 */
.hero-stack { position: relative; }
.hero-stack::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: calc(var(--sp-24) * -1) calc(var(--sp-16) * -1);
  border-radius: var(--r-card);
  background: radial-gradient(60% 62% at 50% 44%,
              var(--s-warm), rgba(var(--rgb-orange), 0) 72%);
}
/* 顶层那张牌的描边走 --s-stack-ring：浅色下是纸白、深色下是微光 */
.hero-stack__card--1 {
  outline: var(--ln-regular) solid var(--s-stack-ring);
  outline-offset: calc(var(--ln-regular) * -1);
}
.hero-stack__card--2, .hero-stack__card--3 {
  transition: transform var(--dur-slow) var(--ease-standard);
}
/* 悬停时把"牌"轻轻摊开一点（只在真有指针的设备上做） */
@media (hover: hover) and (min-width: 769px) {
  .report-intro__split:hover .hero-stack__card--2 { transform: rotate(-9deg) translateY(calc(var(--sp-4) * -1)); }
  .report-intro__split:hover .hero-stack__card--3 { transform: rotate(9deg) translateY(calc(var(--sp-4) * -1)); }
}
/* 大标题落点的橙线拉长一点、带一丝暖光 */
.report-intro h1 { line-height: 1.08; }
.report-intro h1::after {
  width: var(--sp-64);
  box-shadow: 0 var(--sp-8) var(--sp-16) rgba(var(--rgb-orange), .22);
}

/* ---------- ② 作品卡片 / 标签：更精致 ---------- */
/* 缩略图加一道内描边：亮图压在纸白上边界清楚，深色下也是 */
.card__thumb { box-shadow: inset 0 0 0 var(--ln-hairline) rgba(var(--rgb-ink), var(--a-hairline)); }
/* 卡面顶边受光：深色下卡片不再"平"（浅色下与原来的细线等价） */
.card--tile, .shot { border-top-color: var(--s-edge-top); }
/* 状态标签加细描边，压在卡面上更成体系 */
.tag { border: var(--ln-hairline) solid rgba(var(--rgb-ink), var(--a-hairline)); }
/* 作品名悬停：下划线从左边长出来（与顶部导航同一种手法） */
.card__title a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--ln-regular);
  transition: background-size var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.card__title a:hover { background-size: 100% var(--ln-regular); text-decoration: none; }

/* ---------- ③ 细节与微动效 ---------- */
/* 按钮：按下有反馈 */
.btn {
  transition: transform var(--dur-quick) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.btn:active { transform: scale(.98); }
/* 品牌标记：悬停轻轻一转 —— 呼应"像素符号"的手感 */
.brand__mark { transition: transform var(--dur-slow) var(--ease-standard); }
.brand:hover .brand__mark { transform: rotate(-8deg); }
/* 页脚链接：下划线生长（和导航、作品名同一套） */
.footer__grid a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--ln-regular);
  transition: background-size var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.footer__grid a:hover { background-size: 100% var(--ln-regular); color: var(--c-ink); }

/* 卡片 / 截图随滚动淡入：渐进增强 —— 不支持滚动驱动动画的浏览器直接显示。
   只动 opacity，不动 transform，避免与 kit 的悬停上浮打架；
   .card--soon 有自己的 0.72 透明度，排除在外。 */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .card--tile:not(.card--soon), .shot {
      animation: reveal-fade linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 30%;
    }
  }
}
@keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero-stack__card--2, .hero-stack__card--3, .brand__mark,
  .btn, .card__title a, .footer__grid a { transition: none; }
  .report-intro__split:hover .hero-stack__card--2,
  .report-intro__split:hover .hero-stack__card--3 { transform: none; }
  .brand:hover .brand__mark { transform: none; }
  .btn:active { transform: none; }
}

/* ---------- ③ 修复：橙色主按钮悬停时字被咬成橙、压进橙底看不见 ----------
   起因：site.css 的 `a:hover { color: var(--c-orange) }` 会作用到作为链接的
   `.btn--primary`（如首页"去 TapTap 看看"），使其橙字落橙底、失去对比度。
   这里只在 primary 上把 hover 时的字色钉回白 —— 背景的扫光/落影反馈照旧，
   :active 切深橙底也一并钉住，保证按压瞬间字依旧可见。
   只动字色，不碰布局与其它按钮（普通 .btn 保持原样，不受影响）。 */
.btn--primary:hover { color: rgba(255,255,255,.94); }
.btn--primary:active { color: rgba(255,255,255,.94); }
/* 顺带：按钮是"按钮"，悬停时不该长出正文链接那条下划线（同样来自通用 a:hover）。 */
.btn:hover { text-decoration: none; }

/* ============================================================
   2026-10 视觉打磨（第三批）
   目标：卡片悬停更"可点"、长表格更易扫读。
   纪律同前：只用套件/站点变量，投影走 --el-*（深浅主题各一份，见 site.css）。
   ============================================================ */

/* ---------- ① 卡片悬停：轻轻上浮 + 一层浮起投影 ----------
   此前 hover 只换描边色，"可点击"的手感不完整。补上位移与投影：
   位移量取自间距阶梯（--sp-4），投影用 elevation 变量 —— 深色主题下
   site.css 已把 --el-* 换成更重的黑投影，这里不用分 Theme 写两遍。
   .card--soon（"下一款作品"占位卡）不是链接、点了没处去，排除。
   hover: hover 媒体查询包着：触屏上 :hover 会粘住，不能给位移。 */
@media (hover: hover) {
  .card--tile:not(.card--soon):hover {
    transform: translateY(calc(var(--sp-4) * -1));
    box-shadow: var(--el-2);
  }
}

/* ---------- ② 表格行：扫读时抓住当前行 ----------
   更新日志、素材表都是"扫读型"长内容，行悬停铺一层极淡的暖色
   （5% 橙，取自 --rgb-orange，深浅主题下都成立），帮眼睛定位。
   过渡只走 background，不动布局。 */
tbody tr { transition: background var(--dur-quick) var(--ease-standard); }
tbody tr:hover { background: rgba(var(--rgb-orange), .05); }

/* ---------- ③ 无障碍： reduced-motion 下新位移也归零 ---------- */
@media (prefers-reduced-motion: reduce) {
  .card--tile:not(.card--soon):hover { transform: none; }
  tbody tr { transition: none; }
}