/* 其一 · 全站动效基建层（motion.css）
 *
 * 定位：克制的高级感 —— 低饱和、微动效、材质感优先，光效只做点缀。
 * 三大原则（与 enhance.css 对齐）：
 * 1) 不破坏任何已有 class 与 id：所有工具类统一 `fx-` 前缀，只新增不覆盖
 * 2) 设计令牌取自 styles.css :root（色彩/缓动/时长均不另起炉灶；
 *    本文件只在其上扩展 `--fx-*` 动效参数令牌，不改任何既有令牌）
 * 3) 暗色模式（墨夜）通过 :root[data-theme="dark"] 给出减弱版发光取值
 *
 * 纪律：
 * - 不引入任何新色相：发光仅取暖金(--gold-glow)与墨青(--accent)，透明度 ≤0.35
 * - 动画只用 transform / opacity / 一次性 filter；禁止循环 box-shadow、无循环背景动画
 * - 时长以 180-480ms 为主；位移 ≤8px、倾斜 ≤4°；缓动统一 var(--ease)
 * - 发光/流光只出现在「仪式时刻」，平时静态温润
 * - 所有装饰性伪元素/光层一律 pointer-events: none
 * - 文末设 prefers-reduced-motion 总闸：全部降级为 200ms 淡入或直接关闭
 *
 * 配套：motion.js（defer，渐进增强，无 JS 时内容可见）
 */

/* ============ A. 动效参数令牌（只扩展，不覆盖既有令牌） ============ */
:root {
  /* ---- 发光（源自既有令牌：--gold-glow:#e8c878 / --accent:#0e6f66） ---- */
  --fx-glow-gold: rgba(232, 200, 120, 0.28);
  --fx-glow-ink: rgba(14, 111, 102, 0.22);

  /* ---- 动效幅度 ---- */
  --fx-tilt-max: 4deg;      /* 轻倾限幅 ±4° */
  --fx-rise: 8px;           /* 入场位移上限 */

  /* ---- 时长（复用 styles.css 的 --dur-* / --ease 阶梯思路） ---- */
  --dur-fx: 420ms;          /* 常规入场/归位 */
  --dur-soft: 600ms;        /* 模糊渐显 */
  --dur-beam: 1200ms;       /* 金线流光（一次性） */
  --dur-ritual: 820ms;      /* 摇卦等仪式时刻 */
}

/* 墨夜：发光再减弱（≤0.25），背景走深墨不引入纯黑 */
:root[data-theme="dark"] {
  --fx-glow-gold: rgba(232, 200, 120, 0.2);
  --fx-glow-ink: rgba(14, 111, 102, 0.16);
}

/* 跟随系统暗色双路径（与 enhance.css 同范式），取值与手动暗色一致 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fx-glow-gold: rgba(232, 200, 120, 0.2);
    --fx-glow-ink: rgba(14, 111, 102, 0.16);
  }
}

/* ============ B. fx-fade-up：向上淡入（阶梯用内联 --fx-delay） ============ */
/* 由 motion.js 在运行时注入 .fx-hidden（先接管再隐藏，无 JS 内容可见） */
.fx-hidden {
  opacity: 0;
  transform: translateY(var(--fx-rise));
}

.fx-fade-up {
  animation: fx-fade-up var(--dur-fx) var(--ease) both;
  animation-delay: var(--fx-delay, 0ms);
}

@keyframes fx-fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--fx-rise));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fx-soft-blur-in {
  from {
    opacity: 0;
    filter: blur(6px); /* 一次性 filter，非常驻 */
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* ============ D. fx-spotlight-soft：hover 才出现的极淡暖金聚光 ============ */
/* 需配合 motion.js 写 --mx / --my（相对元素的百分比坐标） */
.fx-spotlight-soft {
  position: relative;
  isolation: isolate;
}

.fx-spotlight-soft::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    180px circle at var(--mx, 50%) var(--my, 50%),
    var(--fx-glow-gold),
    transparent 70%
  );
  opacity: 0; /* 聚光层本体透明度受控：hover 后 0.6~1 × 令牌 α≤0.28 */
  transition: opacity var(--dur-fast) var(--ease);
  z-index: 0;
}

.fx-spotlight-soft:hover::after,
.fx-spotlight-soft:focus-within::after {
  opacity: 1;
}

/* ============ E. fx-hairline-beam：1px 细金线流光（一次性，约 1.2s 后停） ============ */
/* 由 motion.js 加 .fx-beam-run 触发，animationend 后移除，绝不循环 */
.fx-hairline-beam {
  position: relative;
  overflow: hidden;
}

