/* ============================================================================
   ChipWorld — effects layer（鼠标互动 / 滚动动效）
   ----------------------------------------------------------------------------
   本文件只负责「看不见的层」：光标、聚光灯、进度条、倾斜、计数、动效降级开关。
   所有位移一律走 transform / opacity，不改 width/height/top/left/filter。
   样式挂载由 <html> 上的三个状态类控制，JS 关闭时全部自动失效：
     .has-cursor   精细指针 + 悬停能力（触屏不加）→ 自绘光标
     .fx-rich      桌面端（>=768px 且未开启 reduced-motion）→ 富动效
     .fx-motion    未开启 reduced-motion → 过渡类动效
   载入顺序在 components.css / home.css 之后，允许覆盖组件 hover 行为。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. 动效预算令牌
   --------------------------------------------------------------------------- */
:root {
  --fx-stagger: 60ms;          /* 子项错峰 */
  --fx-tilt: 6deg;             /* 卡片最大倾角 */
  --fx-tilt-hero: 8deg;        /* Hero 芯片最大倾角 */
  --fx-magnet: 60px;           /* 磁性吸附半径 */
  --fx-magnet-max: 6px;        /* 磁性最大位移 */
}

/* ---------------------------------------------------------------------------
   1. 自定义光标（指针设备专属；输入控件内恢复系统光标）
   --------------------------------------------------------------------------- */
.fx-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
  /* 承载子元素的共同定位原点，自身不参与布局 */
  width: 0;
  height: 0;
  will-change: transform;
}
.fx-cursor.is-live { opacity: 1; }
.fx-cursor.is-hidden { opacity: 0 !important; }

.fx-cursor__dot,
.fx-cursor__ring {
  position: absolute;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
}

/* 8px 实心点：跟随即时，无缓动 */
.fx-cursor__dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--glow-100);
  box-shadow: 0 0 12px -2px rgba(200, 220, 255, .8);
  transition: width 160ms var(--ease-out), height 160ms var(--ease-out),
              background-color 160ms var(--ease-out), opacity 160ms var(--ease-out);
}

/* 32px 描边圈：lerp 滞后，形成拖尾 */
.fx-cursor__ring {
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 1px solid rgba(160, 128, 224, .55);
  transition: width 240ms var(--ease-out), height 240ms var(--ease-out),
              margin 240ms var(--ease-out), border-radius 240ms var(--ease-out),
              border-color 240ms var(--ease-out), background-color 240ms var(--ease-out),
              opacity 200ms var(--ease-out);
}

/* 光标标签（卡片内出现「смотреть」）——56px 的圈要装得下 8 个西里尔字母，
   所以字号压到 9px、字距只留 .02em，并在圈内居中换行 */
.fx-cursor__label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  transform: translate3d(-50%, -50%, 0);
  font: 500 9px/1.15 var(--font-mono, ui-monospace, monospace);
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-on-accent);
  white-space: normal;
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}

/* 状态 · 可点链接：圈收缩、点放大 */
.fx-cursor.is-link .fx-cursor__dot { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.fx-cursor.is-link .fx-cursor__ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-color: rgba(200, 220, 255, .7); }

/* 状态 · 卡片：圈放大到 56px、变紫、浮现标签 */
.fx-cursor.is-card .fx-cursor__dot { width: 0; height: 0; margin: 0; opacity: 0; }
.fx-cursor.is-card .fx-cursor__ring {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-color: rgba(160, 128, 224, .8);
  background: rgba(124, 92, 255, .16);
}
.fx-cursor.is-card .fx-cursor__label { opacity: 1; }

/* 状态 · 文内链接：压扁成竖条 */
.fx-cursor.is-text .fx-cursor__ring {
  width: 3px;
  height: 26px;
  margin: -13px 0 0 -1.5px;
  border-radius: 2px;
  border-color: transparent;
  background: rgba(200, 220, 255, .85);
}

/* 状态 · 按下（不碰 transform，避免与拖尾的逐帧拉伸互盖） */
.fx-cursor.is-down .fx-cursor__ring {
  box-shadow: 0 0 0 7px rgba(160, 128, 224, .16);
  border-color: rgba(200, 220, 255, .9);
}

