/* scenes.css — 四段背景場景（漸層）+ 水流 SVG + 場景交叉淡入 */

/* 背景舞台內由 JS 注入多層 scene，疊放、用 opacity 交叉淡入 */
.bg-stage .scene {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 700ms var(--ease-soft);
  background-size: cover; background-position: center;
}
.bg-stage .scene.is-active { opacity: 1; }

/* 缺照片時的漸層撐場（spec：資產可抽換）。有照片時 JS 會設 --scene-img 覆蓋。 */
.scene[data-scene="intro"]      { background: radial-gradient(120% 80% at 50% 20%, #0d2236, var(--c-deep)); }
.scene[data-scene="ripple"]     { background: radial-gradient(100% 70% at 50% 40%, #123047, var(--c-deep)); }
.scene[data-scene="upstream"]   { background: linear-gradient(180deg, #1c3b2e, #123047 70%); }   /* 森林綠→水藍 */
.scene[data-scene="midstream"]  { background: linear-gradient(180deg, #15425f, #0e2a40); }       /* 圳道水藍 */
.scene[data-scene="downstream"] { background: linear-gradient(180deg, #0e2f4a, var(--c-deep)); } /* 開闊深水 */
.scene[data-scene="ocean"]      { background: linear-gradient(180deg, #163a55, #d8e6ef 130%); }  /* 海岸→霧白 */
/* 若有照片：JS 設 style="--scene-img:url(...)"（絕對 URL）。模糊填滿：::before 模糊 cover 當底、::after 完整 contain 置中 */
.scene[style*="--scene-img"]::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--scene-img);
  background-size: cover; background-position: center;
  filter: blur(24px) brightness(0.55); transform: scale(1.12);
}
.scene[style*="--scene-img"]::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--scene-img);
  background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* 貫穿全站的水流 SVG（固定於背景層） */
.water-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.water-flow path {
  fill: none; stroke: rgba(126, 200, 255, 0.55);
  stroke-width: var(--flow-width, 2);
  stroke-dasharray: 8 14;
  animation: flow-dash var(--flow-speed, 3s) linear infinite;
}
@keyframes flow-dash { to { stroke-dashoffset: -22; } }

@media (prefers-reduced-motion: reduce) {
  .bg-stage .scene { transition: none; }
  .water-flow path { animation: none; }
}

/* 文字進場：預設下沉淡出，進場時上浮淡入 */
.panel__inner > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft); }
.panel.is-inview .panel__inner > * { opacity: 1; transform: none; }
.panel.is-inview .panel__inner > *:nth-child(2) { transition-delay: 80ms; }
.panel.is-inview .panel__inner > *:nth-child(3) { transition-delay: 160ms; }
.panel.is-inview .panel__inner > *:nth-child(4) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .panel__inner > * { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 768px) {
  .water-flow { display: none; } /* 手機：關水流動畫，背景改純漸層/靜態場景，確保不卡 */
}