/* ═══════════════════════════════════════════════════════════════
   new2026-motion.css — 剪輯概念動效五式(Phase 0)
   規則:只用 design-system-v4 的 --ease/--dur/--ease-firm 與色彩 token;
        不新增任何色值(透明度一律用 opacity 屬性,不摻 rgba 新色);
        全部包 prefers-reduced-motion 降級=直接顯示。
   五式:.nm-reveal 逐句浮現 / .nm-flip 3D 翻牌 / .nm-progress 進度敘事 /
        .nm-underlay B-roll 式漸層氛圍層(限 hero,禁真影片) /
        .nm-stamp + .nm-count 量測標註蓋章與數字滾動(引 v4 stamp/count 語彙)。
   觸發約定:JS 掛 .is-in(進場)/.is-flipped(翻牌)/.is-active(階段)
        /--p(進度 0-1);無 JS 時除 reveal 外全部靜態可讀。
   本檔屬系統層(非 fragment),唯一 @keyframes=nm-drift(氛圍層漂移)。
   ═══════════════════════════════════════════════════════════════ */

/* ── 一式 .nm-reveal:字幕級逐句浮現 ──
   用法:每句一個 .nm-reveal,--i 是句序;句子自己掛 .is-in,
   或由父容器掛 .is-in 一次觸發整組(字幕感=依 --i 錯拍)。 */
.nm-reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:calc(var(--i,0)*var(--dur)*.22);
}
.nm-reveal.is-in,
.is-in .nm-reveal{opacity:1;transform:none}

/* ── 二式 .nm-flip:卡片 3D 翻牌 ──
   結構:.nm-flip > .nm-flip-inner > (.nm-flip-front + .nm-flip-back)
   觸發:JS 對 .nm-flip 切 .is-flipped(點擊/進場皆可)。 */
.nm-flip{perspective:1100px}
.nm-flip-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform calc(var(--dur)*1.7) var(--ease);
}
.nm-flip.is-flipped .nm-flip-inner{transform:rotateY(180deg)}
.nm-flip-front,.nm-flip-back{
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.nm-flip-back{position:absolute;inset:0;transform:rotateY(180deg)}

/* ── 三式 .nm-progress:進度敘事 ──
   軌+條:JS 把捲動進度寫進容器 --p(0~1),條就跟著走(scaleX,零 layout,
   同 v4 fill 語彙);無 JS 時 --p 預設 1=靜態滿條。
   階段式:.nm-step 依序掛 .is-active 點亮(scroll 驅動或流程驅動皆可)。 */
.nm-progress-track{
  height:3px;background:var(--hair-2);
  border-radius:var(--r-pill);overflow:hidden;
}
.nm-progress-bar{
  height:100%;width:100%;
  background:linear-gradient(90deg,var(--ink),var(--accent));
  transform:scaleX(var(--p,1));transform-origin:left center;
  transition:transform var(--dur) var(--ease);
}
.nm-progress .nm-step{
  opacity:.35;transform:translateY(4px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.nm-progress .nm-step.is-active{opacity:1;transform:none}

/* ── 四式 .nm-underlay:B-roll 式低對比漸層氛圍層 ──
   ⚠️ 限 hero 一處;禁真影片、禁圖片——純 CSS 漸層(token 色)+極慢漂移。
   用法:hero 段掛 .nm-underlay-host,第一個子元素放 <div class="nm-underlay"></div>,
   內容自動抬到氛圍層之上(同 v4 .has-art 結構)。 */
.nm-underlay-host{position:relative}
.nm-underlay-host>*{position:relative;z-index:1}
.nm-underlay-host>.nm-underlay{z-index:0}
.nm-underlay{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  background-image:linear-gradient(180deg,var(--bg-cool),var(--bg-paper));
}
.nm-underlay::before,.nm-underlay::after{
  content:'';position:absolute;width:72%;padding-top:72%;border-radius:50%;
  will-change:transform;
}
.nm-underlay::before{
  left:-14%;top:-24%;opacity:.6;
  background:radial-gradient(closest-side,var(--surface),transparent 72%);
  animation:nm-drift calc(var(--dur)*44) var(--ease) infinite alternate;
}
.nm-underlay::after{
  right:-16%;bottom:-28%;opacity:.5;
  background:radial-gradient(closest-side,var(--surface-warm),transparent 72%);
  animation:nm-drift calc(var(--dur)*56) var(--ease) infinite alternate-reverse;
}
@keyframes nm-drift{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to{transform:translate3d(3%,3%,0) scale(1.08)}
}

/* ── 五式 .nm-stamp / .nm-count:量測標註蓋章+數字滾動 ──
   直接引 v4 既有語彙,不重造:
   stamp=v4 [data-reveal="stamp"] 的 firm 落定(--ease-firm,到位+極微 overshoot);
   count=v4 [data-count] 約定——數字由 JS(rAF)滾動,CSS 只保等寬不抖。 */
.nm-stamp{
  opacity:0;transform:scale(1.06);
  transition:opacity calc(var(--dur)*.72) var(--ease),
             transform calc(var(--dur)*1.3) var(--ease-firm);
}
.nm-stamp.is-in,
.is-in .nm-stamp{opacity:1;transform:scale(1)}
.nm-count{
  font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0;
  display:inline-block;text-align:inherit;
}

/* ── 減速偏好:五式全部降級為直接顯示 ── */
@media (prefers-reduced-motion:reduce){
  .nm-reveal,.is-in .nm-reveal,
  .nm-stamp,.is-in .nm-stamp,
  .nm-progress .nm-step{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .nm-flip-inner{transition:none!important}
  .nm-progress-bar{transition:none!important;transform:scaleX(var(--p,1))}
  .nm-underlay::before,.nm-underlay::after{animation:none!important}
}