/* MMB motion 系統 ——「排版枱」（2026-10-01）
   一本雜誌喺你面前排版：欄線自己畫、欄號翻頁、標題排字、相片開版、色帶落墨。

   三條規矩，加新動畫前對一次：
   1. 內文永遠即刻讀得到。郁嘅淨係版面結構（線、號、標題、相、色帶），唔做逐個 element 淡入。
   2. 每個動作要答到「佢話俾讀者知乜」：揭示、指路、或者回應操作。答唔到就唔加。
   3. easing 同時長一律用 tokens.css 嘅 --ease-* ／ --t-*。

   開關：<html class="mo"> 由 <head> 入面嗰段 inline script 加（prefers-reduced-motion 就唔加），
   motion.js 起動之後寫 window.__mo；去到 DOMContentLoaded 仲未起動，head 嗰段會自己剝走 .mo，所以引擎死咗都唔會留低隱形內容。
   🔴 呢度所有「未入場」狀態都要寫喺 html.mo 之下。冇 .mo ＝ 最終狀態，截圖工具剝走 .mo 就影到成品。 */

/* ---------- 跨頁轉場：同 blog.css 一樣 opt-in，首頁同文章之間先會接得上 ---------- */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* 同一個 session 第二次返首頁唔再播 loader */
html.seen .loader{display:none}

/* ========== HERO · 封面排版 ========== */
/* 引擎未起動之前先收起，免得冇 loader 嗰陣（返轉頭）標題閃一下先再升 */
html.mo body:not(.js) #heroH1{opacity:0}
html.mo body:not(.js) .hero-visual::before{content:"";position:absolute;inset:0;background:var(--bg);z-index:5}

/* 副標／數據／CTA 係內文：由第一格就喺度，唔淡入唔升（規矩 1） */
html.mo .hero-copy>.rv{opacity:1;transform:none;transition:none}
/* kicker 唔升，由左印到右 */
html.mo .hero-copy>.kicker.rv{opacity:1;transform:none;transition:clip-path 1s var(--ease-out) .05s}
html.mo body:not(.hero-go) .hero-copy>.kicker.rv{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
html.mo body.hero-go .hero-copy>.kicker.rv{clip-path:inset(0 -2% 0 0)}

/* 相：遮板揭開（原有）＋張相由 1.12 收返 1；之後 scroll 離開嗰陣慢慢推近 */
html.mo .hero-visual{isolation:isolate;overflow:hidden}
html.mo .hero-visual .hero-slide{scale:calc(1 + var(--hs,0) * .06)}
html.mo .hero-visual .hero-slide:first-child{transition:transform 2.2s var(--ease-out) .1s}
html.mo body:not(.hero-go) .hero-visual .hero-slide:first-child{transform:scale(1.12)}
/* 換相用 clip wipe（motion.js 行 WAAPI），唔用 crossfade：新相疊喺舊相上面揭開 */
html.mo .hero-visual .hero-slide{transition:none}
html.mo .hero-visual .hero-slide.prev{opacity:1;z-index:1}
html.mo .hero-visual .hero-slide.active{opacity:1;z-index:2}
html.mo .hero-visual::after{z-index:3}
html.mo .hero-visual .tag,html.mo .hero-carousel-controls{z-index:4}
html.mo .hero-visual .tag{transition:clip-path .9s var(--ease-out) 1.05s}
html.mo body:not(.hero-go) .hero-visual .tag{clip-path:inset(0 100% 0 0)}
html.mo body.hero-go .hero-visual .tag{clip-path:inset(0)}
html.mo .hero-visual .tag.sw{animation:mo-print .7s var(--ease-out) both}
@keyframes mo-print{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* ========== 部門頭：欄線畫 → 欄號翻 → 標題排字 → 螢光筆 ========== */
/* 原本成塊淡入升起嘅，改做結構自己郁；塊本身唔再淡入 */
html.mo :is(.mag-run,.mag-works,.mag-profile,.mag-show).rv{opacity:1;transform:none;transition:none}

/* 欄線：2px 墨線由左畫到右，running head 啲字跟住印出嚟 */
html.mo .mag-run{position:relative;border-top-color:transparent}
html.mo .stage>.wrap>.mag-run{position:sticky}
html.mo .mag-run::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;
  background:var(--ink-display);transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s var(--ease-inout)}
html.mo .mag-run--dark::after{background:var(--ink-on-dark)}
html.mo .mag-run.in::after{transform:scaleX(1)}
/* 進度線（.stage 嘅 ::before）要疊喺墨線上面 */
html.mo .stage>.wrap>.mag-run::before{z-index:1}
html.mo .mag-run>span{clip-path:inset(0 100% 0 0);transition:clip-path var(--t-set) var(--ease-out) .3s}
html.mo .mag-run.in>span{clip-path:inset(0 -2% 0 0)}

/* 目錄同問答欄頂嗰條 2px 墨線一樣自己畫（1px 幼線唔郁，粗線先係版面骨架） */
html.mo :is(.mag-list,.mag-qa){position:relative;border-top-color:transparent}
html.mo :is(.mag-list,.mag-qa)::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;
  background:var(--ink-display);transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s var(--ease-inout)}
