/* ═══════════════════════════════════════════════════════════════════════════
   index2 結尾（接在 EPC 後面）── 雙圖帶（在 EPC 結尾舞台裡、城市線稿正下方）＋ INTEGRATION COMPLETE ＋ 頁尾
   版面照設計稿（寬 1468：雙圖帶高 244、INTEGRATION 高 533、頁尾高 365），--u ＝ 稿上 1px。
   動態在 js/closing.js：
     ① 文字遮罩：EPC 結尾（標題＋城市＋雙圖帶）釘住 → 「POWER ON! ⚡ SYSTEM LIVE」字裡透出最後一屏（INTEGRATION COMPLETE＋頁尾）
        → 以閃電為中心放大到全畫面（.cl 往上疊進 EPC 結尾那段；.cl-pin 在遮罩期間 sticky 在畫面頂；clip-path 由 js 每幀寫）
     ② 圖片捲動綁定縮放：[data-parallax] 外框 overflow:hidden，裡面 .cl-mi 只動 transform（scale ＋ translateY）
     ③ 頁尾 3D LOGO：首頁那顆閃電 LOGO 的零件飛回來，組合在 .ft-logo 的位置（.ft-gl 固定畫布）
   ═══════════════════════════════════════════════════════════════════════════ */
.cl, .cl-duo {
    --u: calc(100vw / 1468);
    --pad: calc(var(--u) * 135);
    --cl-mint: #76c5af;
    /* 圓環（使用者參考圖）：中空、漸層、有透明度。--cl-ring 舊的實心色已停用。
       rgb 分開寫，才能在漸層裡各段給不同 alpha。 */
    --cl-ring-rgb: 118, 197, 175;
    --cl-ring-hole: 60%;     /* 中間的洞佔直徑幾成（參考圖量到約 .62） */
    --cl-ring-deg: 215deg;   /* 漸層方向：0% 在右上、末端收到左下 */
    --cl-ring-a1: .58;       /* 濃的那端 */
    --cl-ring-a2: .26;       /* 中段 */
    --cl-ring-size: 86%;     /* 直徑＝區塊高度的幾成（滿版之後用高度算才穩，用寬度會隨裁切亂跑） */
    --cl-ring-x: 50%;        /* 圓心水平位置 */
    --cl-ring-y: 2%;         /* 圓環上緣 */
    --cl-ease: cubic-bezier(.19, 1, .22, 1);
    --cl-en: 'Jost', 'Noto Sans TC', sans-serif;
    --cl-tc: 'Noto Sans TC', 'Jost', sans-serif;
}
.cl { position: relative; z-index: 6; }                 /* 蓋過 EPC 的 3D 畫布（z 4）與釘住的結尾舞台 */
:where(.cl, .cl-duo) :where(figure, figcaption, h2, h3, p) { margin: 0; }
.cl-pinbox { position: relative; }
/* 最後一屏：INTEGRATION COMPLETE ＋ 頁尾，至少一個畫面高（頁尾撐滿、版權列貼底）→ 遮罩打開時正好是頁面最後 */
.cl-pin { position: sticky; top: 0; display: flex; flex-direction: column; min-height: 100vh; }

