/*
 * 未界数字 · 高级感交互层（fx.js 的样式）
 * 所有效果都是“加法”：脚本没运行、效果开关关闭或用户开启“减少动态效果”时，
 * 页面就是原本的静态排版。html.fx-motion 由 <head> 里的小脚本在可以做动效时加上，
 * 4 秒内 fx.js 没有就绪会自动撤掉，避免文字卡在起始状态。
 */

/* ── Smooth scroll (Lenis, desktop only). Rules below come from lenis.css (MIT). ── */
html.lenis,
html.lenis body { height: auto; }
html.lenis,
html.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── Character-by-character headings ── */
.fx-split { --fx-rise: .34em; }
.fx-u { display: inline-block; white-space: nowrap; }
.fx-keep { white-space: nowrap; }
.fx-c { display: inline-block; }
.fx-motion .fx-split .fx-c {
  opacity: .35;
  transform: translate3d(0, var(--fx-rise), 0);
  transition:
    transform .78s cubic-bezier(.2,.7,.2,1),
    opacity .6s ease;
  transition-delay: calc(var(--i, 0) * var(--fx-step, 24ms));
}
.fx-motion .fx-split.fx-hero .fx-c { opacity: .6; }
.fx-motion .fx-split.fx-in .fx-c { opacity: 1; transform: none; }
/* Before the script splits a first-screen headline, hold it where its characters will start,
   so the handover to the split version is invisible. */
.fx-motion :is(.wj-home-copy h1, .wj-hero__content h1, .pricing-hero-copy h1, .wj-error__content h1):not(.fx-split) {
  opacity: .6;
  transform: translate3d(0, .34em, 0);
}

/* ── Magnetic buttons (desktop, mouse only) ── */
.fx-magnetic {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform .6s cubic-bezier(.22,1,.36,1), background-color .2s ease, color .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.fx-magnetic > .fx-mag {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.fx-magnetic.fx-mag-release,
.fx-magnetic.fx-mag-release > .fx-mag {
  /* Overshoots slightly on the way back, like an elastic snap. */
  transition-duration: 1.15s;
  transition-timing-function: cubic-bezier(.34,1.9,.5,1);
}

/* ── Two-layer cursor (desktop, mouse only) ── */
html.fx-cursor-on,
html.fx-cursor-on * { cursor: none !important; }
html.fx-cursor-on :is(input, textarea, select, [contenteditable="true"]) { cursor: auto !important; }
.fx-cursor {
  position: fixed;
  z-index: 2147483000;
  inset: 0 auto auto 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity .25s ease;
}
.fx-cursor.is-hidden { opacity: 0; }
.fx-cursor-dot,
.fx-cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
}
.fx-cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #f5f8f7;
  box-shadow: 0 0 10px rgba(118,160,255,.6);
  transition: opacity .2s ease, transform .2s ease;
}
.fx-cursor-ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(236,243,241,.42);
  transition:
    width .35s cubic-bezier(.22,1,.36,1),
    height .35s cubic-bezier(.22,1,.36,1),
    margin .35s cubic-bezier(.22,1,.36,1),
    background-color .3s ease,
    border-color .3s ease;
}
.fx-cursor-label {
  color: #fff;
  font: 650 12px/1 "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .2s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.fx-cursor[data-state="link"] .fx-cursor-ring {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-color: rgba(118,160,255,.8);
  background: rgba(118,160,255,.12);
}
.fx-cursor[data-state="label"] .fx-cursor-ring {
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  border-color: transparent;
  background: rgba(4,85,253,.88);
  box-shadow: 0 10px 36px rgba(4,85,253,.3);
}
.fx-cursor[data-state="label"] .fx-cursor-label { opacity: 1; transform: none; }
.fx-cursor[data-state="label"] .fx-cursor-dot { opacity: 0; }
/* The cursor label takes over the globe's own drag hint; keyboard focus still shows it. */
html.fx-cursor-on .wj-video-explore:not(:focus-visible) span { opacity: 0; }

/* ── Route signal along the arcs (home “把触达接成一条路”, desktop) ── */
.wj-path.fx-route { padding-top: 86px; }
.wj-path.fx-route::before,
.wj-path.fx-route .wj-path-signal { display: none; }
.fx-route-svg {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}
.fx-route-base {
  fill: none;
  stroke: rgba(118,160,255,.42);
  stroke-width: 1.2;
  stroke-dasharray: 1.5 10;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.fx-route-trail {
  fill: none;
  stroke: url(#fx-route-gradient);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.fx-route-glyph circle { fill: #f5f8f7; }
.fx-route-glyph .fx-route-halo { fill: rgba(4,85,253,.35); }
.fx-route-glyph path { fill: none; stroke: rgba(118,160,255,.9); stroke-width: 2; stroke-linecap: round; }
.wj-path.fx-route article > i { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-color .3s ease; }
.wj-path.fx-route article:not(.fx-lit) > i { background: rgba(118,160,255,.35); box-shadow: 0 0 0 5px rgba(86,140,238,.05); }
.wj-path.fx-route article.fx-lit > i {
  background: #f5f8f7;
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(4,85,253,.18), 0 0 26px rgba(118,160,255,.75);
}
.wj-path.fx-route article > :is(h3, p) { transition: color .45s ease; }
.wj-path.fx-route article:not(.fx-lit) > h3 { color: rgba(245,248,247,.62); }

@media (prefers-reduced-motion: reduce) {
  .fx-cursor { display: none; }
  .fx-split .fx-c { opacity: 1 !important; transform: none !important; }
}
@media print {
  .fx-cursor,
  .fx-route-svg { display: none !important; }
  .fx-split .fx-c { opacity: 1 !important; transform: none !important; }
}

.fx-w { white-space: nowrap; }