html.mo :is(.mag-list,.mag-qa).in::before{transform:scaleX(1)}

/* 欄號翻頁：個位數由上一期翻到今期（00→01、01→02）。motion.js 拆 .fo-d／.fo-prev／.fo-now。
   冇 .mo 嗰陣 .fo-prev 唔存在，.mag-folio 就係原本嗰兩個字。 */
.fo-d{display:inline-block;position:relative}
.fo-now{display:inline-block}
.fo-prev{display:none}
html.mo .mag-folio{clip-path:inset(-.08em -.3em -.1em -.3em)}
html.mo .fo-prev{display:block;position:absolute;left:50%;top:0;translate:-50% 0;
  transform:translateY(-124%);transition:transform 1.2s var(--ease-out) .12s}
html.mo .fo-now{transition:transform 1.2s var(--ease-out) .12s}
html.mo .mag-dept:not(.in) .fo-now{transform:translateY(124%)}
html.mo .mag-dept:not(.in) .fo-prev{transform:none}

/* 標題排字：沿用 .mask 逐行升，只係等埋部門頭一齊起步 */
html.mo .mag-dept .mask>.mi{transition:transform var(--t-set) var(--ease-out) .14s}
html.mo .mag-dept .mask.line:nth-child(2)>.mi{transition-delay:.24s}

/* 螢光筆：standfirst 粗體嗰句由左畫到右。inline 跌行嘅背景係成條連續計，所以會一行畫完先畫下一行 */
html.mo .mag-standfirst b{box-shadow:none;
  background:linear-gradient(rgba(164,72,47,.16),rgba(164,72,47,.16)) no-repeat 0 100%/0% .42em;
  transition:background-size 1.2s var(--ease-inout) .7s}
html.mo .mag-dept--dark .mag-standfirst b{background-image:linear-gradient(rgba(215,136,115,.22),rgba(215,136,115,.22))}
html.mo .mag-dept.in .mag-standfirst b{background-size:100% .42em}

/* ========== 開版：相片揭開。橫相橫開、直相直開 ========== */
html.mo :is(.mag-scene,.wk img,.mag-profile .mag-figure img,.mag-thumb img,.mag-latest .latest-card-media img){
  clip-path:inset(0 0 100% 0);transition:clip-path var(--t-plate) var(--ease-out),filter .35s var(--ease-out),transform 1.1s var(--ease-out)}
html.mo :is(.wk-lead img,.wk-s2 img,.mag-latest .latest-card-media img){clip-path:inset(0 100% 0 0)}
html.mo :is(.mag-scene,.wk img,.mag-profile .mag-figure img,.mag-thumb img,.mag-latest .latest-card-media img).in{clip-path:inset(0)}
html.mo .mag-latest .latest-card:nth-child(2) .latest-card-media img{transition-delay:.09s,0s,0s}
html.mo .mag-latest .latest-card:nth-child(3) .latest-card-media img{transition-delay:.18s,0s,0s}

