/* ============================================================
   ONLINESVR · 科技感动效层（叠加在 Stitch 生成的页面之上）
   ============================================================ */
:root {
  --fx-cyan: 6, 182, 212;
  --fx-sky: 2, 132, 199;
  --fx-indigo: 99, 102, 241;
  --fx-emerald: 16, 185, 129;
}

/* ---------- 顶部滚动进度条 ---------- */
#fx-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgb(var(--fx-indigo)), rgb(var(--fx-sky)), rgb(var(--fx-cyan)), rgb(var(--fx-emerald)));
  box-shadow: 0 0 12px rgba(var(--fx-cyan), .8);
  z-index: 60; pointer-events: none;
}

/* ---------- HERO：粒子网络 / 扫描光 / 光球 ---------- */
#fx-hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
#hero .fx-scan {
  position: absolute; left: 0; right: 0; height: 180px; top: -180px;
  background: linear-gradient(180deg, transparent, rgba(var(--fx-cyan), .07) 70%, rgba(var(--fx-cyan), .35) 99%, transparent);
  animation: fx-scan 7s cubic-bezier(.45, 0, .55, 1) infinite;
  z-index: 0; pointer-events: none;
}
@keyframes fx-scan { 0% { top: -180px; } 100% { top: 100%; } }

.fx-orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; }
.fx-orb-a { width: 380px; height: 380px; left: 6%; top: 18%; background: rgba(var(--fx-indigo), .14); animation: fx-drift 14s ease-in-out infinite alternate; }
.fx-orb-b { width: 420px; height: 420px; right: 4%; top: 36%; background: rgba(var(--fx-cyan), .14); animation: fx-drift 18s ease-in-out infinite alternate-reverse; }
@keyframes fx-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, -40px) scale(1.15); } }

/* 品牌字：流光渐变 + 解码 */
.fx-brand {
  background: linear-gradient(100deg, #0f172a 0%, #0c4a6e 30%, #06b6d4 45%, #6366f1 55%, #0c4a6e 70%, #0f172a 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fx-flow 6s linear infinite;
  position: relative;
}
.fx-shimmer {
  background: linear-gradient(100deg, #0f172a 40%, #0284c7 50%, #0f172a 60%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fx-flow 5s ease-in-out infinite;
}
@keyframes fx-flow { 0% { background-position: 100% 0; } 100% { background-position: -150% 0; } }

/* ---------- 执行演示卡：流动描边 ---------- */
.fx-border-run { isolation: isolate; }
.fx-border-run::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--fx-angle, 0deg), transparent 0 70%, rgba(var(--fx-cyan), .95) 80%, rgba(var(--fx-indigo), .9) 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fx-rotate 5s linear infinite;
  pointer-events: none; z-index: -1;
}
@property --fx-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes fx-rotate { to { --fx-angle: 360deg; } }

/* 三层卡片依次被“激活” */
.fx-layers > div { transition: box-shadow .5s, transform .5s, border-color .5s; }
.fx-layers > div.fx-on {
  transform: translateY(-3px);
  border-color: rgba(var(--fx-cyan), .7) !important;
  box-shadow: 0 0 0 1px rgba(var(--fx-cyan), .25), 0 12px 32px -8px rgba(var(--fx-sky), .35);
}

