呢頁嘅每一段動畫都係照官方 skill 寫：timeline＋labels＋position 參數、ScrollTrigger pin／scrub、 batch 分批進場、containerAnimation 橫向捲動、matchMedia 響應式、SVG 描邊、autoAlpha 同 transform aliases。 下面嘅「自我測試」面板會即場報實際數字。
用 interval 0.1 + batchMax 4，一次過收集同時入畫面嘅卡再一齊 stagger；取代 IntersectionObserver。
to／from／fromTo、ease、stagger、autoAlpha、transform aliases。
timeline 建構、position 參數、label、defaults、playback 控制。
pin、scrub、batch、toggleActions、refresh。
外掛註冊機制（本頁只用核心＋ScrollTrigger）。
clamp／mapRange／snap／toArray（此處手算百分比）。
只動 transform／opacity、will-change、overwrite 免打架。
useGSAP + cleanup（本頁為原生 JS）。
Vue／Svelte 生命週期清理對應做法。
ScrollTrigger 掛喺 timeline（唔係 child tween），scrub:1 令動畫有 1 秒追趕感。
進度條同光環都由同一個 scrubbed timeline 驅動；pin 期間只動子元素。
gsap.timeline({ scrollTrigger:{ trigger, pin:true, scrub:1 } })
.to(...) .to(...)
❌ 錯：gsap.timeline().to(..., { scrollTrigger:{...} })
用核心 CSS 屬性 strokeDasharray／strokeDashoffset 畫線；同一個屬性疊兩個 from() 時，後面嗰個要設 immediateRender:false。
用條件物件一次處理 desktop／mobile／prefers-reduced-motion；唔符合就會自動 revert。
量度中…
偵測到 prefers-reduced-motion 時，duration 會變 0（唔會硬播動畫）。
呢頁自己報實際運行數據 —— 證明 skills 內容真係落地生效。