/* ============================================================
   勁揚旅遊集團（勁揚／原昇）簡報公版 · 共用樣式
   2026-09-30 由「中山國小韓國交流」提案簡報抽出來（decks/jinyang-zs115013）。
   每份簡報只做兩件事：
     1. 在自己的 <style> 覆寫主題色（--accent 與五色帶 --b1…--b5）
     2. 寫自己的頁面與每頁的進場動畫
   版面、字型、元件、轉場全部從這裡來，所以每份長得是同一家公司做的。
   用法與頁型清單見同資料夾 README.md。
   ============================================================ */
:root{
  --ink:#1d2124;--ink2:#4b5257;--mute:#8a8f93;--rule:#c9cdd0;--rule2:#e3e6e8;--paper:#fbfaf7;
  /* 主題色：每份簡報自己覆寫 */
  --accent:#1d6b63;--accent-l:#e8f1ef;
  --b1:#1d6b63;--b2:#b3372b;--b3:#c9921c;--b4:#ffffff;--b5:#1d2124;
  --serif:"JYSerif","Noto Serif CJK TC","Noto Serif TC",serif;
  --sans:"JYSans","Noto Sans CJK TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --ease:cubic-bezier(.7,0,.2,1);--out:cubic-bezier(.16,.8,.24,1)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#101314;overflow:hidden}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center;background:var(--paper);overflow:hidden;font-family:var(--sans);color:var(--ink)}
.slide{position:absolute;inset:0;display:none;overflow:hidden}
.slide.on{display:block}
.m,.ab,.ph{position:absolute}
.m,.ph{overflow:hidden}
.m>img,.ph>img,.m>video,.ph>video{width:100%;height:100%;object-fit:cover;display:block}
.fg{position:absolute;inset:0;pointer-events:none}
.fg a,.fg button,.fg .play{pointer-events:auto}
svg.full{position:absolute;left:0;top:0;width:1920px;height:1080px}

/* 字 */
.serif{font-family:var(--serif);font-weight:700}
h2{font-family:var(--serif);font-weight:700;font-size:72px;line-height:1.24;letter-spacing:.04em}
.lede{font-size:24px;line-height:1.8;color:var(--ink2)}
.cap{font-size:18px;color:var(--mute);letter-spacing:.06em;line-height:1.6}
.kick{display:flex;align-items:center;gap:18px;font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:.14em;color:var(--accent)}

/* 五色帶：公司的記號，每頁一條 */
.five{display:flex}.five i{display:block;width:34px;height:6px}
.five i:nth-child(1){background:var(--b1)}.five i:nth-child(2){background:var(--b2)}.five i:nth-child(3){background:var(--b3)}
.five i:nth-child(4){background:var(--b4);box-shadow:inset 0 0 0 1px var(--rule)}.five i:nth-child(5){background:var(--b5)}

/* 頁尾 */
.folio{position:absolute;left:120px;bottom:46px;display:flex;align-items:center;gap:18px;font-size:17px;letter-spacing:.24em;color:var(--mute)}
.folio b{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--accent);letter-spacing:0}

/* 時間表 */
.tl{position:absolute}
.tl div{display:flex;gap:24px;padding:11px 0;border-top:1px solid var(--rule);font-size:22px;line-height:1.5}
.tl div:last-child{border-bottom:1px solid var(--rule)}
.tl i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--accent);width:66px;flex:none;font-weight:500}

/* 觀察題／重點框 */
.qbox{position:absolute;background:var(--accent-l);border-left:5px solid var(--accent);padding:18px 24px;font-size:21px;line-height:1.6}
.qbox b{font-family:var(--serif);font-weight:700;color:var(--accent);margin-right:12px}

