/* line.html：第八版（2026-09-12，見 js/energy-business-hscroll.js；檔名沿用）。
   釘住的視窗左右各半：左邊照片＋文案卡住不動、縫上同心圓轉盤、右邊淺藍面板橫向滑。
   比例照設計稿 1856×1080 量：左欄文字起點 8.3vw、STEP 數字 11.5svh、髮絲線與圓心在 53% 高，
   圓：中心柔光 24svh、核心 9svh、細線 18.6／28.8／48svh、半透明圓盤 40svh、名稱半徑約 16–21svh。
   窄幅（≤760）與減少動態：body 沒有 .business-hscroll，這份完全不生效。 */
body.business-hscroll { overflow-x: hidden; }
.business-hscroll .hscroll-viewport { --seam: 50%; --axis: 53%; --ink: #fff; --blue: #dbe8f4; position: relative; width: 100%; height: 100svh; overflow: hidden; background: var(--blue); }
/* 原本的分割版面（JS 設了 hidden）：energy-business-split.css 給它 display:grid，這裡要壓回去 */
.business-hscroll .business-layout[hidden] { display: none; }

/* ── 左：照片釘住 ── */
.business-hscroll .lp { position: absolute; inset: 0 auto 0 0; width: var(--seam); overflow: hidden; background: #1c2a30; color: var(--ink); }
.business-hscroll .lp-photos { position: absolute; inset: -4% 0; will-change: transform; }
.business-hscroll .lp-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; transform: scale(1.06); transform-origin: 50% 50%; }   /* 不加 will-change／濾鏡：五張大圖各自開合成層會吃光 GPU，反而卡 */
.business-hscroll .lp-photos img.is-active { opacity: 1; }
.business-hscroll .lp-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0b171f3d 0%, #0b171f24 45%, #0b171f80 100%), linear-gradient(90deg, #0b171f4d 0%, #0b171f00 60%); }
.business-hscroll .lp-rule { position: absolute; left: 0; right: 0; top: var(--axis); height: 1px; background: #ffffffc4; pointer-events: none; }
.business-hscroll .lp-copy { position: absolute; left: 8.3vw; right: 10%; top: 36%; pointer-events: none; }
.business-hscroll .lp-step { display: flex; align-items: flex-start; gap: .5em; margin: 0 0 11svh; line-height: 1; }
.business-hscroll .lp-step-word { font-size: 2.2svh; font-weight: 700; letter-spacing: .02em; margin-top: 1.6svh; }
.business-hscroll .lp-step-num { display: block; overflow: hidden; padding: .04em 0 .08em; }
.business-hscroll .lp-step-num b { display: block; font-size: 11.5svh; font-weight: 700; letter-spacing: -.03em; line-height: .86; }
.business-hscroll .lp-title { margin: 0; font-size: var(--lp-title, 4.3svh); line-height: 1.12; font-weight: 700; letter-spacing: -.015em; text-transform: uppercase; white-space: nowrap; }   /* 一行一行固定，塞不下由 JS 縮字級（fitTitle） */
.business-hscroll .lp-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.business-hscroll .lp-line > span { display: block; }
.business-hscroll .lp-lede { display: block; overflow: hidden; margin: 2.6svh 0 0; max-width: 34ch; }
.business-hscroll .lp-lede > span { display: block; font-family: var(--tc); font-size: 1.7svh; line-height: 1.55; color: #ffffffe6; }

/* ── 縫上的轉盤 ── */
.business-hscroll .dial { position: absolute; left: var(--seam); top: var(--axis); width: 0; height: 0; z-index: 3; pointer-events: none; }
.business-hscroll .dial > i { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
/* 圈線本體都放在內層 .dial-spin：外層只負責置中與 GSAP（開場縮放、刻度環轉一步），
   內層純粹由 CSS 慢慢自轉。分兩層才不會互相蓋掉（CSS animation 會壓過 inline transform）。 */
.business-hscroll .dial-spin { position: absolute; inset: 0; border-radius: 50%; }
.business-hscroll .dial-fill { width: 40svh; height: 40svh; background: radial-gradient(circle, #ffffff3d 0%, #ffffff30 55%, #ffffff00 72%); }
/* 每圈圓周上放一顆小標記點，自轉時才看得出來在轉 */
.business-hscroll .dial-ring > .dial-spin { border: 1px solid #ffffff; }
.business-hscroll .dial-ring > .dial-spin::after { content: ''; position: absolute; left: 50%; top: -3.5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; }
.business-hscroll .dial-ring.is-outer { width: 48svh; height: 48svh; }
.business-hscroll .dial-ring.is-outer > .dial-spin { border-color: #ffffff4d; animation: dial-spin 160s linear infinite; }
.business-hscroll .dial-ring.is-outer > .dial-spin::after { background: #ffffff8c; }
.business-hscroll .dial-ring.is-outer > .dial-spin::before { content: ''; position: absolute; left: 50%; bottom: -1px; width: 1px; height: 2.4svh; margin-left: -.5px; background: linear-gradient(#ffffff00, #ffffff73); }
.business-hscroll .dial-ring.is-mid { width: 28.8svh; height: 28.8svh; }
.business-hscroll .dial-ring.is-mid > .dial-spin { border-color: #ffffff73; animation: dial-spin-rev 110s linear infinite; }
.business-hscroll .dial-ring.is-mid > .dial-spin::after { background: #ffffffb3; }
.business-hscroll .dial-ring.is-inner { width: 18.6svh; height: 18.6svh; }
.business-hscroll .dial-ring.is-inner > .dial-spin { border-color: #ffffff8c; animation: dial-spin 68s linear infinite; }
.business-hscroll .dial-ring.is-inner > .dial-spin::after { background: #3fcf95; }
/* 虛線刻度環：外層由 GSAP 轉「一步」，內層一直慢慢自轉 */
.business-hscroll .dial-ticks { width: 36svh; height: 36svh; }
.business-hscroll .dial-ticks > .dial-spin { border: 1px dashed #ffffff40; animation: dial-spin 90s linear infinite; }
.business-hscroll .dial-glow { width: 24svh; height: 24svh; }
.business-hscroll .dial-glow > .dial-spin { background: radial-gradient(circle, #ffffffe6 0%, #ffffff80 32%, #ffffff00 70%); filter: blur(6px); animation: dial-breathe 5s ease-in-out infinite; }
.business-hscroll .dial-core { width: 9svh; height: 9svh; background: #ffffffe8; box-shadow: 0 0 0 1px #ffffff99, 0 14px 44px #0b171f2b; }
.business-hscroll .dial-bolt { position: absolute; left: 50%; top: 50%; width: 2.6svh; height: 4.6svh; transform: translate(-50%, -50%); background: #3fcf95; clip-path: polygon(58% 0, 14% 56%, 46% 56%, 40% 100%, 86% 42%, 54% 42%); }
.business-hscroll .dial-ping { width: 28.8svh; height: 28.8svh; border: 1px solid #ffffffb3; opacity: 0; }
@keyframes dial-spin { to { transform: rotate(360deg); } }
@keyframes dial-spin-rev { to { transform: rotate(-360deg); } }
@keyframes dial-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
/* 環繞文字（SVG textPath）：應用名稱＋步數繞著 r=185 的圓（虛線刻度環正上方）重複排滿一圈，
   整圈慢慢順時針轉；只露出左上那四分之一（縫的左邊、髮絲線上方），靠近縫與髮絲線時漸隱，
   所以永遠不會壓到左欄標題或右欄文案。換步時整圈往前甩一下並換字。 */
.business-hscroll .dial-orbit-mask { position: absolute; left: 0; top: 0; width: 60svh; height: 60svh; transform: translate(-50%, -50%); pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, #000 42%, transparent 50.6%), linear-gradient(to bottom, #000 43%, transparent 50.6%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, #000 42%, transparent 50.6%), linear-gradient(to bottom, #000 43%, transparent 50.6%);
    mask-composite: intersect; }
.business-hscroll .dial-orbit-kick { position: absolute; inset: 0; }
.business-hscroll .dial-orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: dial-spin 64s linear infinite; }
.business-hscroll .orbit-text { fill: #fff; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.business-hscroll .orbit-text .is-name { fill-opacity: .92; }
.business-hscroll .orbit-text .is-step { fill-opacity: .55; font-weight: 500; }
.business-hscroll .orbit-text .is-sep { fill-opacity: .4; }

/* ── 右：淺藍面板（不動，內容原地換） ── */
.business-hscroll .rp { position: absolute; inset: 0 0 0 var(--seam); overflow: hidden; background: var(--blue); color: #101c24; }
/* 五片疊在同一位置（2026-09-12 業主：文案都原地 reveal、不要飄進來）：只有 .is-active 那片看得見，換步時 JS 原地切 */
.business-hscroll .rp-track { position: relative; height: 100%; width: 100%; }
.business-hscroll .rp-slide { position: absolute; inset: 0; width: 100%; height: 100%; padding: 13svh 3vw 8svh 7.4vw; display: flex; flex-direction: column; visibility: hidden; }
.business-hscroll .rp-slide.is-active { visibility: visible; }
/* 右欄進退場：每段文字包一層 overflow:hidden 的遮罩，裡面那層上下滑就是 reveal */
.business-hscroll .rp-mask { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.business-hscroll .rp-mask > span { display: block; }
.business-hscroll .rp-title { margin: 0; font-size: 4.8svh; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; max-width: 16ch; text-wrap: balance; }
.business-hscroll .rp-lede { margin: 2.4svh 0 0; max-width: 40ch; font-family: var(--tc); font-size: 1.85svh; line-height: 1.55; color: #33454f; }
.business-hscroll .equipment-slot { position: relative; flex: 1 1 auto; min-height: 30svh; margin: 1svh -3vw 0 -4vw; }
/* 模型不跟面板滑：固定在右欄的舞台上（位置＝各片 equipment-slot 的交集，JS 量），換步時原地退場、原地一件一件進場 */
.business-hscroll .rp-stage { position: absolute; z-index: 2; pointer-events: none; }
.business-hscroll .rp-stage .equipment-scene[data-viewport="panel"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.business-hscroll .rp-stage .equipment-scene { will-change: transform, opacity; }
.business-hscroll .rp-foot { display: flex; align-items: flex-start; gap: 1.2vw; margin-top: 1svh; }
.business-hscroll .rp-thumb { display: block; flex: 0 0 auto; width: 10.2vw; aspect-ratio: 16 / 9; overflow: hidden; background: #c9dbe9; }
.business-hscroll .rp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.business-hscroll .rp-caption { margin: 0; max-width: 30ch; font-family: var(--tc); font-size: 1.45svh; line-height: 1.7; color: #33454f; }
.business-hscroll .rp-caption b { display: block; margin-bottom: .4svh; font-weight: 600; color: #101c24; }

/* ── 進度／提示 ── */
.business-hscroll .hscroll-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 6; background: #ffffff33; pointer-events: none; }
.business-hscroll .hscroll-progress i { display: block; height: 100%; background: #3fcf95; transform: scaleX(0); transform-origin: left; }
.business-hscroll .hscroll-hint { position: absolute; right: clamp(24px, 3vw, 48px); bottom: 16px; z-index: 6; display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .12em; color: #526773; pointer-events: none; }
.business-hscroll .hscroll-hint b { font-weight: 500; color: #101c24; font-variant-numeric: tabular-nums; }
.business-hscroll .hscroll-hint i { display: block; width: 28px; height: 1px; background: #526773; }
@media (max-width: 1200px) {
    .business-hscroll .rp-slide { padding-left: 6vw; }
    .business-hscroll .rp-title { font-size: 4svh; }
}

@media (prefers-reduced-motion: reduce) {
    .business-hscroll .dial-spin, .business-hscroll .dial-orbit { animation: none !important; }
}