/* ==========================================================================
   API 统一接口 · 顾瑶工作室
   设计语言承自 mcylyr.cn：深海军蓝 / 极光光球 / 网格背景 / 青粉渐变 /
   玻璃质感组件 / 滚动入场；布局与组件为本站原创。
   ========================================================================== */

:root {
  --ink: #eef3ff;
  --muted: #aeb9d5;
  --line: rgba(190, 210, 255, 0.18);
  --cyan: #65e9ff;
  --violet: #b1a1ff;
  --pink: #ff8fc8;
  --panel: rgba(19, 31, 67, 0.52);
}

* { box-sizing: border-box; }
html { overflow-y: scroll; scrollbar-width: auto; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; overflow-y: auto; color: var(--ink); background: #070c1d; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- 极光背景与网格 ---------- */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 50% -20%, #263767 0, transparent 40%), #070c1d; }
.aurora .orb { transform: translateY(calc(0px - var(--scroll-y, 0px))); }
.orb { position: absolute; border-radius: 999px; filter: blur(1px); opacity: 0.62; animation: drift 14s ease-in-out infinite alternate; }
.orb.one { top: 9vh; left: -13vw; width: 38vw; height: 38vw; background: radial-gradient(circle, #264fa4, transparent 66%); }
.orb.two { top: 26vh; right: -10vw; width: 35vw; height: 35vw; background: radial-gradient(circle, #713a9c, transparent 67%); animation-delay: -6s; }
.orb.three { bottom: -17vw; left: 36vw; width: 30vw; height: 30vw; background: radial-gradient(circle, #007a8e, transparent 67%); animation-delay: -9s; }
.grid { position: fixed; inset: 0; z-index: -1; opacity: 0.25; background-image: linear-gradient(rgba(138, 172, 255, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 172, 255, 0.09) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 88%); }

main { width: min(1180px, calc(100% - 56px)); margin: 0 auto; }

/* ---------- 通用元素 ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: #d6e1ff; font-size: 0.78rem; letter-spacing: 0.12em; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #72f3c3; box-shadow: 0 0 13px #72f3c3; }

h1, h2 { margin: 0; letter-spacing: -0.05em; }
h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.06; }
h2 { font-size: clamp(2.1rem, 3.8vw, 3.6rem); line-height: 1.08; }
h1 span, h2 span { color: transparent; background: linear-gradient(110deg, var(--cyan), var(--violet) 50%, var(--pink)); background-clip: text; }

.lead { max-width: 480px; color: var(--muted); font-size: 1.02rem; line-height: 1.9; }

.chip-list { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 29px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 99px; background: rgba(24, 35, 73, 0.45); color: #c7d2ed; font-size: 0.76rem; letter-spacing: 0.08em; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

.section-heading { margin-bottom: clamp(38px, 6vh, 64px); }
.section-heading h2 { max-width: 620px; margin-top: 16px; }

/* ---------- 第一屏：gateway ---------- */
.gateway { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(44px, 7vw, 110px); min-height: calc(100svh - 72px); padding: clamp(56px, 9vh, 120px) 0; }
.gateway-copy h1 { margin: 20px 0 18px; }

/* 实时调用流面板（原创组件） */
.feed-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(160deg, rgba(28, 42, 92, 0.55), rgba(9, 16, 38, 0.72)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.32); }
.feed-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(10, 18, 43, 0.55); }
.feed-title { color: #c7d2ed; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em; }
.feed-live { display: inline-flex; align-items: center; gap: 7px; color: #72f3c3; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; }
.feed-live i { width: 7px; height: 7px; border-radius: 50%; background: #72f3c3; box-shadow: 0 0 12px #72f3c3; animation: blink-soft 1.6s ease-in-out infinite; }
.feed-body { height: 264px; padding: 14px 18px; overflow: hidden; font-family: ui-monospace, Consolas, "JetBrains Mono", monospace; font-size: 0.78rem; line-height: 2.05; }
.feed-row { display: flex; gap: 12px; align-items: baseline; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; }
.feed-row.in { opacity: 1; transform: translateY(0); }
.feed-row .mark { flex-shrink: 0; width: 12px; text-align: center; }
.feed-row .src { color: var(--violet); }
.feed-row .path { color: #d6e1ff; overflow: hidden; text-overflow: ellipsis; }
.feed-row .code { margin-left: auto; color: #72f3c3; }
.feed-row.denied .mark, .feed-row.denied .code { color: var(--pink); }
.feed-row.denied .path { color: rgba(255, 143, 200, 0.75); }
.feed-foot { display: flex; justify-content: space-between; padding: 11px 18px; border-top: 1px solid var(--line); color: rgba(174, 185, 213, 0.62); font-family: ui-monospace, Consolas, monospace; font-size: 0.66rem; letter-spacing: 0.08em; }

/* ---------- 第二屏：flow 调用链 ---------- */
.flow { position: relative; padding: clamp(80px, 11vh, 140px) 0; }
.flow-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.flow-line { position: absolute; top: 37px; left: 6%; right: 6%; height: 1px; background: linear-gradient(90deg, transparent, rgba(101, 233, 255, 0.55), rgba(177, 161, 255, 0.55), transparent); }
.flow-line i { position: absolute; top: -2.5px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: pulse-run 3.4s ease-in-out infinite; }
.flow-step { position: relative; padding: 20px 18px 22px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(165deg, rgba(30, 44, 96, 0.42), rgba(9, 16, 38, 0.6)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.07); transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.flow-step:hover { border-color: rgba(101, 233, 255, 0.42); transform: translateY(-6px); box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 18px 44px rgba(0, 0, 0, 0.3); }
.flow-symbol { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 15px; border: 1px solid rgba(101, 233, 255, 0.38); border-radius: 999px; background: rgba(12, 24, 58, 0.85); color: var(--cyan); font-size: 1rem; box-shadow: 0 0 20px rgba(101, 233, 255, 0.16); }
.flow-index { position: absolute; top: 16px; right: 16px; color: rgba(224, 234, 255, 0.4); font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.12em; }
.flow-step h3 { margin: 0 0 8px; font-size: 1.08rem; }
.flow-step p { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.65; }

/* ---------- 第三屏：rules 分行列表 ---------- */
.rules { position: relative; padding: clamp(70px, 10vh, 130px) 0 clamp(60px, 8vh, 100px); }
.rules-list { border-top: 1px solid var(--line); }
.rule { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 4vw, 46px); padding: 30px 10px; border-bottom: 1px solid var(--line); transition: background 0.3s ease, padding 0.3s ease; }
.rule::before { position: absolute; left: 0; top: 50%; width: 3px; height: 0; content: ""; border-radius: 99px; background: linear-gradient(var(--cyan), var(--violet)); transform: translateY(-50%); transition: height 0.3s ease; }
.rule:hover { background: rgba(24, 35, 73, 0.28); padding-left: 26px; }
.rule:hover::before { height: 56%; }
.rule-symbol { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--cyan); font-size: 1.15rem; box-shadow: 0 0 18px rgba(101, 233, 255, 0.12); }
.rule:nth-child(2) .rule-symbol { color: var(--violet); box-shadow: 0 0 18px rgba(177, 161, 255, 0.14); }
.rule:nth-child(3) .rule-symbol { color: var(--pink); box-shadow: 0 0 18px rgba(255, 143, 200, 0.14); }
.rule:nth-child(4) .rule-symbol { color: #72f3c3; box-shadow: 0 0 18px rgba(114, 243, 195, 0.14); }
.rule-main h3 { margin: 0 0 6px; font-size: 1.22rem; }
.rule-main p { max-width: 560px; margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.7; }
.rule-tag { color: rgba(224, 234, 255, 0.42); font-family: ui-monospace, Consolas, monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; }

/* ---------- 收尾 ---------- */
.ending { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 26px 0 64px; }
.ending-line { width: min(360px, 60vw); height: 1px; background: linear-gradient(90deg, transparent, rgba(134, 207, 255, 0.5), transparent); box-shadow: 0 0 24px rgba(104, 166, 255, 0.25); }
.ending p { margin: 0; color: var(--muted); font-size: 0.92rem; letter-spacing: 0.06em; }

/* ---------- 返回顶部 ---------- */
.back-to-top { position: fixed; right: clamp(18px, 3vw, 38px); bottom: clamp(18px, 3vw, 38px); z-index: 30; display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid rgba(168, 223, 255, 0.34); border-radius: 14px; background: rgba(10, 19, 43, 0.82); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.08); color: #eaf5ff; font: inherit; font-size: 0.78rem; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(16px); backdrop-filter: blur(14px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, border-color 0.25s ease; }
.back-to-top > span:first-child { color: var(--cyan); font-size: 1rem; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { border-color: var(--cyan); transform: translateY(-3px); }
.back-to-top:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------- 滚动入场 ---------- */
.gateway-copy, .feed-panel, .section-heading, .flow-step, .rule, .ending { opacity: 0; }

/* 保险：JS 未运行时内容直接可见，避免整页空白 */
html:not(.js) .gateway-copy, html:not(.js) .feed-panel, html:not(.js) .section-heading,
html:not(.js) .flow-step, html:not(.js) .rule, html:not(.js) .ending { opacity: 1; }
.gateway.scene-active .gateway-copy { animation: copy-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.gateway.scene-active .feed-panel { animation: panel-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
.flow.scene-active .section-heading, .rules.scene-active .section-heading { animation: copy-in 0.8s ease-out both; }
.flow.scene-active .flow-step { opacity: 1; animation: step-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.flow.scene-active .flow-step:nth-child(2) { animation-delay: 0.08s; }
.flow.scene-active .flow-step:nth-child(3) { animation-delay: 0.18s; }
.flow.scene-active .flow-step:nth-child(4) { animation-delay: 0.28s; }
.flow.scene-active .flow-step:nth-child(5) { animation-delay: 0.38s; }
.rules.scene-active .rule { opacity: 1; animation: rule-in 0.7s ease-out backwards; }
.rules.scene-active .rule:nth-child(2) { animation-delay: 0.07s; }
.rules.scene-active .rule:nth-child(3) { animation-delay: 0.14s; }
.rules.scene-active .rule:nth-child(4) { animation-delay: 0.21s; }
.rules.scene-active .rule:nth-child(5) { animation-delay: 0.28s; }
.ending.scene-active { opacity: 1; animation: copy-in 0.9s ease-out both; }

/* ---------- 动画 ---------- */
@keyframes drift { from { transform: translateY(calc(0px - var(--scroll-y, 0px))); } to { transform: translate(7vw, calc(-5vh - var(--scroll-y, 0px))) scale(1.13); } }
@keyframes blink-soft { 50% { opacity: 0.3; } }
@keyframes pulse-run { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
@keyframes copy-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes step-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rule-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .gateway { grid-template-columns: 1fr; gap: 46px; min-height: 0; padding-top: 64px; }
  .feed-body { height: 232px; }
  .flow-steps { grid-template-columns: repeat(2, 1fr); }
  .flow-line { display: none; }
}
@media (max-width: 620px) {
  main { width: min(100% - 32px, 1180px); }
  .flow-steps { grid-template-columns: 1fr; }
  .rule { grid-template-columns: auto minmax(0, 1fr); }
  .rule-tag { display: none; }
  .feed-row { font-size: 0.7rem; }
  .back-to-top { width: 46px; height: 46px; justify-content: center; padding: 0; }
  .back-to-top-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (prefers-reduced-motion: reduce) {
  .orb, .feed-live i, .flow-line i { animation: none; }
  .gateway-copy, .feed-panel, .section-heading, .flow-step, .rule, .ending { opacity: 1; animation: none; transform: none; }
  .feed-row { transition: none; opacity: 1; transform: none; }
  .back-to-top { transition: none; }
}