/* ---------------------------------------------------------------------------
   1b. 光标形态层：ring（默认）/ flame 小火球 / chip 小芯片 / spark 电弧 / comet 彗尾
   ----------------------------------------------------------------------------
   五个形态共用同一个跟随节点，同一时刻只有一个可见；
   切换由 <div class="fx-cursor" data-shape="…"> 上的 is-* 类控制，JS 不离线时永远是 ring。
   ------------------------------------------------------------------------- */
.fx-cursor__flame,
.fx-cursor__chip,
.fx-cursor__spark,
.fx-cursor__comet,
.fx-cursor__embers {
  display: none;
}
.fx-cursor.is-flame .fx-cursor__flame,
.fx-cursor.is-flame .fx-cursor__embers,
.fx-cursor.is-chip .fx-cursor__chip,
.fx-cursor.is-spark .fx-cursor__spark,
.fx-cursor.is-comet .fx-cursor__comet { display: block; }

/* 换形态时把圆环/圆点让位（spark 与 comet 保留圆点当弹头） */
.fx-cursor.is-flame .fx-cursor__dot,
.fx-cursor.is-flame .fx-cursor__ring,
.fx-cursor.is-chip .fx-cursor__dot,
.fx-cursor.is-chip .fx-cursor__ring,
.fx-cursor.is-spark .fx-cursor__ring,
.fx-cursor.is-comet .fx-cursor__ring { opacity: 0; }

.fx-cursor__flame,
.fx-cursor__chip,
.fx-cursor__spark,
.fx-cursor__comet {
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
}

/* --- flame：小火球。核心 + 光晕双层，各自轻微呼吸，快甩时整体放大 --- */
.fx-cursor__flame { width: 26px; height: 26px; }
.fx-cursor.is-flame .fx-cursor__flame {
  transform: translate3d(-50%, -50%, 0) scale(calc(1 + var(--fx-spd, 0) * 0.22));
}
.fx-cursor__halo {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 214, 140, .55) 0%, rgba(255, 142, 60, .28) 34%,
    rgba(124, 92, 255, .16) 62%, transparent 78%);
  animation: fx-flame-halo 900ms var(--ease-in-out) infinite alternate;
}
.fx-cursor__core {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 62%,
    #FFF7E6 0%, #FFD08A 36%, #FF8A3D 64%, rgba(124, 92, 255, .9) 100%);
  box-shadow: 0 0 14px 2px rgba(255, 150, 60, .55), 0 0 28px 7px rgba(124, 92, 255, .28);
  animation: fx-flame-core 620ms var(--ease-in-out) infinite alternate;
}
@keyframes fx-flame-halo {
  from { transform: scale(.86) translateY(1.5px); opacity: .75; }
  to   { transform: scale(1.16) translateY(-2px); opacity: 1; }
}
@keyframes fx-flame-core {
  from { transform: scale(.9); }
  to   { transform: scale(1.09); }
}

/* 火星尾迹：12 个节点循环复用，由 JS 每两帧投放一颗 */
.fx-cursor__embers { position: absolute; }
.fx-cursor__embers i {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE9C4 0%, rgba(255, 138, 61, .7) 58%, transparent 74%);
  opacity: 0;
  will-change: transform, opacity;
}

/* --- chip：小芯片。引脚外圈慢转，命中卡片时放大提速、落点变亮 --- */
.fx-cursor__chip { width: 26px; height: 26px; color: var(--violet-300); }
.fx-cursor__chip svg { display: block; width: 100%; height: 100%; animation: fx-chip-spin 7s linear infinite; }
.fx-cursor__chip .fx-chip__die { opacity: .95; }
@keyframes fx-chip-spin { to { transform: rotate(360deg); } }
.fx-cursor.is-card .fx-cursor__chip { transform: translate3d(-50%, -50%, 0) scale(1.4); }
.fx-cursor.is-card .fx-cursor__chip svg { animation-duration: 1.8s; color: var(--glow-100); }
.fx-cursor.is-down .fx-cursor__chip { transform: translate3d(-50%, -50%, 0) scale(.88); }