/* 数据包轨道 */
.fx-track {
  position: relative; height: 4px; border-radius: 99px; overflow: hidden;
  background: linear-gradient(90deg, rgba(168, 85, 247, .18), rgba(var(--fx-sky), .22), rgba(var(--fx-emerald), .2));
}
.fx-track span {
  position: absolute; top: 0; height: 100%; width: 70px; border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(var(--fx-cyan), 1), #fff);
  box-shadow: 0 0 10px rgba(var(--fx-cyan), .9);
  animation: fx-packet 2.8s cubic-bezier(.6, .05, .3, .95) infinite;
  left: -80px;
}
.fx-track span:nth-child(2) { animation-delay: .7s; }
.fx-track span:nth-child(3) { animation-delay: 1.4s; background: linear-gradient(90deg, transparent, rgba(var(--fx-emerald), 1), #fff); }
.fx-track span:nth-child(4) { animation-delay: 2.1s; background: linear-gradient(90deg, transparent, rgba(var(--fx-indigo), 1), #fff); }
@keyframes fx-packet { 0% { left: -80px; } 100% { left: 100%; } }

/* 实时执行日志 */
.fx-term {
  height: 92px; overflow: hidden; text-align: left;
  font: 11px/1.7 "JetBrains Mono", ui-monospace, monospace;
  color: #94a3b8; background: #0b1220; border-radius: 10px; padding: 8px 12px;
  border: 1px solid rgba(var(--fx-sky), .35);
  box-shadow: inset 0 0 30px rgba(var(--fx-sky), .12);
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%);
          mask-image: linear-gradient(180deg, transparent, #000 30%);
}
.fx-term .ln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fx-ln-in .35s ease-out; }
.fx-term .t { color: #475569; }
.fx-term .k { color: #38bdf8; }
.fx-term .v { color: #c4b5fd; }
.fx-term .ok { color: #34d399; }
.fx-term .cur::after { content: "▋"; color: #22d3ee; animation: fx-blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes fx-ln-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes fx-blink { 50% { opacity: 0; } }

/* ---------- 范式演进：逐级点亮 ---------- */
.fx-phases > div { position: relative; transition: transform .5s, box-shadow .5s; }
.fx-phases > div.fx-lit {
  border-color: rgba(var(--fx-sky), .55);
  box-shadow: 0 0 0 1px rgba(var(--fx-sky), .15), 0 8px 24px -10px rgba(var(--fx-sky), .45);
  transform: translateY(-2px);
}

/* ---------- Video Agent 流水线：逐步执行 ---------- */
#fx-pipeline > div { position: relative; overflow: hidden; transition: border-color .3s, background-color .3s, transform .3s; }
#fx-pipeline > div::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, rgb(var(--fx-sky)), rgb(var(--fx-cyan)));
  box-shadow: 0 0 8px rgba(var(--fx-cyan), .9);
}
#fx-pipeline > div.fx-run { border-color: rgba(var(--fx-cyan), .8); background-color: #f0f9ff; transform: translateY(-3px); }
#fx-pipeline > div.fx-run::after { animation: fx-fill var(--fx-step, 900ms) linear forwards; }
#fx-pipeline > div.fx-done::after { width: 100%; background: rgb(var(--fx-emerald)); box-shadow: none; }
#fx-pipeline > div.fx-done::before {
  content: "✓"; position: absolute; top: 4px; right: 7px; font-size: 10px; font-weight: 700;
  color: rgb(var(--fx-emerald));
}
@keyframes fx-fill { to { width: 100%; } }

/* ---------- 飞轮：轨道 + 数据雨 ---------- */
#fx-rain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35; pointer-events: none; }
.fx-orbit { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); opacity: .5; pointer-events: none; }
.fx-orbit circle { fill: none; }
.fx-orbit .o1 { stroke: rgba(56, 189, 248, .25); stroke-dasharray: 3 7; }
.fx-orbit .o2 { stroke: rgba(52, 211, 153, .2); }
.fx-orbit .o3 { stroke: rgba(129, 140, 248, .18); stroke-dasharray: 1 5; }
.fx-orbit .dot { fill: #38bdf8; filter: drop-shadow(0 0 6px #38bdf8); }
.fx-orbit .dot-g { fill: #34d399; filter: drop-shadow(0 0 6px #34d399); }
.fx-orbit g { transform-origin: 200px 200px; }
.fx-orbit .spin-a { animation: fx-spin 9s linear infinite; }
.fx-orbit .spin-b { animation: fx-spin 6s linear infinite reverse; }
.fx-orbit .spin-c { animation: fx-spin 16s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
#fx-fly > div { position: relative; transition: border-color .4s, box-shadow .4s, transform .4s; }
#fx-fly > div.fx-on {
  border-color: rgba(56, 189, 248, .8);
  box-shadow: 0 0 18px -2px rgba(56, 189, 248, .45), inset 0 0 12px rgba(56, 189, 248, .12);
  transform: translateX(6px);
}

/* ---------- 通用：滚动显现 ---------- */
.fx-reveal { opacity: 0; transform: translateY(26px); filter: blur(4px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1), filter .8s;
  transition-delay: var(--fx-d, 0ms); }
.fx-reveal.fx-in { opacity: 1; transform: none; filter: none; }

/* ---------- 通用：光标聚光 + 3D 倾斜 ---------- */
.fx-spot { position: relative; transform-style: preserve-3d; will-change: transform; }
.fx-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--fx-cyan), .13), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
.fx-spot:hover::after { opacity: 1; }
#flywheel .fx-spot::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(56, 189, 248, .16), transparent 45%); }

/* ---------- 按钮扫光 ---------- */
.fx-shine { position: relative; overflow: hidden; }
.fx-shine::before {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); animation: fx-shine 3.6s ease-in-out infinite;
}
@keyframes fx-shine { 0%, 60% { left: -75%; } 100% { left: 130%; } }

/* 导航当前项 */
header nav a.fx-active { color: #0284c7; position: relative; }
header nav a.fx-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgb(var(--fx-sky)), rgb(var(--fx-cyan)));
  box-shadow: 0 0 8px rgba(var(--fx-cyan), .8);
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fx-reveal { opacity: 1; transform: none; filter: none; }
  #fx-hero-canvas, #fx-rain, #hero .fx-scan { display: none; }
}

/* ---------- 范式演进：Dock 式悬停放大 + 两侧排开 ---------- */
.fx-phases.fx-dock > div {
  transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), opacity .4s, box-shadow .4s, filter .4s;
  transform-origin: 50% 60%;
  cursor: default;
}
.fx-phases.fx-dock.fx-hovering > div { opacity: .72; filter: saturate(.8); }
.fx-phases.fx-dock.fx-hovering > div.fx-focus {
  opacity: 1; filter: none; z-index: 20;
  border-color: transparent;
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 45%, #06b6d4 75%, #0ea5e9 100%);
  background-size: 250% 250%;
  animation: fx-focus-grad 3s ease-in-out infinite;
  box-shadow: 0 24px 48px -16px rgba(var(--fx-indigo), .5), 0 0 0 1px rgba(255, 255, 255, .6) inset;
}
.fx-phases.fx-dock.fx-hovering > div.fx-focus * { color: #fff; }
.fx-phases.fx-dock.fx-hovering > div.fx-focus > div:first-child,
.fx-phases.fx-dock.fx-hovering > div.fx-focus > div:nth-child(3) { color: rgba(255, 255, 255, .82); }
.fx-phases.fx-dock.fx-hovering > div.fx-focus > div:last-child { background: rgba(255, 255, 255, .18); }
@keyframes fx-focus-grad {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}