/* MaoKing 首屏:MAO KING 字母歸位遮罩(從 hero-test.html 抽出,兩版首頁共用) */
/* 首屏試作 v3:照片卡套 SVG mask(七個字母各自從「放大疊在中央」飛到 MAO KING 單行的位置),
   起點邊緣羽化、捲動中變銳利;頁首全程透明,用 mix-blend-mode: difference 反色(SIHYI 那招)。
   捲動預算 1000px(照 Urban Physio),卡片 inset 18px。手機終點改兩行 MAO / KING。 */
.mkhero { position: relative; height: calc(100vh + 2200px); background: var(--bg, #E7E8ED); }   /* 實際高度由 mk-hero.js 依 BUDGET 設定 */
.mkhero-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.mk-card { position: absolute; inset: 0; background: #000; -webkit-mask: url(#mkmask); mask: url(#mkmask); }
.mk-card figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s var(--ease); }
.mk-card figure.on { opacity: 1; }
.mk-card img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 50%; }
.mk-tag { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 60px; line-height: 72px; font-weight: 300; color: #fff; pointer-events: none; will-change: transform; margin: 0; }   /* 起點=左下(分頁點下方)白字 → 終點=字樣下方置中黑字,位置與顏色由 mk-hero.js 每幀設定 */
.mk-side { position: absolute; right: var(--hd-side, 75px); top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-family: var(--mono); font-size: 13px; letter-spacing: .05em; color: #fff; }
.mk-side.blend, .mk-dots.blend { mix-blend-mode: difference; }
.mk-dots { position: absolute; left: var(--hd-side, 75px); bottom: 136px; display: flex; gap: 8px; color: #fff; }   /* 在標語(底 40、行高 72)上方 24 */
.mk-dots button { width: 34px; height: 20px; position: relative; }
.mk-dots button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; opacity: .4; transition: opacity .3s; }
.mk-dots button.on::after { opacity: .4; }
/* 計時版(10-18 Eric):目前那條線上疊一條實線,從左到右填滿 = 到下一張的倒數 */
.mk-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; z-index: 1; }
.mk-dots button.on::before { animation: mk-dot-t var(--mk-t, 6000ms) linear forwards; }
@keyframes mk-dot-t { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .mk-dots button.on::before { animation: none; transform: scaleX(1); } }
.mk-hint { position: absolute; right: var(--hd-side, 75px); bottom: 52px; width: 48px; height: 48px;   /* 移到右下,跟左下標語同一水平;原本置中在 1280 寬會撞到標語 */ border-radius: 999px; background: rgba(255,255,255,.85); display: grid; place-items: center; transition: opacity .5s; }
.mk-hint svg { width: 16px; height: 16px; fill: none; stroke: #000; stroke-width: 1.4; }
.mk-next { height: 100vh; display: grid; place-items: center; color: var(--mute); font-size: 15px; letter-spacing: .05em; border-top: 1px solid rgba(0,0,0,.14); }
/* 頁首:首屏=透明 + 純白內容(上一版);字母上緣掉到頁首下面後才加 .blend(difference 反色:白底上變黑) */
.hd.plain { background: transparent; color: #fff; }
.hd.plain .hd-logo img, .hd.blend .hd-logo img { display: none; } .hd.plain .hd-logo .w, .hd.blend .hd-logo .w { display: block; }
.hd.plain .btn, .hd.blend .btn { background: #fff; color: #000; }
.hd.blend { background: transparent; color: #fff; mix-blend-mode: difference; }
@media (max-width: 767px) { .mk-hint { right: 20px; bottom: 20px; } .mk-side { display: none; } .mk-dots { left: 20px; bottom: 80px; } .mk-tag { font-size: 28px; line-height: 40px; } }
/* 首屏照片淺深色遮罩(Eric 10-12:太鮮豔太亮)。在字母遮罩裡面,所以字成形後透出來的照片也一起壓暗;濃度改 --mk-shade */
.mk-card { --mk-shade: .24; }
.mk-card::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--mk-shade)); pointer-events: none; }