/* ==========================================================================
   TECXIA · MOTION
   一套動效系統，不是二十套：
     1. 進場：html.js 打開後，.rv / .rv-veil 由 reveal.js（IntersectionObserver）
        加上 .on，位移與遮罩由 CSS transition 完成。沒有 JS 時這些狀態不存在，
        所以內容的可見性不是腳本決定的，腳本只決定「動不動」。
     2. 進場時間：主標的兩行文字不動；引導句、按鈕、品牌行的進場加起來 <= 0.8s，
        用真正的時間（CSS transition），不是 rAF。
     3. 捲動驅動：--barp（@property 註冊的可插值數字）由 scroll(root block)
        時間軸驅動，頂列的高度與偏移、玻璃裡的折射光暈位置都跟著捲動改變。
        主內容整體做一次很輕的抬起。全部在 @supports 內，不支援就完全不動。
     4. prefers-reduced-motion：只放慢與縮小位移，不刪任何內容。
     5. 分頁隱藏暫停：CSS 動畫由瀏覽器在分頁隱藏時停止推進；JS 的計時器
        （live.js）另外自己暫停。
   ========================================================================== */

/* 捲動進度：0 在頁首，1 在 300px 之後。註冊成 <number> 才能平滑插值。 */
@property --barp{syntax:'<number>';inherits:true;initial-value:0}

/* ── 1. 進場：只有 JS 在場時才會有「還沒進場」這個狀態 ─────────────── */
html.js .rv,
html.js .rv-veil{
  transition:opacity var(--dur-3) var(--ease-out),translate var(--dur-3) var(--ease-out),
             clip-path var(--dur-3) var(--ease-out);
  transition-delay:var(--d,0ms);
}
html.js .rv{opacity:0;translate:0 16px}
html.js .rv.on{opacity:1;translate:0 0}
/* 遮罩進場：從前往方向擦出（在內層元素上，所以被觀察的外框仍然有完整的
   面積可以進場）。clip 的上緣永遠在文字方塊之上，不會切到字。 */
html.js .rv-veil > *{
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--dur-3) var(--ease-out);
  transition-delay:var(--d,0ms);
}
html.js .rv-veil.on > *{clip-path:inset(0 0 0 0)}

/* ── 2. HERO：主標與品牌鎖定立刻可見；紙面亮起、後三件進場 ──────────── */
html.js .hero-in .rv{--d:60ms}
html.js .hero-in .rv:nth-of-type(2){--d:120ms}
html.js .hero-in .rv:nth-of-type(3){--d:180ms}
html.js .band-hero{animation:band-in var(--dur-4) var(--ease-out) both}
@keyframes band-in{from{background:var(--paper)}to{background:var(--band)}}

/* ── 3. 捲動驅動：頂列壓縮 + 玻璃折射光暈位移 + 主內容輕抬 ───────────── */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    html{
      animation:barp-in linear both;
      animation-timeline:scroll(root block);
      animation-range:0 300px;
    }
    .hero-in{
      animation:hero-lift linear both;
      animation-timeline:scroll(root block);
      animation-range:0 560px;
    }
  }
}
@keyframes barp-in{from{--barp:0}to{--barp:1}}
@keyframes hero-lift{from{translate:0 0}to{translate:0 -26px}}

/* ── 4. prefers-reduced-motion：放慢、縮小位移，內容一件都不少 ──────── */
@media (prefers-reduced-motion:reduce){
  html.js .rv,
  html.js .rv-veil > *{transition-duration:600ms}
  html.js .rv{translate:0 0}
  html.js .rv-veil > *{clip-path:inset(0 0 0 0)}
  .glass::before{translate:0 0}
  .arw{transition:none}
}