/* ═══════════════════════════════════════════════════════════════════════════
   index2 的 SOLUTIONS 段（#energy-applications）── 父頁這一側
   畫面是 iframe（line.html?embed=earth2 → js/line-solutions.js、css/line-solutions.css），
   這裡只有：捲動跑道＋釘住的舞台、透明點擊層、跟地球段交棒時的樣子。驅動在 js/index2-solutions.js。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 跑道：高度＝(ENTER + SPAN + HOLD 0.6 + 1) × 100vh（js/index2-solutions.js 的常數，兩邊要一起改；HOLD＝第 5 步停一下再接 EPC）──
   margin-top −100vh：疊進地球段的最後 100vh（交棒區）—— 交棒走完的那一刻，跑道頂正好到視窗頂，
   釘住的舞台無縫接手交棒期間 fixed 的舞台。z-0：自成堆疊脈絡，裡面的 z 值不外洩。 */
.line-track {
    position: relative;
    z-index: 0;
    height: 680vh;
    margin-top: -100vh;
    background: #e8f5f8;
}
.line-stage {
    position: sticky;
    top: 0;
    /* 寬 100%（不是 100vw）：有傳統捲軸時 100vw 會比頁面寬 17px，iframe 的中線就跟地球段的中軸差 8px */
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.line-section, #line-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
#line-frame { display: block; border: 0; pointer-events: none; }

/* ── 透明點擊層：iframe 只負責畫面、不收輸入；頁籤與圓形前後鈕的點擊／滑過由這層接手，
   位置由 iframe 回報（LineSolutions.getHitRects），滑過的外觀也由 iframe 畫（setHover）。 */
.line-hits { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.line-hits button { position: absolute; left: 0; top: 0; padding: 0; border: 0; border-radius: 30px; background: transparent; cursor: pointer; pointer-events: auto; }
.line-hits button.is-round { border-radius: 50%; }
.line-hits button:disabled { cursor: default; }
.line-hits button:focus-visible { outline: 2px solid #76c5af; outline-offset: 3px; }
.line-hits[inert] button { pointer-events: none; }

/* ── 跟地球段交棒（js/global-footprint.js 的 setupHandoff）────────────────
   交棒區（地球段最後 100vh）裡，舞台改成 fixed、疊到地球上面（z-2），每幀寫 clip-path 露出來
   （鏡頭 → 圓形擴張／網點／百葉／對開門／中軸，看 config 的 handoff.style）。
   光邊 .hv-edge 與鏡頭光圈 .hv-rings 在地球段裡的 .line-handoff-veil。 */
.line-track.is-handoff { z-index: 2; background: transparent; }
.line-track.is-handoff .line-stage {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}
.line-handoff-veil { position: fixed; inset: 0; z-index: 3; pointer-events: none; visibility: hidden; }
.line-handoff-veil > * { position: absolute; display: block; }
.line-handoff-veil .hv-edge { top: 0; bottom: 0; left: 0; width: 1px; margin-left: -.5px; opacity: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 18%, rgba(214,246,236,1) 50%, rgba(255,255,255,.95) 82%, rgba(255,255,255,0) 100%);
    box-shadow: 0 0 14px 2px rgba(190, 240, 222, .55), 0 0 42px 6px rgba(160, 225, 205, .22); }
/* 鏡頭光圈：三道同心描邊疊出柔光（不用 blur 濾鏡，每幀改半徑也便宜） */
.line-handoff-veil .hv-rings { inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.hv-rings circle { fill: none; }
.hv-rings .hv-r1 { stroke: rgba(160, 225, 205, .1); stroke-width: 26; }
.hv-rings .hv-r2 { stroke: rgba(190, 240, 222, .24); stroke-width: 8; }
.hv-rings .hv-r3 { stroke: rgba(255, 255, 255, .9); stroke-width: 1.2; }
/* 鏡頭邊緣的細節（2026-09-27）：內緣暗邊給景深、薄荷充能弧（外面一層柔光）、精密刻度環（細刻每 2°、長刻每 30°）、四個方位記號 */
.hv-rings .hv-shade { stroke: rgba(6, 18, 22, .12); stroke-width: 28; }
.hv-rings .hv-arc-glow { stroke: rgba(118, 197, 175, .28); stroke-width: 9; stroke-dasharray: 1 1; stroke-linecap: round; }
.hv-rings .hv-arc { stroke: #76c5af; stroke-width: 2.2; stroke-dasharray: 1 1; stroke-linecap: round; }
.hv-rings .hv-ticks { stroke: rgba(255, 255, 255, .5); stroke-width: 6; stroke-dasharray: .22 1.78; }
.hv-rings .hv-ticks.is-major { stroke: rgba(255, 255, 255, .88); stroke-width: 12; stroke-dasharray: .45 29.55; }
.hv-rings .hv-marks { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) {
    .line-handoff-veil { display: none; }
}