/* ========== 色帶落墨：深綠 full-bleed 條由左轆過去 ========== */
html.mo :is(.mag-pull,.mag-strip){clip-path:inset(0 100% 0 0);transition:clip-path 1.25s var(--ease-inout)}
html.mo :is(.mag-pull,.mag-strip).in{clip-path:inset(0)}

/* pull quote：讀到邊度，字實到邊度（--v 由 motion.js 跟 scroll 寫入，--i 係第幾個字） */
html.mo .mag-pull .qc{opacity:calc(.24 + .76 * clamp(0,var(--v,0) * var(--n,30) - var(--i,0),1));
  transition:opacity .28s linear}
html.mo .mag-pull cite{opacity:clamp(0,var(--v,0) * 10 - 8.6,1);transition:opacity .5s ease}

/* 內容產出：六張封面似打樣咁逐張擺落枱（跟 scroll，唔淡入） */
html.mo .strip-grid figure{--t:clamp(0,calc(var(--v,0) * 1.9 - var(--i,0) * .16),1);--r:-2.4deg;
  transform:translateY(calc((1 - var(--t)) * 56px)) rotate(calc((1 - var(--t)) * var(--r)));
  transition:transform .4s var(--ease-out),translate .45s var(--ease-out)}
html.mo .strip-grid figure:nth-child(2){--i:1;--r:1.8deg}
html.mo .strip-grid figure:nth-child(3){--i:2;--r:-1.4deg}
html.mo .strip-grid figure:nth-child(4){--i:3;--r:2.6deg}
html.mo .strip-grid figure:nth-child(5){--i:4;--r:-2deg}
html.mo .strip-grid figure:nth-child(6){--i:5;--r:1.5deg}

/* ========== 02 流程：行過咗嘅步驟向上走，未到嘅由下面嚟（原本兩邊都向下） ========== */
@media(min-width:901px){
  html.mo .proc-sticky .proc-step[data-past]{transform:translateY(-22px)}
}

/* ========== 06 吹銷：handle 旁邊嘅音量條。冇 .mo 就係靜止嗰四條 ========== */
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:.72em;margin-left:.6em}
.eq i{display:block;width:3px;height:100%;background:var(--accent-on-dark);transform-origin:bottom;transform:scaleY(.42)}
.eq i:nth-child(2){transform:scaleY(.86)}
.eq i:nth-child(3){transform:scaleY(.6)}
.eq i:nth-child(4){transform:scaleY(.3)}
html.mo .mag-show.live .eq i{animation:mo-eq 1.1s var(--ease-inout) infinite alternate}
html.mo .mag-show.live .eq i:nth-child(2){animation-duration:.82s;animation-delay:-.3s}
html.mo .mag-show.live .eq i:nth-child(3){animation-duration:1.34s;animation-delay:-.7s}
html.mo .mag-show.live .eq i:nth-child(4){animation-duration:.96s;animation-delay:-.15s}
@keyframes mo-eq{from{transform:scaleY(.18)}to{transform:scaleY(1)}}

/* ========== 07 問答：加號嗰一直劃收埋變減號，答案跟住高度滑出嚟（高度由 motion.js 行） ========== */
html.mo .mag-qa summary::after{content:"";width:13px;height:13px;align-self:center;
  background:
    linear-gradient(var(--accent-soft),var(--accent-soft)) center/100% 1.5px no-repeat,
    linear-gradient(var(--accent-soft),var(--accent-soft)) center/1.5px 100% no-repeat;
  transition:background-size var(--t-ui) var(--ease-out),rotate var(--t-ui) var(--ease-out)}