/* 照片元件 */
.ring{border:5px solid #fff;border-radius:50%;box-shadow:0 14px 30px -10px rgba(0,0,0,.45)}
.card{position:absolute;overflow:hidden;box-shadow:0 28px 56px -22px rgba(0,0,0,.5)}
.card img,.card video{width:100%;height:100%;object-fit:cover;display:block}
.chip{position:absolute;font-family:var(--serif);font-weight:700;font-size:22px;background:#fff;padding:4px 14px;white-space:nowrap}
.tag{position:absolute;font-size:17px;color:#fff;background:rgba(29,33,36,.78);padding:5px 14px;white-space:nowrap}
.nextlb{position:absolute;left:1750px;top:152px;width:140px;text-align:center;font-size:17px;letter-spacing:.2em;background:#fff;padding:3px 0;color:var(--ink2)}
.nav{position:fixed;right:28px;bottom:20px;color:#ffffff66;font:13px sans-serif;letter-spacing:.14em;z-index:10}

/* 影片：點了才播（版面第九條） */
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.play::after{content:"";width:0;height:0;border-left:46px solid #fff;border-top:28px solid transparent;border-bottom:28px solid transparent;margin-left:12px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.play::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(0,0,0,.35);border:3px solid #fff}
.play.playing{display:none}
.play.sm::before{width:72px;height:72px}.play.sm::after{border-left-width:28px;border-top-width:17px;border-bottom-width:17px;margin-left:8px}
.play.sm{align-items:flex-end;justify-content:flex-start;padding:0 0 16px 16px}

/* ── 轉場：同名元素從 A 慢慢變成 B；文字層先退、照片移動、新字再進 ── */
::view-transition{background:var(--paper)}
::view-transition-group(*){animation-duration:1.25s;animation-timing-function:var(--ease)}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:kitIn .7s .45s ease-out both}
::view-transition-old(fg){animation:kitOut .28s ease-in both}
::view-transition-new(fg){animation:kitIn .25s .75s ease-out both}
@keyframes kitOut{to{opacity:0}}
@keyframes kitIn{from{opacity:0}}
html.still *{animation:none!important;transition:none!important}

/* ── 共用進場動畫（每頁挑一種，同一份簡報裡不要重複用在主角上） ── */
@keyframes k-fade{from{opacity:0}}
@keyframes k-maskUp{from{clip-path:inset(100% 0 0 0);transform:translateY(36px)}}
@keyframes k-dropIn{from{transform:translateY(-40px);opacity:0}}
@keyframes k-writeDown{from{clip-path:inset(0 0 100% 0)}}
@keyframes k-spring{from{transform:scale(.45) translateY(140px);opacity:0}}
@keyframes k-sunUp{from{transform:translateY(260px) scale(.8);opacity:0}}
@keyframes k-draw{from{stroke-dashoffset:1}}
@keyframes k-fly{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes k-popIn{from{transform:scale(.4);opacity:0}}
@keyframes k-slideL{from{opacity:0;transform:translateX(70px)}}
@keyframes k-slideR{from{opacity:0;transform:translateX(-50px)}}
@keyframes k-stopIn{from{opacity:0;transform:translateY(-34px)}}
@keyframes k-growUp{from{clip-path:inset(0 0 100% 0);transform:translateY(20px)}}
@keyframes k-fromLeft{from{transform:translateX(-160px);opacity:0}}
@keyframes k-paperIn{from{transform:translateX(220px);opacity:0}}
@keyframes k-rise{from{transform:translateY(120px);opacity:0}}
@keyframes k-arcFromL{from{transform:translateX(-500px)}}
@keyframes k-arcFromR{from{transform:translateX(460px)}}
@keyframes k-settle{from{transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(1.1);opacity:0}}
@keyframes k-hop{from{transform:translate(var(--fx),var(--fy)) scale(.5);opacity:.15}}
@keyframes k-paraIn{from{clip-path:polygon(0 0,0 0,0 100%,0 100%)}}
@keyframes k-pan{from{transform:scale(1.12) translateX(-3%)}to{transform:scale(1.12) translateX(3%)}}
@keyframes k-wipe{from{clip-path:inset(0 100% 0 0)}}
@keyframes k-gather{from{transform:translate(var(--gx),var(--gy))}}
@keyframes k-pop{from{transform:scale(.3);opacity:0}}
@keyframes k-fan{from{transform:translate(var(--px),0) rotate(0)}}
@keyframes k-tick{from{stroke-dashoffset:40}}
@keyframes k-reel{from{transform:translateY(0)}}
@keyframes k-wave{0%{transform:rotate(0)}20%{transform:rotate(-4deg)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
@keyframes k-dropDown{from{opacity:0;transform:translateY(-36px)}}
@keyframes k-kb{from{transform:scale(1.14)}}
@keyframes k-sweep{from{background-position:130% 0}to{background-position:-40% 0}}
@keyframes k-iris{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
@keyframes k-spot{0%{opacity:0}30%{opacity:1}100%{opacity:1}}