/* --- spark：电弧。三颗电子绕指针公转 --- */
.fx-cursor__spark {
  width: 30px;
  height: 30px;
  animation: fx-spark-orbit 2.4s linear infinite;
}
.fx-cursor__spark i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--glow-100);
  box-shadow: 0 0 10px 2px rgba(160, 128, 224, .7);
}
.fx-cursor__spark i:nth-child(1) { transform: rotate(0deg) translateX(12px); }
.fx-cursor__spark i:nth-child(2) { transform: rotate(120deg) translateX(12px); }
.fx-cursor__spark i:nth-child(3) { transform: rotate(240deg) translateX(12px); }
@keyframes fx-spark-orbit {
  to { transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}

/* --- comet：彗尾。尾巴指向运动的反方向，速度越快越亮越长 --- */
.fx-cursor__comet { width: 90px; height: 90px; }
.fx-cursor__comet i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(34px + var(--fx-spd, 0) * 46px);
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  transform-origin: 0 50%;
  transform: rotate(calc(var(--fx-ang, 0rad) + 3.14159rad));
  background: linear-gradient(90deg,
    rgba(200, 220, 255, .8) 0%, rgba(160, 128, 224, .35) 46%, transparent 100%);
  opacity: calc(.18 + var(--fx-spd, 0) * .8);
}

/* ---------------------------------------------------------------------------
   1c. 形态选择面板（左下角，桌面专属，默认半透明，悬停才完全显形）
   ------------------------------------------------------------------------- */
.fx-cursor-dock {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-default);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: .32;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.fx-cursor-dock:hover,
.fx-cursor-dock:focus-within { opacity: 1; transform: translateY(-2px); }
.fx-cursor-dock__hint { padding: 0 3px; font-size: 11px; color: var(--text-muted); }
.fx-cursor-dock__btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.fx-cursor-dock__btn i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}
.fx-cursor-dock__btn[aria-pressed="true"] {
  border-color: var(--violet-500);
  background: rgba(124, 92, 255, .18);
}
.fx-cursor-dock__btn[aria-pressed="true"] i { background: var(--glow-100); box-shadow: 0 0 8px rgba(200, 220, 255, .8); }
.fx-cursor-dock__btn--ring i { background: transparent; border: 1px solid var(--text-muted); }
.fx-cursor-dock__btn--ring[aria-pressed="true"] i { background: transparent; border-color: var(--glow-100); box-shadow: none; }
.fx-cursor-dock__btn--flame i { background: radial-gradient(circle, #FFE9C4, #FF8A3D); }
.fx-cursor-dock__btn--chip i { width: 9px; height: 9px; border-radius: 2px; background: var(--violet-300); }
.fx-cursor-dock__btn--spark i { box-shadow: 0 0 0 3px rgba(160, 128, 224, .28); }
.fx-cursor-dock__btn--comet i { width: 14px; height: 3px; border-radius: 2px; background: var(--blue-300); }

/* 隐藏系统光标（输入控件与可编辑区域内恢复，避免打字时失去落点） */
.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor [role="button"],
.has-cursor label,
.has-cursor summary { cursor: none; }
.has-cursor :is(input, textarea, select, [contenteditable="true"]) { cursor: auto; }
.has-cursor iframe { cursor: auto; }

/* ---------------------------------------------------------------------------
   2. 全页鼠标聚光灯（pointer-events:none 的固定光斑，跟随 transform）
   --------------------------------------------------------------------------- */
.fx-spot {
  position: fixed;
  top: 0;
  left: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  background: radial-gradient(circle closest-side,
              rgba(124, 92, 255, .10) 0%,
              rgba(74, 123, 255, .06) 45%,
              transparent 72%);
  will-change: transform, opacity;
  transform: translate3d(-999px, -999px, 0);
}
.fx-rich .fx-spot.is-on { opacity: 1; }

/* ---------------------------------------------------------------------------
   3. 滚动进度条（2px，scaleX 驱动）
   --------------------------------------------------------------------------- */
.fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 120;                 /* 在 sticky header 之上 */
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(74, 123, 255, .9), rgba(160, 128, 224, .95), rgba(200, 220, 255, .9));
  box-shadow: 0 0 12px -2px rgba(160, 128, 224, .7);
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
.fx-progress.is-on { opacity: 1; }

/* ---------------------------------------------------------------------------
   4. 滚动进场：子项错峰（位移与时长在 base.css 的 .js-reveal .reveal 里，
      这里只补 --i 驱动的延迟；24px 的位移不在这里写，否则会盖掉 .is-in 的 transform:none）
   --------------------------------------------------------------------------- */
[data-stagger] > .reveal {
  /* --i 由 JS 写入；与 base.css 的 data-delay 并存，这里优先级更高 */
  transition-delay: calc(var(--i, 0) * var(--fx-stagger) + 40ms);
}

/* 进场完成后交还 transform 控制权给倾斜/磁吸，避免 620ms 过渡拖慢跟手 */
.cat-card.is-in,
.svc-card.is-in,
.why__item.is-in {
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

/* ---------------------------------------------------------------------------
   5. 磁性按钮：位移由 JS 逐帧写入；回弹由 JS 弹簧完成，CSS 只保证不被过渡拖住
   --------------------------------------------------------------------------- */
.fx-rich .magnetic {
  transition: color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  will-change: transform;
}

/* ---------------------------------------------------------------------------
   6. 3D 倾斜：卡片（列表行 / 表格不参与，见 JS 选择器白名单）
   --------------------------------------------------------------------------- */
.fx-rich :is(.cat-card, .svc-card) {
  transform-style: preserve-3d;
  will-change: transform;
}
/* 跟随鼠标的径向高光——用 background-image 绘制在内容之下，零伪元素、零 z-index 战争 */
.fx-rich :is(.cat-card, .svc-card).is-tilting {
  background-image: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
                    rgba(160, 128, 224, .13), transparent 68%);
}

/* ---------------------------------------------------------------------------
   7. Hero 芯片：视差 + 倾斜 + 背光反向偏移
   --------------------------------------------------------------------------- */
.hero-chip {
  transform-style: preserve-3d;
}

/* 背光从伪元素搬进真实 DOM：JS 要对它做反向位移造景深，伪元素动不了 */
.hero-chip__glow {
  position: absolute;
  inset: -14%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 42% 40%, rgba(124, 92, 255, .34) 0%, rgba(124, 92, 255, .12) 42%, transparent 68%),
    radial-gradient(circle at 68% 62%, rgba(74, 123, 255, .22) 0%, transparent 66%);
}
.fx-rich .hero-chip { will-change: transform; }
.fx-rich .hero-chip__glow { will-change: transform; }