html.mo .mag-qa details[open] summary::after{content:""}
html.mo .mag-qa details[data-open] summary::after{background-size:100% 1.5px,1.5px 0%;rotate:180deg}
html.mo .mag-qa details[data-open] summary::before{color:var(--accent)}
html.mo .mag-qa details[data-open]>p{animation:mo-answer .55s var(--ease-out) both}
@keyframes mo-answer{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ========== 結尾：大字逐行排，MMB 水印跟 scroll 推入嚟 ========== */
/* 結尾嗰幾行原本逐行淡入升起，同第 1 條規矩撞：內文即刻見，郁嘅淨係大標同水印 */
html.mo .final .rv{opacity:1;transform:none;transition:none}
html.mo .final h2 .mask:nth-child(2)>.mi{transition-delay:.1s}
html.mo .final h2 .mask:nth-child(3)>.mi{transition-delay:.2s}
html.mo footer .wm{transform:translateX(calc((1 - var(--v,0)) * 14%))}

/* ========== 預約視窗：由下面滑上嚟，背景慢慢暗 ==========
   @starting-style ＋ allow-discrete：唔支援嘅瀏覽器就照舊直接出，唔會壞 */
html.mo .booking-dialog{opacity:0;transform:translateY(28px) scale(.985);
  transition:opacity .3s ease,transform .5s var(--ease-out),overlay .5s allow-discrete,display .5s allow-discrete}
html.mo .booking-dialog[open]{opacity:1;transform:none}
html.mo .booking-dialog::backdrop{opacity:0;transition:opacity .4s ease,overlay .4s allow-discrete,display .4s allow-discrete}
html.mo .booking-dialog[open]::backdrop{opacity:1}
@starting-style{
  html.mo .booking-dialog[open]{opacity:0;transform:translateY(28px) scale(.985)}
  html.mo .booking-dialog[open]::backdrop{opacity:0}
}

/* ========== 手機選單：由 nav 底滑落嚟，漢堡三劃變交叉 ========== */
.mobile-menu-toggle span{transition:transform var(--t-ui) var(--ease-out),opacity var(--t-micro) linear}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
@media(max-width:860px){
  html.mo .nav-links{opacity:0;transform:translateY(-10px);
    transition:opacity .25s ease,transform .4s var(--ease-out),display .4s allow-discrete}
  html.mo .nav-links.open{opacity:1;transform:none}
  @starting-style{html.mo .nav-links.open{opacity:0;transform:translateY(-10px)}}
}

/* ========== 回應操作：hover 只喺有滑鼠嘅裝置行 ========== */
@media(hover:hover){
  /* 文字連結：底線由左加粗掃過去，離開由右收返 */
  :is(.mag-go,.mag-links a)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
    background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--t-ui) var(--ease-out)}
  :is(.mag-go,.mag-links a):hover::after{transform:scaleX(1);transform-origin:left}
  /* 目錄行：標題向右讓一讓 */
  .mag-row h3{transition:transform .45s var(--ease-out)}
  .mag-row:hover h3{transform:translateX(6px)}
  .mag-thumb img{transition:filter .35s var(--ease-out)}
  .mag-row:hover .mag-thumb img{filter:saturate(1) contrast(1)}
  /* 文章卡：圖喺框入面慢慢推近（.latest-card-media 本身 overflow:hidden） */
  .mag-latest .latest-card-media img{transition:transform 1.1s var(--ease-out),filter .35s var(--ease-out)}
  .mag-latest .latest-card:hover .latest-card-media img{transform:scale(1.035);filter:saturate(1)}
  .wk img{transition:filter .35s var(--ease-out)}
  .wk:hover img{filter:saturate(1)}
  /* 打樣：撳到嗰張提起 */
  .strip-grid figure{transition:translate .45s var(--ease-out)}
  .strip-grid figure:hover{translate:0 -6px}
}
@media(prefers-reduced-motion:reduce){
  .mag-row h3,.strip-grid figure,.mag-latest .latest-card-media img,.mobile-menu-toggle span,:is(.mag-go,.mag-links a)::after{transition:none}
  .mag-row:hover h3,.mag-latest .latest-card:hover .latest-card-media img{transform:none}
  .strip-grid figure:hover{translate:none}
}