/* 首页动效：滚动渐显、标题轮换词、跑马灯、原理图里的数据包、技能安装与 Agent 切换。
   动画只在 motion.js 给 <html> 加上 .mo 之后生效；没有 JS 或系统要求减少动态时，页面按最终状态静止显示。 */
:root { --warn: #b45309; --sky1: #d7ecff; --sky2: #f4f9ff; --cover1: #f6d5c4; --cover2: #e7a089; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --warn: #f59e0b; --sky1: #1b2a3d; --sky2: #24364d; --cover1: #6b3f33; --cover2: #a35a45; } }
:root[data-theme="dark"] { --warn: #f59e0b; --sky1: #1b2a3d; --sky2: #24364d; --cover1: #6b3f33; --cover2: #a35a45; }

/* 滚动渐显 */
.mo .rv { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.mo .rv.in { opacity: 1; transform: none; }

/* 标题轮换词：词由 motion.js 按 data-words 生成，叠在同一格里，宽度跟着当前词变化 */
.mo .rot { display: inline-grid; transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.mo .rot > span { grid-area: 1 / 1; justify-self: start; white-space: nowrap; opacity: 0; transform: translateY(.4em); filter: blur(6px); transition: opacity .55s, transform .55s, filter .55s; background: linear-gradient(90deg, var(--ink), var(--ok) 50%, var(--ink)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mo-shift 6s linear infinite; }
.mo .rot > span.on { opacity: 1; transform: none; filter: none; }
.mo .rot > span.out { opacity: 0; transform: translateY(-.4em); filter: blur(6px); }
@keyframes mo-shift { to { background-position: -200% 0; } }

/* 主按钮轻轻呼吸，箭头往前推 */
.mo .hero .ctas .btn:first-child { animation: mo-breathe 3.2s ease-in-out infinite; }
@keyframes mo-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 22%, transparent); } 60% { box-shadow: 0 0 0 7px transparent; } }
.mo .pair .ar { display: inline-block; animation: mo-nudge 1.8s ease-in-out infinite; }
@keyframes mo-nudge { 50% { transform: translateX(3px); } }

/* 播放中：没到时间的元素先不占位，到点后淡入；没做完的显示转圈和进度条 */
.play [data-at]:not(.on) { display: none; }
.play [data-at].on { animation: mo-in .45s ease both; }
@keyframes mo-in { from { opacity: 0; transform: translateY(8px); } }
.play [data-done]:not(.done) em { visibility: hidden; }
.play .step[data-done]:not(.done) .st { font-size: 0; }
.play .step[data-done]:not(.done) .st::before { content: ""; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--ok); border-radius: 50%; animation: mo-spin .8s linear infinite; }
@keyframes mo-spin { to { transform: rotate(1turn); } }

/* ===== 工作原理：两条线上来回跑的数据包，中转的三条说明轮流亮起 ===== */
@media (min-width: 961px) { .flow { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.05fr) 56px minmax(0, 1fr); } }
.flow .arrow { display: grid; place-items: center; padding: 0 4px; }
.wire { position: relative; display: block; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px); }
.wire i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.wire i + i { left: auto; right: 0; background: var(--ink2); }
.mo .wire i { animation: mo-pkt 2.6s cubic-bezier(.5, 0, .5, 1) infinite; }
.mo .wire i + i { animation: mo-pkt-back 2.6s cubic-bezier(.5, 0, .5, 1) 1.3s infinite; }
@keyframes mo-pkt { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes mo-pkt-back { 0% { right: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { right: calc(100% - 8px); opacity: 0; } }
@media (max-width: 960px) {
  .flow .arrow { transform: none; height: 40px; }
  .wire { width: 2px; height: 100%; background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 11px); }
  .wire i { top: 0; left: -3px; }
  .wire i + i { right: auto; left: -3px; top: auto; bottom: 0; }
  .mo .wire i { animation-name: mo-pkt-v; }
  .mo .wire i + i { animation-name: mo-pkt-v-back; }
}
@keyframes mo-pkt-v { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
@keyframes mo-pkt-v-back { 0% { bottom: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { bottom: calc(100% - 8px); opacity: 0; } }
.mo .hub img { animation: mo-lock 2.6s ease-in-out infinite; }
@keyframes mo-lock { 45%, 55% { transform: scale(1.08); } }
.mo .hub .chip { animation: mo-chip 7.5s ease-in-out infinite; }
.mo .hub .chip:nth-child(2) { animation-delay: 2.5s; } .mo .hub .chip:nth-child(3) { animation-delay: 5s; }
@keyframes mo-chip { 0%, 30% { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); color: var(--ink); } 36%, 100% { border-color: var(--line); color: var(--ink2); } }

/* ===== OPC 团队：四步轮流亮起，TEAM.md 一行行写出来 ===== */
.mo .steps4 .card { animation: mo-step 8s ease-in-out infinite; }
.mo .steps4 .card::before { animation: mo-step-n 8s ease-in-out infinite; animation-delay: inherit; }
.mo .steps4 .card:nth-child(2) { animation-delay: 2s; } .mo .steps4 .card:nth-child(3) { animation-delay: 4s; } .mo .steps4 .card:nth-child(4) { animation-delay: 6s; }
@keyframes mo-step { 0%, 22% { border-color: var(--ink3); box-shadow: var(--shadow); } 28%, 100% { border-color: var(--line); box-shadow: none; } }
@keyframes mo-step-n { 0%, 22% { background: var(--ink); color: var(--bg); border-color: var(--ink); } 28%, 100% { background: transparent; color: var(--ink2); border-color: var(--line); } }
.mo .md .ln { opacity: 0; transition: opacity .35s calc(var(--l) * 140ms); }
.mo .md.in .ln { opacity: 1; }

/* ===== 切换 Agent、装技能：轮流演示 ===== */
.sw-row { transition: background .35s; }
.sw-row .chk { margin-left: auto; font-size: 12px; color: var(--ok); opacity: 0; transition: opacity .3s; }
.sw-row .tick ~ .chk { margin-left: 8px; }
.sw-row.on .chk { opacity: 1; }
.price { position: relative; overflow: hidden; }
.price::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ok) 28%, transparent); transform: scaleX(0); transform-origin: left; }
.mo [data-cycle="install"] .sw-row.on .price::after { animation: mo-install 1.3s ease-out forwards; }
.mo [data-cycle="install"] .sw-row .chk { transition-delay: 0s; }
.mo [data-cycle="install"] .sw-row.on .chk { transition-delay: 1.3s; }
@keyframes mo-install { to { transform: scaleX(1); } }

/* ===== 支持的 Agent、模型：两行反向滚动的跑马灯，悬停暂停 ===== */
.logos.marquee { flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; max-width: 1080px; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee .track { display: flex; gap: 10px 26px; flex: none; padding-right: 26px; animation: mo-marquee var(--dur, 60s) linear infinite; }
.marquee.rev .track { animation-direction: reverse; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes mo-marquee { to { transform: translateX(-100%); } }

/* 滚出视口的区块暂停循环动画，省电 */
.mo .off, .mo .off *, .mo .off *::before, .mo .off *::after { animation-play-state: paused !important; }