/* AI 同事頁的 15 秒動畫（#813，2026-09-27 Vega；原型是 Atlas 的 motion-graphics-test-0927）。
   做法：一張固定大小的「畫布」（橫式 1920×1080／直式 1080×1350），用 transform 整張縮到容器寬度。
   字都是頁面上的真文字（Google 讀得到），不是圖、不是 iframe。
   🔴 為什麼有兩套版型：只用橫式縮到手機 390 寬，縮放比約 0.18，最小的字會剩 6px 看不清楚。
      直式畫布的字級另外放大，縮完最小仍約 13px。版型由 ai-colleagues-mg.js 依容器寬度切換。
   🔴 畫布固定淺米色底：角色圖用 multiply 混色，放在深色主題的底上會整張變黑。 */
.mg-wrap{max-width:960px;margin:0 auto}
.mg{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#FCF5E5;
  box-shadow:0 1px 0 rgba(42,38,32,.06),0 12px 32px rgba(42,38,32,.08)}
.mg.is-portrait{aspect-ratio:4/5}
.mg-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;transform:scale(var(--mg-s,.5));
  color:#2A2620;font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif}
.mg.is-portrait .mg-stage{width:1080px;height:1350px}
.mg-grain{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(120,90,40,.10));pointer-events:none}
.mg-el{position:absolute;opacity:0;will-change:transform,opacity}
.mg-dot{position:absolute;left:0;top:0;border-radius:50%;background:#C2410C;opacity:0}

/* ── 橫式（原型的座標，逐項照搬） ── */
.mg-kicker{left:0;right:0;top:150px;text-align:center;font-size:40px;color:#6B6459;letter-spacing:.3em}
.mg-title{left:0;right:0;top:215px;text-align:center;font-weight:900;font-size:128px;letter-spacing:.04em;line-height:1.2}
.mg-title em{font-style:normal;color:#C2410C}
.mg-line{left:760px;top:430px;height:8px;width:400px;background:#C2410C;border-radius:4px;transform-origin:left}
.mg-bot{bottom:120px;height:620px}
.mg-bot img{height:100%;width:auto;display:block;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 48% 52% at 50% 50%,#000 70%,transparent 100%);
  mask-image:radial-gradient(ellipse 48% 52% at 50% 50%,#000 70%,transparent 100%)}
.mg-b0{left:250px}.mg-b1{left:760px}.mg-b2{left:1250px}
.mg-tag{position:absolute;opacity:0;text-align:center;width:420px;top:900px}
.mg-tag b{display:block;font-weight:900;font-size:56px}
.mg-tag span{font-size:32px;color:#6B6459}
.mg-t0{left:245px}.mg-t1{left:750px}.mg-t2{left:1255px}
.mg-num{left:0;right:0;top:200px;text-align:center;font-weight:900;font-size:300px;line-height:1.2;color:#C2410C;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mg-numcap{left:0;right:0;top:660px;text-align:center;font-size:52px}
.mg-numsub{left:0;right:0;top:750px;text-align:center;font-size:40px;color:#6B6459}
.mg-p{left:0;right:0;text-align:center;padding:0 60px;line-height:1.4}
.mg-p1{top:300px;font-size:72px;font-weight:900}
.mg-p2{top:420px;font-size:56px;color:#6B6459}
.mg-p3{top:560px;font-size:64px;color:#C2410C;font-weight:900}
.mg-logo{left:0;right:0;top:830px;text-align:center;font-size:40px;letter-spacing:.2em;color:#6B6459}

/* ── 直式（手機）：同樣的元素，字放大、三位同事縮小排一列 ── */
.is-portrait .mg-kicker{top:170px;font-size:44px;letter-spacing:.2em}
.is-portrait .mg-title{top:240px;font-size:110px}
.is-portrait .mg-line{left:390px;top:420px;width:300px}
.is-portrait .mg-bot{bottom:auto;top:330px;height:520px}
.is-portrait .mg-b0{left:40px}.is-portrait .mg-b1{left:390px}.is-portrait .mg-b2{left:740px}
.is-portrait .mg-tag{top:880px;width:340px}
.is-portrait .mg-tag b{font-size:60px}
.is-portrait .mg-tag span{font-size:40px;display:block;line-height:1.3;padding:0 10px}
.is-portrait .mg-t0{left:25px}.is-portrait .mg-t1{left:370px}.is-portrait .mg-t2{left:715px}
.is-portrait .mg-num{top:330px;font-size:230px}
.is-portrait .mg-numcap{top:700px;font-size:56px}
.is-portrait .mg-numsub{top:790px;font-size:42px;padding:0 60px}
.is-portrait .mg-p1{top:360px;font-size:64px}
.is-portrait .mg-p2{top:500px;font-size:50px}
.is-portrait .mg-p3{top:700px;font-size:50px;padding:0 40px}   /* 58px 會把「我們／尊重」拆成兩行，縮到一行放得下 */
.is-portrait .mg-logo{top:1170px;font-size:40px;letter-spacing:.1em}

/* 重播鈕：播完才出現 */
.mg-replay{position:absolute;right:14px;bottom:14px;z-index:2;border:1px solid rgba(42,38,32,.18);background:rgba(255,253,249,.9);
  color:#2A2620;border-radius:999px;padding:6px 14px;font-size:14px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.mg.is-done .mg-replay{opacity:1;pointer-events:auto}
.mg-replay:focus-visible{outline:2px solid #C2410C;outline-offset:2px}