/* 动效层。所有隐藏态都挂在 html.motion 下：无 JS 或减少动态效果时内容照常显示。
   只动 transform / opacity / clip-path，避免触发重排。 */

:root { --ease: cubic-bezier(.16, 1, .3, 1); --turn-r: clamp(18px, 2.6vw, 34px); --hold: 10vh; --pad: clamp(52px, 9vh, 104px); }
@media (max-width: 820px) { :root { --hold: 6vh; } }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

html.motion body { overflow-x: clip; }

/* 顶部进度条 */
.progress {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
html:not(.motion) .progress { display: none; }

/* 顶栏随滚动方向隐藏 */
html.motion .top { transition: background .3s, border-color .3s, transform .55s var(--ease); }
/* 毛玻璃滚动时要逐帧重新模糊背后内容，动效模式下换成实色 */
html.motion .top.is-stuck { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 13, 15, .95); }
html.motion .top.is-hidden { transform: translate3d(0, -100%, 0); }

/* 导航滑动指示条 */
.nav { position: relative; }
.nav__ind {
  position: absolute; left: 0; bottom: -2px; height: 1px; width: var(--w, 0); background: var(--accent);
  opacity: var(--o, 0); transform: translate3d(var(--x, 0), 0, 0); pointer-events: none;
  transition: transform .6s var(--ease), width .6s var(--ease), opacity .3s;
}

/* 翻页：每一屏滚到底时停住，下一屏带圆角盖上来，上一屏缩小变暗退到后面。
   sticky 的 top 由 JS 按每页高度算出；这里只动 transform / opacity。 */
html.motion .page { position: sticky; top: 0; min-height: 100vh; margin-bottom: var(--hold); }
html.motion .hero.page { margin-bottom: 0; }
html.motion .page--last { position: relative; min-height: 0; margin-bottom: 0; }
/* 比一屏矮的页补足一屏，内容居中：翻页算法假定每页至少一屏高 */
html.motion .sec.page, html.motion .contact.page { display: flex; flex-direction: column; justify-content: center; padding: var(--pad) 0; }
.fit { width: 100%; flex: none; transform-origin: 50% 0; }
html.motion.turn .page { transform-origin: 50% calc(100% - 50vh); }
html.motion.turn .page.is-near { will-change: transform, opacity; }
html.motion .foot { position: relative; z-index: 2; }
html.motion .page:not(.hero) > .sec:first-child,
html.motion .sec.page, html.motion .contact.page {
  border-radius: var(--turn-r) var(--turn-r) 0 0;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .42), 0 -1px 0 rgba(237, 233, 225, .1);
}
html.motion .hero__in, html.motion .hero__canvas { will-change: transform, opacity; }

html.motion h1 { visibility: hidden; }
/* inherit 而不是 visible：否则首屏被盖住隐藏后标题还会继续绘制，从缝隙里露出来 */
html.motion.ready h1 { visibility: inherit; }
html.motion .hero__eyebrow, html.motion .hero__foot, html.motion .hero__note {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .9s ease, transform 1.1s var(--ease);
}
html.motion.ready .hero__eyebrow { opacity: 1; transform: none; transition-delay: .1s; }
html.motion.ready .hero__foot { opacity: 1; transform: none; transition-delay: .85s; }
html.motion.ready .hero__note { opacity: 1; transform: none; transition-delay: 1.2s; }

/* 进场要快：总时长控制在半秒左右，内容不能比翻页慢 */
html.js.motion .reveal { transition-duration: .5s, .6s; }

/* 逐字进场 */
html.js .reveal.split { opacity: 1; transform: none; transition: none; }
html.motion .ch {
  display: inline-block; opacity: 0; transform: translate3d(0, .6em, 0);
  transition: opacity .42s ease, transform .6s var(--ease);
  transition-delay: min(calc(var(--i) * 9ms), .26s);
}
html.motion .is-in .ch { opacity: 1; transform: none; }
html.motion h1 .ch { transition: opacity .7s ease, transform 1.05s var(--ease); transition-delay: calc(var(--i) * 30ms + 160ms); }
html.motion.ready h1 .ch { opacity: 1; transform: none; }