.fx-hairline-beam::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 40%;
  pointer-events: none;
  background: conic-gradient(
    from 90deg at 50% 50%,
    transparent 0deg,
    var(--fx-glow-gold) 60deg,
    transparent 120deg
  );
  opacity: 0;
  transform: translateX(-100%);
  z-index: 1;
}

.fx-hairline-beam.fx-beam-run::before {
  animation: fx-hairline-beam var(--dur-beam) var(--ease) 1 both;
}

@keyframes fx-hairline-beam {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(260%);
  }
}

/* ============ F. fx-tilt-gentle：桌面指针轻倾（限幅 ±4°） ============ */
/* --rx / --ry 由 motion.js 写入并已限幅；仅 (pointer:fine) 场景启用 */
@media (hover: hover) and (pointer: fine) {
  .fx-tilt-gentle {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform var(--dur-fast) var(--ease);
    will-change: transform;
  }
}

@keyframes fx-settle-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  35% {
    transform: scale(1.015);
    opacity: 0.88;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============ H. prefers-reduced-motion 总闸：降级为 200ms 淡入或关闭 ============ */
@media (prefers-reduced-motion: reduce) {
  .fx-hidden {
    opacity: 0;
    transform: none; /* 去掉位移，仅保留淡入 */
  }

  .fx-fade-up,
  .fx-soft-blur-in,
  .fx-settle-pulse {
    animation-name: fx-reduced-fade;
    animation-duration: 200ms;
    animation-delay: 0ms;
  }

  /* 流光与倾斜直接关闭 */
  .fx-hairline-beam.fx-beam-run::before {
    animation: none;
    opacity: 0;
  }

  .fx-tilt-gentle {
    transform: none;
    transition: none;
  }

  .fx-spotlight-soft::after {
    transition: none;
  }
}

@keyframes fx-reduced-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============ I. 移动端头部紧凑化（尺寸收紧，无新色相、无动效） ============
 * 背景：enhance.css 给 .site-header.is-mobile 设了 min-height:52px !important
 * 与 padding !important，叠加品牌区/菜单按钮后整体偏高、留白大。
 * 另 styles.css 在 @media(max-width:960px) 把 .site-header 设为
 * flex-direction:column（约 2467 行），移动端三层纵向堆叠，需在此强制单行。
 * 仅命中 .is-mobile 类（layout.js 只在 ≤720px 注入），桌面端不受影响。
 * !important 用于胜过 enhance.css 的 !important 与 styles.css 媒体查询（本文件加载更晚）。
 */
.site-header.is-mobile {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 40px !important;
  padding: 2px 12px !important;
  gap: 8px;
}
/* 品牌区：收紧内边距与最小高度，保证 26px 头像不被裁切 */
.site-header.is-mobile .brand {
  padding: 1px 4px;
  min-height: 34px;
}
.site-header.is-mobile .brand-mark {
  width: 26px;
  height: 26px;
}
/* 副标题移动端直接隐藏（双保险：enhance.css 已在 ≤720px 隐藏，
   本规则同特异性且加载更晚，即使其媒体查询未命中也不露副标题） */
.site-header.is-mobile .brand p {
  display: none;
}
.site-header.is-mobile .brand h1 {
  font-size: 17px;
  line-height: 1;
}
/* 菜单按钮与主题切换同步再收 2px，不再撑开头部 */
.site-header.is-mobile .menu-trigger {
  height: 30px;
  padding: 0 9px;
}
.site-header.is-mobile .theme-toggle {
  width: 28px;
  height: 28px;
  /* 压过 enhance.css ≤720px 全局最小触控热区 button:not(...) min-height:44px，
     避免主题切换按钮被撑成 28×44 抬高头部 */
  min-height: 28px !important;
}
/* 用户区单行不折行，防止登录态按钮换行撑高头部（次要按钮移动端已由
   enhance.css 收进汉堡菜单；登录/退出入口保持可见） */
.site-header.is-mobile .user-area {
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  /* 压过 styles.css ≤960px 的 .user-area{width:100%}，防登录态内容增多时挤压品牌区 */
  width: auto !important;
}
.site-header.is-mobile .auth-button {
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
  flex: 0 0 auto;
  /* T13：压过 enhance.css ≤720px 全局触控热区 button:not(...) min-height:44px
     —— enhance 加载在本文件之后，同特异性下登录/签到等 auth-button
     会被撞回 44px 抬高头部（49px）；首页头部无 auth-button 仅 40px，
     页面间高度不一致。此处 !important 强制 30px，八页头部统一 40px。 */
  min-height: 30px !important;
}