/* ============================================================
   修行闭环 · 开场导入（Loop Intro）
   一条 ∞ 形双环轨道：左环 = 能力（学练交评），右环 = 商业（十步问道）。
   旅行者走完一圈后，双环收拢进入双罗盘指挥舱。
   ============================================================ */
.loop-intro {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 10%, #0A1128 0%, #020617 100%),
    #03050B;
  color: #F0F4FF;
  opacity: 0; visibility: hidden;
  transition: opacity .45s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.loop-intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
  background-size: 55px 55px;
}
.loop-intro.open { opacity: 1; visibility: visible; transition: opacity .45s cubic-bezier(.22,1,.36,1); }
.loop-intro.leaving { opacity: 0; visibility: visible; transition: opacity .4s ease; }

.li-inner { position: relative; width: min(960px, 100%); display: flex; flex-direction: column; gap: 14px; }
.li-headline { text-align: center; }
.li-headline .eyebrow {
  font-family: 'Orbitron', 'Inter', sans-serif; font-size: 12px; letter-spacing: .3em;
  color: rgba(0, 240, 255, .85); text-transform: uppercase; margin-bottom: 10px;
}
.li-headline h2 {
  font-size: clamp(22px, 3.8vw, 34px); font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(135deg, #fff 20%, #00F0FF 60%, #FF5F1A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 轨道舞台：SVG 只画轨道，站点/标签/旅行者用 HTML 叠加，字号不随缩放变小 */
.li-stage { position: relative; width: 100%; aspect-ratio: 1800 / 1100; }
.li-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* 复刻参考图的双线轨道：外线 + 底色内衬 = 两条平行亮线；宽度用屏幕像素，大小屏粗细一致 */
.li-rail-glow { fill: none; stroke: rgba(0, 240, 255, .3); stroke-width: 19; stroke-linecap: round; filter: blur(10px); }
.li-rail-outline { fill: none; stroke: #00F0FF; stroke-width: 8px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.li-rail-channel { fill: none; stroke: #050a16; stroke-width: 4px; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.li-hub {
  position: absolute; transform: translate(-50%, -50%);
  font-size: clamp(11.5px, 1.9vw, 15px); letter-spacing: .18em; color: #8A99C4;
  white-space: nowrap; opacity: 0; transition: opacity .7s ease;
  text-align: center; pointer-events: none;
}
.li-hub b { display: block; color: #cfe9ff; font-size: 1.15em; margin-bottom: 3px; letter-spacing: .22em; }
.li-hub.on { opacity: 1; }

.li-station, .li-step { position: absolute; transform: translate(-50%, -50%); }
.li-step { pointer-events: none; }
.li-station {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.li-pin {
  display: block; width: clamp(11px, 1.8vw, 15px); height: clamp(11px, 1.8vw, 15px);
  border: 2px solid rgba(0, 240, 255, .7); border-radius: 50%; background: #03050B;
  transition: background .25s, border-color .25s, box-shadow .25s, transform .25s cubic-bezier(.34,1.4,.44,1);
}
.li-station:hover .li-pin, .li-station:focus-visible .li-pin { transform: scale(1.22); border-color: #9feaff; }
.li-station:focus-visible { outline: 2px solid rgba(0, 240, 255, .8); outline-offset: 4px; border-radius: 8px; }
.li-step .li-pin { width: clamp(8px, 1.2vw, 11px); height: clamp(8px, 1.2vw, 11px); }
.li-label { position: absolute; white-space: nowrap; line-height: 1.3; }
.li-label b { font-size: clamp(13.5px, 2.3vw, 17px); font-weight: 800; color: #cfe9ff; display: block; transition: color .25s; font-variant-numeric: tabular-nums; }
.li-label small { font-size: clamp(10px, 1.5vw, 12.5px); color: #8A99C4; }
.li-step .li-label b { font-size: clamp(11px, 1.8vw, 15px); }
.li-step .li-label small { font-size: clamp(9.5px, 1.4vw, 12px); }
.li-station[data-side=right] .li-label, .li-step[data-side=right] .li-label { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
.li-station[data-side=left] .li-label,  .li-step[data-side=left] .li-label { right: calc(100% + 10px); top: 50%; transform: translateY(-50%); text-align: right; }
.li-station[data-side=top] .li-label,   .li-step[data-side=top] .li-label { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); text-align: center; }
.li-station[data-side=bottom] .li-label, .li-step[data-side=bottom] .li-label { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); text-align: center; }
.li-station, .li-step { opacity: 0; transition: opacity .4s ease; }
.li-station.on, .li-step.on { opacity: 1; }
.li-station.lit .li-pin, .li-step.lit .li-pin {
  background: #FF5F1A; border-color: #FFD9C2; transform: scale(1.25);
  box-shadow: 0 0 14px rgba(255, 95, 26, .8);
}
.li-station.lit .li-label b, .li-step.lit .li-label b { color: #fff; }

.li-traveler {
  position: absolute; width: 15px; height: 15px; border-radius: 50%;
  background: #FF5F1A; border: 2px solid #FFE1CF; transform: translate(-50%, -50%);
  box-shadow: 0 0 16px rgba(255, 95, 26, .9);
  opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 3;
}
.li-traveler.on { opacity: 1; }
.li-traveler.pulse::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid rgba(255, 95, 26, .8); animation: liPulse 1s ease-out infinite;
}
@keyframes liPulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }

/* 站点弹层：该站三段的段位名 */
.li-pop {
  position: absolute; z-index: 6; width: 188px;
  background: rgba(7, 14, 30, .97); border: 1px solid rgba(0, 240, 255, .35);
  border-radius: 14px; padding: 13px 15px 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 240, 255, .12);
  animation: liPopIn .22s cubic-bezier(.22, 1, .36, 1);
}
.li-pop::before {
  content: ""; position: absolute; left: -6px; top: 18px;
  width: 10px; height: 10px; transform: rotate(45deg);
  background: rgba(7, 14, 30, .97);
  border-left: 1px solid rgba(0, 240, 255, .35); border-bottom: 1px solid rgba(0, 240, 255, .35);
}
@keyframes liPopIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.li-pop h4 { font-size: 12.5px; letter-spacing: .14em; color: #8A99C4; margin: 0 22px 7px 0; font-weight: 600; }
.li-pop ul { list-style: none; margin: 0; padding: 0; }
.li-pop li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.li-pop li:first-child { border-top: 0; }
.li-pop .rank { color: #FF9A5F; font-weight: 800; font-size: 13px; flex: none; width: 2.4em; }
.li-pop li b { color: #e6f4ff; font-weight: 600; font-size: 14.5px; }
.li-pop-close {
  position: absolute; top: 8px; right: 8px; background: none; border: 0;
  color: #8A99C4; font-size: 12px; cursor: pointer; padding: 4px; line-height: 1;
}
.li-pop-close:hover { color: #fff; }

/* 旁白字幕 */
.li-caption {
  min-height: 3.2em; text-align: center;
  font-size: clamp(15.5px, 2.7vw, 20px); color: #cfe0ff; letter-spacing: .04em;
  transition: opacity .3s ease;
}
.li-caption b { color: #FF9A5F; font-weight: 800; }
.li-caption.swap { opacity: 0; }

/* 终幕卡 */
.li-endcard {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  background: rgba(3, 5, 11, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s;
  padding: 20px;
}
.li-endcard.on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.li-endcard h3 { font-size: clamp(22px, 4vw, 36px); font-weight: 900; letter-spacing: .04em; }
.li-endcard h3 span { color: #FF5F1A; }
.li-endcard p { font-size: clamp(14px, 2.3vw, 18px); color: #8A99C4; margin-bottom: 16px; }
.li-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.li-btn {
  min-height: 46px; padding: 11px 28px; border-radius: 40px; font-weight: 800; font-size: 16px;
  font-family: inherit; cursor: pointer; transition: transform .15s cubic-bezier(.22,1,.36,1), box-shadow .2s, border-color .2s;
}
.li-btn.primary {
  background: linear-gradient(95deg, #00F0FF, #0077FF); color: #04121f; border: none;
  box-shadow: 0 0 18px rgba(0, 240, 255, .35);
}
.li-btn.primary:hover { box-shadow: 0 0 26px rgba(0, 240, 255, .55); transform: translateY(-1px); }
.li-btn.ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.25); color: #cfe0ff; }
.li-btn.ghost:hover { border-color: #00F0FF; color: #fff; }
.li-btn:active { transform: scale(.97); }

.li-skip {
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: 18px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2); color: #8A99C4;
  min-height: 38px; padding: 6px 18px; border-radius: 40px; font-size: 14px; font-family: inherit; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.li-skip:hover { color: #fff; border-color: rgba(0, 240, 255, .6); }

/* 减弱动态：静态呈现整环，直接给结论 */
.loop-intro.li-reduced .li-rail-glow, .loop-intro.li-reduced .li-traveler { display: none; }
.loop-intro.li-reduced .li-station, .loop-intro.li-reduced .li-step, .loop-intro.li-reduced .li-hub { opacity: 1; }
.loop-intro.li-reduced .li-station.lit .li-pin { transform: none; }

@media (max-width: 640px) {
  .loop-intro { padding: 18px 10px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .li-caption { min-height: 4.2em; }
  .li-station[data-side=right] .li-label { left: calc(100% + 7px); }
  .li-station[data-side=left] .li-label { right: calc(100% + 7px); }
  /* 小屏降密：十步只留序号，站名副标收窄 */
  .li-step .li-label small { display: none; }
  .li-step[data-side=right] .li-label { left: calc(100% + 5px); }
  .li-step[data-side=left] .li-label { right: calc(100% + 5px); }
  .li-hub { letter-spacing: .1em; }
  .li-pop { width: 168px; padding: 11px 13px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .li-traveler.pulse::after { animation: none; }
}