/* 成组依次进场 */
html.js .reveal.stagger { opacity: 1; transform: none; transition: none; }
html.motion .rise {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity .42s ease, transform .6s var(--ease);
  transition-delay: calc(var(--d) * 36ms);
}
html.motion .is-in > .rise { opacity: 1; transform: none; }

/* 滚得快时直接显示 */
html.motion .quick .ch, html.motion .quick > .rise, html.motion .quick .mask,
html.motion .stairs.quick li, html.motion .quick figcaption, html.motion .reveal.quick {
  transition-duration: .2s; transition-delay: 0s;
}

/* 想 做 验 改：随滚动依次点亮 */
.loop4 { position: relative; }
html.motion .loop4::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent);
  transform: scaleX(var(--lp, 0)); transform-origin: 0 50%;
}
html.motion .loop4 li { opacity: calc(.44 + .56 * var(--a, 0)); }
html.motion .loop4 li.reveal, html.motion .loop4 li.reveal.is-in { transform: none; transition: none; }
html.motion .loop4 li:nth-child(3) b { color: inherit; }
html.motion .loop4 b { transition: color .5s ease; }
html.motion .loop4 li.is-now b { color: var(--accent); }

/* 光斑 */
.loop4 li, .study { position: relative; overflow: hidden; }
.loop4 li::after, .study::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 105, 43, .14), transparent 70%);
}
.loop4 li:hover::after, .study:hover::after { opacity: 1; }
.study > * { position: relative; z-index: 1; }

/* 世界模型：四层从底向上展开 */
.stairs li:nth-child(1) { --n: 3; } .stairs li:nth-child(2) { --n: 2; }
.stairs li:nth-child(3) { --n: 1; } .stairs li:nth-child(4) { --n: 0; }
html.motion .stairs li {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s var(--ease); transition-delay: calc(var(--n) * 70ms);
}
html.motion .stairs.is-in li { clip-path: inset(0 0 0 0); }

/* 成果图：擦开 + 视差 */
.mask { overflow: hidden; }
html.motion .mask { clip-path: inset(0 0 100% 0); transition: clip-path .85s var(--ease); }
html.motion .is-in .mask { clip-path: inset(0 0 0 0); }
html.motion .duo .mask img { will-change: transform; transform: scale(1.14); }
.duo .mask + .mask { transition-delay: .07s; }
html.motion .case__fig.reveal { transform: none; }
html.motion .case__fig figcaption { transition: opacity .5s ease .2s; opacity: 0; }
html.motion .case__fig.is-in figcaption { opacity: 1; }

