/**
 * 售電服務頁：一度綠電的旅程（動態插畫）
 *
 * 插畫由 local/tools/energy-flow/build.py 產生（桌機橫式、手機直式兩張），
 * 這裡只管樣式與動態。階段狀態由 energy-flow.js 累加在 .energyflow 上：
 * is-s1 陽光 → is-s2 陣列 → is-s3 變電輸電 → is-s4 住家企業。
 * 走過的階段維持亮著，到最後一步整條鏈路同時運作。
 *
 * 只在售電服務頁載入。
 */

/* 區塊本身是白底；斜切掉的三角形露出上方灰底（on-tint） */
.energyflow.section-wrap--diag-top { --diag-bg: var(--color-surface); }

/* ---------- 版本切換：桌機橫圖、手機直圖 ---------- */
.energyflow__art { max-width: 1200px; margin: 0 auto; }
.ef-art { display: block; width: 100%; height: auto; overflow: visible; }
.ef-art--mobile { display: none; max-width: 420px; margin: 0 auto; }

@media (max-width: 800px) {
  .ef-art--desktop { display: none; }
  .ef-art--mobile { display: block; }
}

/* ---------- 線稿基本樣式（沿用首頁 ecoline 的語言：企業藍細線、金色點綴） ---------- */
.ef-art * { vector-effect: non-scaling-stroke; }
.ef-line  { stroke: var(--color-primary); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ef-line--thin { stroke-width: 1; stroke-opacity: .6; }
.ef-fill  { fill: var(--color-surface); }
.ef-ground { stroke: var(--color-line); stroke-width: 1.5; fill: none; }

/* 水庫環境：常駐淡色，不參與階段明暗 */
.ef-water  { fill: #f3f8fc; }
.ef-hills,
.ef-shore  { stroke: #c9d3e3; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.ef-ripple { stroke: #b9cde6; stroke-width: 1.5; stroke-linecap: round; }
.ef-ripples--a { animation: ef-drift 7s ease-in-out infinite alternate; }
.ef-ripples--b { animation: ef-drift 9s ease-in-out infinite alternate-reverse; }

/* ---------- 階段明暗 ---------- */
.ef-group { opacity: .35; transition: opacity .6s ease; }
.ef-group.ef-panels { opacity: .55; }
.energyflow.is-s1 .ef-sun,
.energyflow.is-s2 .ef-panels,
.energyflow.is-s3 .ef-grid,
.energyflow.is-s4 .ef-homes { opacity: 1; }

/* 1. 陽光 */
.ef-sun__core { fill: var(--color-solar); stroke: none; }
.ef-sun__glow { fill: var(--color-solar); opacity: .14; transform-box: fill-box; transform-origin: center; animation: ef-breathe 3.2s ease-in-out infinite; }
.ef-sun__rays line { stroke: var(--color-solar); stroke-width: 2; stroke-linecap: round; }
.ef-sun__rays { transform-box: view-box; animation: ef-spin 40s linear infinite; }
.ef-beam   { stroke: var(--color-solar); stroke-width: 1.5; stroke-dasharray: 2 8; fill: none; opacity: 0; transition: opacity .6s; }
.ef-photon { fill: var(--color-solar); opacity: 0; transition: opacity .4s; }
.ef-glint  { stroke: var(--color-solar); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.energyflow.is-s1 .ef-beam   { opacity: .7; }
.energyflow.is-s1 .ef-photon { opacity: 1; }
.energyflow.is-s1 .ef-glint  { animation: ef-glint 2.4s ease-in-out infinite; }
.energyflow.is-s1 .ef-glint:nth-of-type(2) { animation-delay: .6s; }
.energyflow.is-s1 .ef-glint:nth-of-type(3) { animation-delay: 1.2s; }

/* 2. 水庫浮力式陣列：受光後整片泛金，一道光澤掃過 */
.ef-array { fill: var(--color-primary-bg); stroke: var(--color-primary); stroke-width: 1; stroke-opacity: .5; transition: fill .8s; }
.energyflow.is-s2 .ef-array { fill: #fbe8bf; }
.ef-shine { opacity: 0; transition: opacity .4s; }
.energyflow.is-s2 .ef-shine { opacity: 1; animation: ef-sweep 2.8s ease-in-out infinite; }
.ef-buoy { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: ef-bob 3s ease-in-out infinite; }
.ef-buoy:nth-of-type(2n) { animation-delay: .8s; }
.ef-buoy:nth-of-type(3n) { animation-delay: 1.6s; }

/* 3. 電纜、升壓變電所、輸電 */
.ef-wire      { stroke: #cfd8e6; stroke-width: 2; fill: none; stroke-linecap: round; }
.ef-wire-flow { stroke: var(--color-accent); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 10 14; opacity: 0; transition: opacity .6s; animation: ef-flow .9s linear infinite; }
.ef-pulse      { fill: var(--color-accent); opacity: 0; transition: opacity .4s; }
.ef-pulse-halo { fill: var(--color-accent); opacity: 0; transition: opacity .4s; }
.energyflow.is-s3 .ef-wire-flow  { opacity: 1; }
.energyflow.is-s3 .ef-pulse      { opacity: 1; }
.energyflow.is-s3 .ef-pulse-halo { opacity: .2; }
/* 變電所內部導線通電時轉為亮藍，看得出電流經過套管與礙子串 */
.ef-conductor { transition: stroke .6s; }
.energyflow.is-s3 .ef-conductor { stroke: var(--color-accent); }

/* 4. 住家與企業：窗戶亮燈 */
.ef-window { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.5; transition: fill .5s; }
.energyflow.is-s4 .ef-window { fill: var(--color-solar); }
.energyflow.is-s4 .ef-window:nth-of-type(2n) { transition-delay: .15s; }
.energyflow.is-s4 .ef-window:nth-of-type(3n) { transition-delay: .3s; }

/* ---------- 步驟卡（文字版等同插畫內容，也是無障礙替代） ---------- */
.energyflow__steps {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}
.ef-step__btn {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: var(--space-3) var(--space-3) 1.1rem;
  border-top: 3px solid var(--color-line);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--color-surface);
  transition: border-color .4s, background-color .4s;
}
.ef-step__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.ef-step__num   { display: block; margin-bottom: .35rem; font-family: var(--font-num); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .08em; color: var(--color-text-muted); transition: color .4s; }
.ef-step__title { display: block; margin-bottom: .35rem; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-text); }
.ef-step__text  { display: block; font-size: var(--fs-sm); line-height: 1.6; color: var(--color-text-muted); }
.ef-step.is-active .ef-step__btn { border-top-color: var(--color-accent); background: var(--color-primary-bg); }
.ef-step.is-active .ef-step__num { color: var(--color-accent); }
.ef-step.is-done .ef-step__btn   { border-top-color: #9fc3e6; }

@media (max-width: 800px) {
  .energyflow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: var(--space-3); }
  .ef-step__btn   { padding: var(--space-2); }
  .ef-step__title { font-size: var(--fs-base); }
}

@keyframes ef-spin    { to { transform: rotate(360deg); } }
@keyframes ef-breathe { 50% { transform: scale(1.12); opacity: .24; } }
@keyframes ef-flow    { to { stroke-dashoffset: -24; } }
@keyframes ef-drift   { from { transform: translateX(-10px); } to { transform: translateX(12px); } }
@keyframes ef-bob     { 50% { transform: translateY(-2px); } }
@keyframes ef-glint   { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
@keyframes ef-sweep   { from { transform: translateX(var(--ef-from)); } to { transform: translateX(var(--ef-to)); } }

/* 減少動態：全部直接亮起、靜止 */
@media (prefers-reduced-motion: reduce) {
  .ef-sun__glow, .ef-sun__rays, .ef-wire-flow, .ef-shine, .ef-glint,
  .ef-ripples--a, .ef-ripples--b, .ef-buoy { animation: none !important; }
  .ef-photon, .ef-pulse, .ef-pulse-halo, .ef-shine { display: none; }
  .ef-wire-flow { opacity: 1; }
}