/* demo：三張照片改「往下捲依序蓋上來」，取消自動輪播 */
#hero{position:sticky;top:var(--stk-top,0px);z-index:0}
.hero-dots{display:none!important}
.ph-dim{position:absolute;inset:0;background:#0b1118;opacity:0;pointer-events:none;z-index:6}
.ph-stack{position:relative;z-index:1}
.ph-panel{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0b1118;margin:0}
.ph-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.15);will-change:transform}
.ph-panel::after{content:'';position:absolute;inset:auto 0 0;height:48%;background:linear-gradient(to top,rgba(10,16,22,.62),rgba(10,16,22,0));pointer-events:none;z-index:1}
.ph-cap{position:absolute;left:clamp(16px,4vw,48px);right:clamp(16px,4vw,48px);bottom:clamp(36px,8vh,72px);z-index:2;color:#fff}
.ph-n{display:block;font:600 13px/1 'Noto Sans TC',sans-serif;letter-spacing:.18em;opacity:.85;font-variant-numeric:tabular-nums}
.ph-t{display:block;font:700 clamp(30px,5vw,60px)/1.25 'Noto Serif TC',serif;margin-top:12px;letter-spacing:.02em}
.ph-panel .ph-dim{z-index:3}
.ph-wrap{position:relative}
.ph-mark{position:absolute;right:clamp(28px,3vw,44px);bottom:36px;z-index:4;color:#fff;font:600 13px/1 'Noto Sans TC',sans-serif;letter-spacing:.18em;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.demo-replay{position:fixed;right:12px;top:calc(var(--nav-h,60px) + 10px);z-index:9999;font:600 12px/1 'Noto Sans TC',sans-serif;color:#fff;background:rgba(29,42,54,.85);border:0;border-radius:999px;padding:9px 12px}
@media (max-width:900px){
  .ph-cap{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  .ph-mark{right:16px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){.ph-panel img{transform:none}}

/* 開場動畫播放時先藏住下一張，播完再淡入 */
.ph-stack{transition:opacity .6s ease}
html.ix-run .ph-stack,html.ixh .ph-stack{opacity:0}