/* ---------------------------------------------------------------------------
   9.1 品牌墙：悬停时芯片轻微放大提亮（替换掉原来「说停就停」的 paused）
   --------------------------------------------------------------------------- */
.fx-rich .marquee:hover .marquee__track { animation-play-state: running; }
.fx-rich .brand-chip { transition: transform 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.fx-rich .brand-chip:hover { transform: translateY(-2px) scale(1.06); }

/* ---------------------------------------------------------------------------
   8. 计数中：等宽数字，避免逐帧跳动导致横向抖动
   --------------------------------------------------------------------------- */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   9. 品牌墙：悬停降速（playbackRate 由 JS 用 Web Animations API 控制）
   --------------------------------------------------------------------------- */
.fx-rich .marquee:hover .brand-chip {
  color: var(--text-primary);
}

/* ---------------------------------------------------------------------------
   10. View Transitions 挂载点（跨文档导航预留，当前仅站内锚点）
   --------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(.22, .68, .28, 1);
}

/* ---------------------------------------------------------------------------
   11. 降级：无悬停能力的设备 / 移动端 / reduced-motion
   --------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .fx-cursor, .fx-cursor-dock, .fx-spot { display: none; }
}

@media (max-width: 767px) {
  /* 移动端只保留「滚动进场」与「滚动进度条」，其余动效层不占任何渲染成本 */
  .fx-spot,
  .fx-cursor, .fx-cursor-dock { display: none; }
  .fx-rich :is(.cat-card, .svc-card).is-tilting { background-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-cursor, .fx-cursor-dock, .fx-spot { display: none; }
  .fx-progress { transition: none; }
  [data-stagger] > .reveal { transition-delay: 0ms !important; }
  .fx-rich :is(.cat-card, .svc-card),
  .fx-rich .hero-chip { will-change: auto; }
}

@media print {
  .fx-cursor, .fx-cursor-dock, .fx-spot, .fx-progress { display: none !important; }
}