/* 按钮：填充 + 磁吸 */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .55s var(--ease), color .3s, border-color .3s; }
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--on-ink);
  transform: translate3d(0, 102%, 0); transition: transform .55s var(--ease);
}
.btn:hover { color: var(--ink); border-color: var(--on-ink); }
.btn:hover::before { transform: none; }
.btn--solid:hover { color: #140a05; background: var(--accent); border-color: var(--accent); }
.btn--solid::before { background: #f7ab7f; }
.nav .nav__cta { transition: color .2s, border-color .3s, transform .55s var(--ease); }

/* 细节过渡 */
.logos li { transition: background .3s ease; }
.logos li:hover { background: #fbf9f4; }
.fields li, .howto li, .trio > div { transition: transform .5s var(--ease); }
@media (hover: hover) {
  .fields li:hover, .howto li:hover { transform: translate3d(6px, 0, 0); }
}
.phone { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.phone:hover { text-decoration: none; background-size: 100% 1px; }

/* 三维展示 */
.view { margin-top: clamp(56px, 7vw, 96px); }
.view[hidden] { display: none; }
.view__box {
  position: relative; overflow: hidden; height: clamp(440px, 72vh, 760px);
  background: radial-gradient(70% 90% at 50% 38%, #171a1f 0%, #0b0c0f 62%, #070809 100%);
  box-shadow: inset 0 0 0 1px var(--line-ink);
}
.view__box::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(237, 233, 225, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(237, 233, 225, .035) 1px, transparent 1px);
  background-size: 64px 64px;
}
.view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s ease; touch-action: pan-y; cursor: grab; }
.view canvas:active { cursor: grabbing; }
.view.is-ready canvas { opacity: 1; }
.view figcaption { margin-top: 12px; font-size: 14px; color: var(--on-ink-2); }
.view__ui { position: absolute; left: 20px; bottom: 20px; display: flex; border: 1px solid var(--line-ink); background: rgba(12, 13, 15, .72); }
.view__ui button {
  appearance: none; border: 0; background: none; color: var(--on-ink-2); font: inherit; font-size: 15px; line-height: 1;
  padding: 12px 20px; cursor: pointer; transition: color .25s, background .25s;
}
.view__ui button + button { border-left: 1px solid var(--line-ink); }
.view__ui button:hover { color: var(--on-ink); }
.view__ui button[aria-pressed="true"] { background: var(--accent); color: #140a05; }
.view__legend {
  position: absolute; right: 20px; bottom: 26px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--on-ink-2);
  opacity: 0; transition: opacity .4s;
}
.view__legend.is-on { opacity: 1; }
.view__legend i { width: 132px; height: 6px; background: linear-gradient(90deg, #000004, #420a68, #932667, #dd513a, #fca50a, #fcffa4); }
.view__anno { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.anno { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .3s ease; --dx: 64px; will-change: transform; }
.anno.is-on { opacity: 1; transition: opacity .45s ease .5s; }
.anno.is-on.is-back { opacity: 0; transition: opacity .25s ease; }
.anno b { position: absolute; top: -8px; font-weight: 400; font-size: 14px; line-height: 16px; white-space: nowrap; color: var(--on-ink); }
.anno--r b { left: calc(var(--dx) + 8px); }
.anno--l b { right: calc(var(--dx) + 8px); }
.anno::before { content: ""; position: absolute; top: -3px; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(232, 105, 43, .22); }
.anno::after { content: ""; position: absolute; top: 0; height: 1px; width: var(--dx); background: rgba(237, 233, 225, .42); }
.anno--r::after { left: 0; }
.anno--l::after { right: 0; }

.view--paper { margin-bottom: 0; }
.view--paper .view__box { background: radial-gradient(70% 90% at 50% 40%, #fbf9f4 0%, #efebe2 60%, #e6e1d6 100%); box-shadow: inset 0 0 0 1px var(--line-paper); height: clamp(400px, 66vh, 680px); }
.view--paper .view__box::before { background-image: linear-gradient(rgba(23, 24, 26, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 24, 26, .03) 1px, transparent 1px); }
.view--paper figcaption { color: var(--on-paper-2); }
.view--paper:not([hidden]) + .fields { margin-top: 18px; }
.fields li.is-pick { position: relative; cursor: pointer; }
.fields li.is-pick::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
}
.fields li.is-now::before { transform: scaleX(var(--run, 0)); }
.fields li.is-now.is-held::before { transform: none; }
.fields li.is-now h3 { color: var(--accent-text); }
@media (max-width: 720px) {
  .anno { display: none; }
  .view__ui { left: 12px; bottom: 12px; }
  .view__ui button { padding: 11px 15px; }
  .view__legend { right: 12px; bottom: 60px; }
  .view__legend i { width: 84px; }
  .view__box { height: min(112vw, 72vh); }
  .view--paper .view__box { height: min(92vw, 62vh); }
}

/* 飞轮：桌面固定，滚动带动一圈走完 */
.r2 { display: none; }
.c2 { transition: opacity .3s ease; }
.nodes circle, .nodes text { transition: fill .4s ease, stroke .4s ease; }
@media (min-width: 1081px) {
  html.motion #rsi { padding-bottom: 0; }
  html.motion .pin { height: 200vh; }
  html.motion .pin__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
  html.motion .fly { width: 100%; margin-top: 0; }
  html.motion .r1 { display: none; }
  html.motion .r2 {
    display: block; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 100;
    stroke-dashoffset: var(--o, 100); transform-origin: 200px 200px; transform: rotate(-90deg);
  }
  html.motion .nodes g.is-on circle { fill: var(--accent); stroke: var(--accent); }
  html.motion .nodes g.is-on text { fill: #140a05; }
  html.motion .steps li.reveal, html.motion .steps li.reveal.is-in { opacity: .46; transform: none; transition: opacity .45s ease; }
  html.motion .steps li.reveal.is-on { opacity: 1; }
}


@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .nav__ind, .top, .phone { transition: none; }
}