/* design-to-motion（網站模式）：只動資料視覺，文字維持 HTML */
:root{
  --m-e:cubic-bezier(.16,1,.3,1);   /* 進場位移 */
  --m-e2:cubic-bezier(.33,1,.68,1); /* 透明度、模糊 */
  --m-io:cubic-bezier(.65,0,.35,1); /* 擦入、填滿 */
}

/* 預覽提示條 */
.preview-strip .m-note{color:var(--ring)}

/* ---------- A. 時期條：由左往右擦入，之後依序被光掃過 ---------- */
.era-bar.m-ready .era-seg{clip-path:inset(0 100% 0 0)}
.era-bar.m-ready .era-seg>*{opacity:0;transform:translateY(8px);filter:blur(4px)}
.era-bar.m-in .era-seg{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--m-io) calc(var(--i)*.14s)}
.era-bar.m-in .era-seg>*{opacity:1;transform:none;filter:none;transition:opacity .75s var(--m-e2) calc(.4s + var(--i)*.14s),filter .75s var(--m-e2) calc(.4s + var(--i)*.14s),transform 1.05s var(--m-e) calc(.4s + var(--i)*.14s)}
.era-bar .era-seg{position:relative}
.era-bar .era-seg::after{content:'';position:absolute;top:0;bottom:0;left:0;width:38%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:translateX(var(--sx,-110%));will-change:transform}
.era-bar .era-seg{filter:brightness(var(--lit,1))}

/* ---------- B/C. 長條圖：像進度條一樣長出來 ---------- */
.bar-chart.m-ready .bar{transform:scaleY(0)}
.bar-chart .bar{transform-origin:50% 100%}
.bar-chart.m-in:not(.m-live) .bar{transform:scaleY(1);transition:transform 1.05s var(--m-e) calc(.15s + var(--i)*.06s),filter .15s}
.bar-chart.m-ready .bar-year{opacity:0;transform:translateY(6px)}
.bar-chart.m-in .bar-year{opacity:1;transform:none;transition:opacity .7s var(--m-e2) calc(.1s + var(--i)*.04s),transform .9s var(--m-e) calc(.1s + var(--i)*.04s)}
.bar-chart.m-live .bar{transition:filter .15s}
.shop-chart .bar-val{display:inline-block;transform-origin:50% 100%}
/* 研習營圖：動態中由提示泡泡跟著當前長條 */
.bar-chart .bar-col.m-tip .bar-tip{opacity:1}
.bar-chart .bar-col.m-tip .bar{filter:brightness(1.18)}

/* ---------- D. 大事記：每一筆捲到時進場，正在讀的那一年節點脈動 ---------- */
.hx-timeline li.m-ready::after{transform:scale(.6);opacity:0}
.hx-timeline li.m-ready::before{transform:scaleY(0)}
.hx-timeline li.m-ready .hx-year,.hx-timeline li.m-ready .hx-body{opacity:0;transform:translateY(10px);filter:blur(4px)}
.hx-timeline li::before{transform-origin:50% 0}
.hx-timeline li.m-in::after{transform:none;opacity:1;transition:transform .9s var(--m-e),opacity .6s var(--m-e2)}
.hx-timeline li.m-in::before{transform:none;transition:transform 1.1s var(--m-io) .2s}
.hx-timeline li.m-in .hx-year,.hx-timeline li.m-in .hx-body{opacity:1;transform:none;filter:none;transition:opacity .75s var(--m-e2),filter .75s var(--m-e2),transform 1.05s var(--m-e)}
.hx-timeline li.m-in .hx-body{transition-delay:.08s}
.hx-timeline li.m-now::after{animation:m-pulse 2s var(--m-e2) infinite}
.hx-timeline li.m-now::before{opacity:.7;transition:opacity .6s}
@keyframes m-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--era) 55%,transparent)}
  70%,100%{box-shadow:0 0 0 12px color-mix(in srgb,var(--era) 0%,transparent)}
}

@media(prefers-reduced-motion:reduce){
  .m-ready,.m-ready *{transition:none!important}
}