/* ── 圖片外框：overflow 裁切；.cl-mi 是會縮放／位移的那層（只動 transform） ── */
.cl-media { position: relative; overflow: hidden; background: #1d2221; }
.cl-mi { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 50%; }
.cl-duo .cl-mi > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── 雙圖帶 ── */
.cl-duo { display: grid; grid-template-columns: 1fr 1fr; height: calc(var(--u) * 244); }
.cl-duo-a img { object-position: 50% 30%; }
.cl-duo-b img { object-position: 50% 59%; }            /* 標籤（BESS／PCS／TRANSFORMER）落在框的上緣，同稿 */
.cl-duo-copy { position: absolute; left: 0; right: 0; top: 41%; z-index: 1; text-align: center; color: #fff;
    font: 400 max(11px, calc(var(--u) * 12.5))/1.75 var(--cl-tc); letter-spacing: .2em; text-shadow: 0 1px 10px rgba(0, 0, 0, .75); }

/* ── INTEGRATION COMPLETE：底圖（人物在圖上）→ 薄荷圓 → 人物去背疊回原位（圓就落在人後面）→ 標題 ── */
/* 全滿版（使用者要求 2026-09-26「試試看」）。原值是設計稿換算的 calc(var(--u) * 533)。
   .cl-hero-art 是 height:100% ＋ aspect-ratio，拉高之後會等比放大、左右溢出，
   由這裡的 overflow:hidden 裁掉 —— 效果等同 cover。
   ⚠ 圓環與人物都在 .cl-mi 裡面（百分比相對「圖」而不是相對區塊），所以放大後對位不會跑掉。
   ⚠ 區塊變高之後 .cl-pin 會高過一個視窗，頁尾在釘住期間落到折線下；
     js/closing.js 的 pinH 是每次重量的（pinbox 高 = maskLen + pinH），版面會自己跟上。
   想回設計稿高度：--cl-hero-h 改成 calc(var(--u) * 533)。 */
.cl-hero { position: relative; height: var(--cl-hero-h, 100svh); overflow: hidden; background: #cfd9dc; }
.cl-hero-art { position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 1959 / 710; translate: -50% 0; }
.cl-hero-bg { display: block; width: 100%; height: 100%; }
/* 圓：稿上直徑 ≈ 寬 34%、圓心在 (50%, 52%) → 底邊略超出畫面 */
/* 圓環：原本是一塊 .9 不透明的實心圓，整片壓在人身上（使用者指出）。
   改成中空環 —— 背景走線性漸層（右上濃、左下收到全透明），再用 radial-gradient 遮罩打洞。
   ⚠ 只用 background ＋ mask，不動版面；環與人、背景同在 .cl-mi 裡，
     捲動縮放時三者一起走，對位不會跑掉。
   要調就改上面那組 --cl-ring-* ：hole 洞多大、deg 漸層方向、a1/a2 濃淡。 */
.cl-hero-ring {
    /* ⚠ 尺寸改用「高度」而不是寬度：區塊變成滿版之後，.cl-hero-art 會等比放大、
       左右大幅溢出被裁掉，這時用 width:% 算出來的圓會比看到的畫面大得多。
       用 height:% 才跟實際看到的高度對得上。 */
    position: absolute; left: var(--cl-ring-x); top: var(--cl-ring-y);
    height: var(--cl-ring-size); width: auto; aspect-ratio: 1;
    border-radius: 50%; translate: -50% 0;
    background: linear-gradient(var(--cl-ring-deg),
        rgba(var(--cl-ring-rgb), var(--cl-ring-a1)) 0%,
        rgba(var(--cl-ring-rgb), var(--cl-ring-a2)) 46%,
        rgba(var(--cl-ring-rgb), 0) 84%);
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--cl-ring-hole), #000 calc(var(--cl-ring-hole) + .6%));
    mask: radial-gradient(circle at 50% 50%, transparent var(--cl-ring-hole), #000 calc(var(--cl-ring-hole) + .6%));
}
/* 去背人像對位（影像比對：寬 31.24%、左 33.538%、頂 10.423%，平均色差 2/255） */
.cl-hero-person { position: absolute; left: 33.538%; top: 10.423%; width: 31.24%; height: auto; max-width: none; }
.cl-hero-copy { position: absolute; left: 0; right: 0; top: 38.4%; z-index: 1; text-align: center; color: var(--cl-mint); pointer-events: none; }
.cl-hero-title { font: 500 max(26px, calc(var(--u) * 52))/1.1 var(--cl-en); letter-spacing: .012em; }
.cl-hero-sub { margin-top: calc(var(--u) * 20); font: 500 max(13px, calc(var(--u) * 17))/1.4 var(--cl-tc); letter-spacing: .36em; }

/* ── 頁尾 ── */
.ft { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; background: #353535; color: #e9e9e9; padding: 0 var(--pad); font-family: var(--cl-en); }
.ft a { color: inherit; text-decoration: none; }
.ft-top { display: flex; flex-direction: column; align-items: center; width: max-content; margin: 0 auto; padding-bottom: calc(var(--u) * 6);
    font: 500 max(10px, calc(var(--u) * 11))/1 var(--cl-en); letter-spacing: .04em; color: #fff; }
/* 從上一屏接下來的細直線 ＋ 底座（「回到頂端」的圖示） */
.ft-top i { position: relative; display: block; width: calc(var(--u) * 18); height: calc(var(--u) * 50); margin-bottom: calc(var(--u) * 12); }
.ft-top i::before { content: ''; position: absolute; left: 50%; top: 0; bottom: calc(var(--u) * 8); width: 1px; margin-left: -.5px; background: rgba(255, 255, 255, .6);
    transform-origin: 50% 100%; transition: transform .6s var(--cl-ease); }
.ft-top i::after { content: ''; position: absolute; left: 50%; bottom: 0; width: calc(var(--u) * 16); height: calc(var(--u) * 5); translate: -50% 0;
    border-top: 1px solid #fff; border-bottom: 1px solid #fff; transition: transform .6s var(--cl-ease); }
.ft-top span { display: block; transition: letter-spacing .6s var(--cl-ease), color .3s; }
.ft-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; margin-top: calc(var(--u) * 22); padding-bottom: calc(var(--u) * 92); }
.ft-h { position: relative; padding-bottom: calc(var(--u) * 12); margin-bottom: calc(var(--u) * 30); font: 500 max(16px, calc(var(--u) * 20))/1.1 var(--cl-en); letter-spacing: .01em; color: #fff; }
.ft-h::after { content: ''; position: absolute; left: 0; bottom: 0; width: calc(var(--u) * 300); max-width: 100%; height: 1px; background: rgba(118, 197, 175, .75); }
.ft-col p { font: 400 max(11px, calc(var(--u) * 12.5))/1.8 var(--cl-tc); letter-spacing: .04em; color: #e3e3e3; }
.ft-address span { font-family: var(--cl-en); letter-spacing: .02em; }
.ft-contact { text-align: right; }
.ft-contact .ft-h::after { left: auto; right: 0; }
.ft-mail a { display: inline-block; font-family: var(--cl-en); }
.ft-mail a + a { margin-left: 1.1em; }
.ft-social { margin-top: calc(var(--u) * 4); }
.ft-social a { position: relative; display: inline-block; padding: 0 calc(var(--u) * 16); font: 500 max(10px, calc(var(--u) * 11.5))/1.8 var(--cl-en); letter-spacing: .03em; color: #fff; }
.ft-social a:last-child { padding-right: 0; }
.ft-social a + a::before { content: ''; position: absolute; left: 0; top: 30%; height: 40%; width: 1px; background: rgba(255, 255, 255, .35); }
.ft-center { display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--u) * 8); }
.ft-logo { position: relative; display: block; width: calc(var(--u) * 60); aspect-ratio: 291 / 266; }
.ft-logo svg { display: block; width: 100%; height: 100%; transition: opacity .35s; }
/* 顏色照 logo.svg（.st0 #615f5f、.st1 #38cdb9）；使用者 2026-09-27：頁尾用正常 LOGO */
.ft-logo-r { fill: #615f5f; }
.ft-logo-m { fill: #38cdb9; }
.ft.is-3d .ft-logo svg { opacity: 0; }                  /* 3D LOGO 上場後平面 LOGO 讓位（載不到 3D 時留著當備援） */
.ft-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 1.55em; margin-top: calc(var(--u) * 42); }
.ft-nav a { position: relative; font: 400 max(11px, calc(var(--u) * 12))/1.6 var(--cl-tc); letter-spacing: .1em; color: #dcdcdc; transition: color .3s; }
.ft-copy { margin: auto calc(var(--pad) * -1) 0; padding: calc(var(--u) * 16) var(--pad) calc(var(--u) * 20); border-top: 1px solid rgba(255, 255, 255, .1);
    text-align: center; font: 400 max(10px, calc(var(--u) * 11))/1.6 var(--cl-en); letter-spacing: .03em; color: #d2d2d2; }
.ft-copy span { color: #7d7d7d; }

/* ── 微互動（滑鼠）：底線由左長出、BACK TO TOP 直線往上收、字距微開；只動 transform／color ── */
@media (hover: hover) and (pointer: fine) {
    .ft-nav a::after, .ft-mail a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--cl-mint);
        transform: scaleX(0); transform-origin: 100% 50%; transition: transform .55s var(--cl-ease); }
    .ft-mail a { position: relative; }
    .ft-nav a:hover, .ft-mail a:hover, .ft-social a:hover { color: var(--cl-mint); }
    .ft-nav a:hover::after, .ft-mail a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
    .ft-social a { transition: color .3s, transform .45s var(--cl-ease); }
    .ft-social a:hover { transform: translateY(-2px); }
    .ft-top:hover i::before { transform: scaleY(.55); }
    .ft-top:hover i::after { transform: translateY(calc(var(--u) * -22)); }
    .ft-top:hover span { letter-spacing: .12em; color: var(--cl-mint); }
}
.ft a:focus-visible { outline: 2px solid var(--cl-mint); outline-offset: 4px; }

/* ── 3D LOGO 固定畫布（零件飛回來的整段都在這層；只在頁尾附近顯示） ── */
.ft-gl { position: fixed; left: 0; top: 0; z-index: 7; width: 100%; height: 100%; display: block; pointer-events: none; visibility: hidden; }
.ft-gl.is-on { visibility: visible; }

/* ── 平板 ── */
@media (max-width: 1100px) {
    .cl, .cl-duo { --u: calc(100vw / 1180); --pad: calc(var(--u) * 70); }
}
/* ── 手機：雙圖上下疊、INTEGRATION 加高（整張圖以人物為中心裁切）、頁尾置中疊放 ── */
@media (max-width: 760px) {
    .cl, .cl-duo { --u: calc(100vw / 390); --pad: 22px; }
    .cl-duo { grid-template-columns: 1fr; height: auto; }
    .cl-duo .cl-media { height: 46vw; }
    .cl-duo-copy { font-size: 11px; letter-spacing: .14em; }
    .cl-hero { height: 112vw; }
    .cl-hero-copy { top: 36%; }
    .cl-hero-title { font-size: 7.6vw; }
    .cl-hero-sub { margin-top: 10px; font-size: 3.5vw; letter-spacing: .3em; }
    .ft { padding: 0 22px; }
    .ft-top { font-size: 10px; }
    .ft-top i { width: 16px; height: 40px; margin-bottom: 10px; }
    .ft-top i::after { width: 14px; height: 4px; }
    .ft-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 26px; padding-bottom: 40px; text-align: center; }
    .ft-center { order: -1; }
    .ft-logo { width: 54px; }
    .ft-nav { margin-top: 22px; max-width: 290px; }
    .ft-h { margin-bottom: 14px; padding-bottom: 10px; }
    .ft-h::after, .ft-contact .ft-h::after { left: 50%; right: auto; width: 180px; translate: -50% 0; }
    .ft-contact { text-align: center; }
    .ft-mail a { display: block; }
    .ft-mail a + a { margin-left: 0; }
    .ft-social a:first-child { padding-left: 0; }
    .ft-copy { margin: auto -22px 0; padding: 14px 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .ft-top i::before, .ft-top i::after, .ft-top span, .ft-nav a::after, .ft-mail a::after, .ft-social a { transition: none; }
}