/* ==========================================================================
   科技化控件层（v3 专用）
   --------------------------------------------------------------------------
   科技感靠「仪器感」而不是靠发光堆料：
     细线几何（取景框 / 扫描线 / 网格）+ 精确短动效 + 红色作信号色
   每个控件用**不同**的手法，避免同一招到处套。

   全部挂到既有选择器上，不改 HTML 结构。
   伪元素占用情况（每个元素只用一侧，无冲突）：
     .btn--primary  ::after   光泽扫过
     .btn--inverse  ::after   光泽扫过
     .btn--secondary::before  四角取景框
     .btn--ghost    ::before  边框画出
     .svc-card__media ::before 取景框 / ::after 网格
     .case-card__media::before 扫光   / ::after 顶部信号线
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 数字滚动计数
   计数全程保持墨色：最终数字本身就是静态提示，不需要中途变红再跳回
   （变色再跳回是多余的注意力收费，也违反"动效从不是唯一反馈通道"）。
   -------------------------------------------------------------------------- */
[data-count] {
  display: inline-block;
  /* 不给 min-width：位数变化时的轻微位移是计数动画的正常表现，
     固定宽度反而会让短数字与「+」之间留下很大的空档 */
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   1. 主按钮 / 反白按钮：能量流动 + 光泽扫过
   -------------------------------------------------------------------------- */
.btn--primary {
  /* 横向渐变并放大画布，hover 时位移即产生「流动」感 */
  background-image: linear-gradient(90deg,
    var(--accent-lift) 0%, var(--accent) 34%, var(--accent-sink) 62%, var(--accent-lift) 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  transition: background-position var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring);
}

.btn--primary:hover,
.btn--primary:active { background-position: 100% 50%; }

.btn--primary,
.btn--inverse { position: relative; overflow: hidden; }

.btn--primary::after,
.btn--inverse::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 38%;
  pointer-events: none;
  background-image: linear-gradient(100deg,
    transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%);
  /* 只动 transform，不动 left */
  transform: translateX(-160%) skewX(-18deg);
  transition: transform var(--dur-slow) var(--ease-out);
}

.btn--primary:hover::after,
.btn--primary:focus-visible::after,
.btn--inverse:hover::after,
.btn--inverse:focus-visible::after { transform: translateX(330%) skewX(-18deg); }

/* --------------------------------------------------------------------------
   2. 次按钮：四角取景框（HUD 括号）
   8 层极细渐变一次画出四个角，不需要额外标签
   -------------------------------------------------------------------------- */
.btn--secondary { position: relative; }

.btn--secondary::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  --bc: var(--accent);
  background-image:
    linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
    linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
    linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
    linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc));
  background-repeat: no-repeat;
  background-size:
    10px 1.5px, 1.5px 10px,
    10px 1.5px, 1.5px 10px,
    10px 1.5px, 1.5px 10px,
    10px 1.5px, 1.5px 10px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.btn--secondary:hover::before,
.btn--secondary:focus-visible::before { opacity: 1; transform: scale(1); }

/* --------------------------------------------------------------------------
   3. 描边按钮：边框由左至右画出
   -------------------------------------------------------------------------- */
.btn--ghost { position: relative; overflow: hidden; }

.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--accent);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn--ghost:hover::before { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   4. 导航：扫描下划线 + 当前项脉冲信号点
   -------------------------------------------------------------------------- */
.nav__link { position: relative; }

.nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: 0.4rem;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__link:hover::after { transform: scaleX(1); }

.nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.42rem;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: var(--r-pill);
  background-color: var(--accent);
  animation: nav-signal 2.4s var(--ease-in-out) infinite;
}

@keyframes nav-signal {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(1.8); }
}

/* --------------------------------------------------------------------------
   5. 主题开关：外环 arc 旋转
   -------------------------------------------------------------------------- */
.theme-toggle { position: relative; }

.theme-toggle::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0deg 210deg, var(--accent) 268deg, transparent 320deg);
  /* 遮罩成 2px 细环 */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.theme-toggle:hover::after,
.theme-toggle:focus-visible::after { opacity: 1; animation: spin 1.5s linear infinite; }

/* --------------------------------------------------------------------------
   6. 服务图：取景框 + 细网格浮出
   -------------------------------------------------------------------------- */
.svc-card__media { position: relative; }

.svc-card__media::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  pointer-events: none;
  --bc: rgba(255, 255, 255, 0.9);
  background-image:
    linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
    linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
    linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
    linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc));
  background-repeat: no-repeat;
  background-size:
    12px 1.5px, 1.5px 12px,
    12px 1.5px, 1.5px 12px,
    12px 1.5px, 1.5px 12px,
    12px 1.5px, 1.5px 12px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.svc-card:hover .svc-card__media::before { opacity: 1; transform: scale(1); }

