/* ==========================================================
   JR杰瑞 · 进阶动效层 extras.css  (v1.0 / 2026-09-07)
   ------------------------------------------------------------
   三个备选思路的实现：
     ① 遮罩揭示 · 品牌字成型（SVG stroke draw-on）
     ② 文字逐行上浮（line-mask rise）
     ③ 磁吸光标 + 分层视差（magnetic + layered parallax）
   令牌与 motion.css 共用（--e-out / --t-* ），风格保持一致。
   接入：brand.css → motion.css → extras.css
   ========================================================== */

/* =========================================================
   ① 遮罩揭示 · 品牌字成型
   ---------------------------------------------------------
   场景：入口页 Logo、关于我们品牌形象区、三个产品子页 Hero 标题
   触发：进入视口（配合 .reveal）或页面加载
   时长：描边 900ms → 填充淡入 320ms（属"揭示"类，刻意长于交互反馈）
   ========================================================= */
.brandmark {
  display: block;
  width: clamp(180px, 26vw, 280px);
  height: auto;
  overflow: visible;
}
/* 描边层：dasharray 由 JS 或 CSS 变量写入，dashoffset 从全长收到 0 */
.brandmark__stroke {
  fill: none;
  stroke: url(#jrGrad);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* 用 pathLength="100" 归一化，不必 JS 量长度 */
  stroke-dasharray: var(--len, 100);
  stroke-dashoffset: var(--len, 100);
}
.brandmark.is-draw .brandmark__stroke {
  animation: jr-draw 900ms var(--e-out) forwards;
}
@keyframes jr-draw { to { stroke-dashoffset: 0; } }

/* 点亮层：与描边同路径，描完 80% 后带辉光淡入
   注意：中心线笔画是开放路径，fill 会生成怪形状，必须保持 none */
.brandmark__fill {
  fill: none;
  opacity: 0;
  filter: drop-shadow(0 0 9px rgba(180, 83, 42, .5));
}
.brandmark.is-draw .brandmark__fill {
  animation: jr-fill 320ms var(--e-out) 720ms forwards;
}
@keyframes jr-fill { to { opacity: 1; } }

/* 变体 B：中文标题用"遮罩从左扫过"（比描边稳，成本也低）
   场景：杰瑞 / 三条创作流水线 等中文大字                     */
.wipe {
  position: relative;
  display: inline-block;
}
.wipe > span {
  display: inline-block;
  -webkit-mask-image: linear-gradient(90deg, #000 0 0, transparent 0);
          mask-image: linear-gradient(90deg, #000 0 0, transparent 0);
  -webkit-mask-size: 0% 100%;
          mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}
.wipe.is-draw > span {
  -webkit-mask-image: linear-gradient(90deg, #000 0 100%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0 100%, transparent 100%);
  animation: jr-wipe 760ms var(--e-out) forwards;
}
@keyframes jr-wipe {
  from { -webkit-mask-size: 0% 100%;   mask-size: 0% 100%; }
  to   { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
}

/* =========================================================
   ② 文字逐行上浮（line-mask rise）
   ---------------------------------------------------------
   场景：Hero 主标题、各区块大标题、CTA 主句
   触发：进入视口（配合 .reveal）或加载
   时长：每行 620ms，行间错峰 80ms —— 比整块淡入慢约 200ms，换来杂志感
   用法：
     <h2 class="lines">
       <span class="line"><i data-line>第一行</i></span>
       <span class="line"><i data-line>第二行</i></span>
     </h2>
   说明：.line 是 overflow:hidden 的"窗口"，<i> 才做位移，
        所以每一行都像从纸面下方推上来，而不是整块飘。       */
.lines { display: block; }
.lines .line {
  display: block;
  overflow: hidden;          /* 关键：裁掉窗口外的部分 */
  padding-bottom: .06em;     /* 给下伸笔画（如"g""）留空间，避免被裁 */
  margin-bottom: -.06em;
}
.lines .line > i {
  display: block;
  font-style: normal;
  transform: translateY(110%);
  opacity: 0;
}
.lines.is-rise .line > i {
  animation: jr-rise-line 620ms var(--e-out) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes jr-rise-line {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* 整块上浮（对照用，凸显"逐行"与"整块"的观感差异） */
.lines.is-rise-block { animation: jr-rise-block 620ms var(--e-out) forwards; }
@keyframes jr-rise-block {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   ③ 磁吸光标 + 分层视差
   ---------------------------------------------------------
   场景：主 CTA 按钮、画廊三张图、产品卡封面
   触发：mousemove（rAF 节流，只写 transform）
   参数：data-magnetic  = 吸附强度（0–1，建议 ≤0.22）
        data-radius    = 触发半径 px（默认 90）
        data-max       = 位移上限 px（默认 6，超过会让人点不准）
   降级：触屏 / reduced-motion 完全不绑定
   ========================================================= */
[data-magnetic] {
  will-change: transform;
  transition: transform 320ms var(--e-out);
}
/* JS 接管后加 .is-magnet，改为短过渡，跟随更贴手 */
[data-magnetic].is-magnet { transition: transform 140ms linear; }

/* 分层视差：图片与其上层文字按不同系数移动，制造纵深
   关键：基础态不放大（避免静态裁切），仅在 hover 跟随时轻微放大留视差余量 */
.layered { position: relative; overflow: hidden; }
.layered__img {
  transform: scale(1);
  transition: transform 420ms var(--e-out);
  will-change: transform;
}
.layered__cap {
  transition: transform 420ms var(--e-out);
  will-change: transform;
}
/* 比例系数由 JS 写成 --px / --py（-0.5 ~ 0.5）；scale 1.02 极轻微，留出 hover 平移余量 */
.layered.is-active .layered__img { transform: translate3d(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 8px), 0) scale(1.02); }
.layered.is-active .layered__cap { transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -14px), 0); }

/* 磁吸元素的"回位"：鼠标离开后由 .is-magnet 的 140ms 过渡接管 */

/* =========================================================
   降级与收口
   ========================================================= */

/* 触屏：磁吸与分层视差全部关闭（没有 hover，且会干扰触摸滚动） */
@media (hover: none), (pointer: coarse) {
  [data-magnetic] { transform: none !important; transition: none; }
  .layered__img, .layered__cap { transform: none !important; }
}

/* 减弱动效：不做"过程"，只给"结果" */
@media (prefers-reduced-motion: reduce) {
  .brandmark__stroke { stroke-dashoffset: 0; }
  .brandmark__fill { opacity: 1; }
  .brandmark.is-draw .brandmark__stroke,
  .brandmark.is-draw .brandmark__fill { animation: none; }
  .wipe > span { -webkit-mask-image: none; mask-image: none; }
  .wipe.is-draw > span { animation: none; }
  .lines .line > i { transform: none; opacity: 1; }
  .lines.is-rise .line > i { animation: none; }
  .lines.is-rise-block { animation: none; opacity: 1; transform: none; }
  [data-magnetic] { transform: none !important; }
  .layered__img { transform: none; }
  .layered__cap { transform: none; }
}

/* 打印：全部展开，不留隐藏内容 */
@media print {
  .lines .line > i { transform: none !important; opacity: 1 !important; }
  .brandmark__fill { opacity: 1 !important; }
}

/* =========================================================
   演示页专用（不属于交付内容，打包时可删）
   ========================================================= */
.x-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
}
.x-tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  display: inline-block; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
  background: rgba(180, 83, 42, .12); border: 1px solid rgba(180, 83, 42, .3); color: #67e8f9;
}
.x-meta { font-size: 13px; color: var(--muted); line-height: 1.9; margin-top: 14px; }
.x-meta b { color: var(--text-dim); }
.x-stage {
  min-height: 190px; display: grid; place-items: center;
  background: radial-gradient(70% 80% at 50% 40%, rgba(180, 83, 42, .07), transparent 70%), var(--bg-soft);
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 26px;
  overflow: hidden;
}
.x-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.x-bar button {
  font-family: inherit; font-size: 12.5px; padding: 7px 13px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--text-dim);
  transition: var(--t-fast) var(--e-out);
}
.x-bar button:hover { border-color: rgba(180, 83, 42, .4); color: var(--text); }