.svc-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.svc-card:hover .svc-card__media::after { opacity: 1; }

/* --------------------------------------------------------------------------
   8. 团队头像：外环 conic 旋转
   -------------------------------------------------------------------------- */
.team-card__avatar { position: relative; }

.team-card__avatar::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--r-pill);
  pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0deg 200deg, var(--accent) 262deg, transparent 318deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.team-card:hover .team-card__avatar::after { opacity: 1; animation: spin 2.6s linear infinite; }

/* --------------------------------------------------------------------------
   10. 表单：聚焦时对角角标
   角标用 background-image 画在控件自身上，输入框同样支持。

   这里只负责角标，**不写 box-shadow**。
   原来这里也声明了一份环 + inset，而且因为本文件排在样式表最后，
   会把 components.css 里 .field__control:focus 的环盖掉 —— 同一个聚焦态
   有两个主人，改一处忘另一处就会出现「角标在、环不见了」。
   现在分工明确：角标归动效层（本文件），环归组件层（components.css 的
   --sh-ring-glow）。本文件只留位置类声明（position/overflow）作为动效前提，
   那些和当前组件不冲突。
   -------------------------------------------------------------------------- */
.field__control:focus {
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 9px 2px, 2px 9px, 9px 2px, 2px 9px;
  background-position: left top, left top, right bottom, right bottom;
}

/* --------------------------------------------------------------------------
   11. 页脚链接：短横线滑入（预留位置，不产生位移）
   -------------------------------------------------------------------------- */
.footer__link { position: relative; padding-left: 14px; }

.footer__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background-color: var(--accent);
  transform: translateX(-6px);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

.footer__link:hover::before { transform: translateX(0); opacity: 1; }

/* --------------------------------------------------------------------------
   12. 联系行：箭头滑入
   -------------------------------------------------------------------------- */
.contact-list__row { position: relative; }

.contact-list__row::after {
  content: "";
  position: absolute;
  right: var(--space-5);
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--accent);
  border-right: 1.5px solid var(--accent);
  transform: translate(6px, -50%) rotate(45deg);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

.contact-list__row:hover::after { transform: translate(0, -50%) rotate(45deg); opacity: 1; }

/* --------------------------------------------------------------------------
   13. 优势条目：左侧信号竖条
   -------------------------------------------------------------------------- */
.key-item { position: relative; overflow: hidden; }

.key-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}

.key-item:hover::before { transform: scaleY(1); }

/* --------------------------------------------------------------------------
   15. 动效开关（头部）
   与主题开关同款圆形按钮；图标随 data-motion 切换
   -------------------------------------------------------------------------- */
.motion-toggle__off { display: none; }

html[data-motion="off"] .motion-toggle__on { display: none; }
html[data-motion="off"] .motion-toggle__off { display: block; }

/* --------------------------------------------------------------------------
   16. 减少动效：无限动画与扫光全部停掉
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .nav__link[aria-current="page"]::before,
  html:not([data-motion="on"]) .theme-toggle:hover::after,
  html:not([data-motion="on"]) .team-card:hover .team-card__avatar::after { animation: none !important; }

  html:not([data-motion="on"]) .btn--primary::after,
  html:not([data-motion="on"]) .btn--inverse::after,
  html:not([data-motion="on"]) .case-card__media::before,
  html:not([data-motion="on"]) .sec-head__link::after { display: none; }

  html:not([data-motion="on"]) .btn--primary:hover,
  html:not([data-motion="on"]) .btn--primary:active { background-position: 0% 50%; }

  /* 与 data-motion 无关的「强制」组：上面是「用户没显式开动效时跟随系统」，
     而下面这几处是循环播放的动画 —— 导航信号点、主题按钮光环、头像光环。
     准则要求无限动画在减少动效下无条件停掉，所以不加 html:not([data-motion="on"])。 */
  .nav__link[aria-current="page"]::before,
  .theme-toggle:hover::after,
  .theme-toggle:focus-visible::after,
  .team-card:hover .team-card__avatar::after { animation: none !important; }
}

/* --------------------------------------------------------------------------
   不该被折行的「数字 + 单位」单位
   电话号码一旦折行就会读成两串号；统计数字（6,000+）的数字与加号被拆到两行
   同样读不通。这里用 white-space 兜底，而不是逐个塞  ：
   站点里的号码多数写成 +62 21 8062 7092，中间没有空格，  管不到连字符处的断行。
   （带空格的两种写法仍照准则补了  ，见联系页 HTML —— 两层并存不冲突。）
   放在 v4 本地样式表里，共享的 /assets/css/components.css 保持原样，v3 不受影响。
   -------------------------------------------------------------------------- */
a[href^="tel:"] { white-space: nowrap; }
.stat-cell__num { white-space: nowrap; }