/* AI 導入頁條漫的樣式。由原型轉出，要改請改原型再重新產生 */

/* ================================================================
   🎬 節奏調整區（只改這一塊）
   --enter      格子進到畫面後，等多久才開始淡入
   --fade       畫面淡入要多久
   --pace       人物動作的快慢倍率（1＝原速，1.5＝慢 50%，0.7＝快 30%）
   --say-at     這一格第一個對白框，在人物開始動之後幾秒跳出
   --say-gap    同一格裡，對白框一個接一個的間隔
   --cap-gap    最後一個對白框之後，旁白框多久出現
   --chain      兩格同時進到畫面時，下一格要等上一格演多久才開始（排隊，不同時動）
   每格可以個別覆寫（下面 .p1 … .p6）
   ================================================================ */
#ai-comic{
  --enter:.15s; --fade:.6s; --pace:1; --say-at:.9s; --say-gap:.7s; --cap-gap:.5s; --chain:2.8s;
}
#ai-comic .p1{--say-at:.8s}
#ai-comic .p2{--say-at:2s;--chain:5.5s}
  /* 老闆先拿出平板，再開口；這格演得久 */
#ai-comic .p3{--say-at:1.2s}
#ai-comic .p4{--say-at:1.8s}
        /* 先接線、核心亮起，再出旁白 */
#ai-comic .p5{--say-at:2.4s}
        /* 先點按鈕、掛曆翻頁，再說話 */
#ai-comic .p6{--say-at:1.4s}

/* ================================================================ */

/* 對白字型：jf open 粉圓（Huninn，OFL 1.1，可商用、可嵌入）；只含本頁用到的字。授權檔 font/OFL-huninn.txt */
@font-face{font-family:"Huninn";src:url(/assets/ai-comic/font/huninn-sub.woff2) format("woff2");font-display:swap}
#ai-comic{--brand:#02539C;--mist:#B3CBE1;--paper:#F2F6FA;--ink:#0E141B;--pop:#E8A13A;
  --font:"PingFang TC","Noto Sans TC","Heiti TC",sans-serif;--say:"Huninn","PingFang TC","Noto Sans TC",sans-serif}
#ai-comic *{box-sizing:border-box}
#ai-comic{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-text-size-adjust:100%}
#ai-comic .aic-head{max-width:860px;margin:0 auto;padding:28px 18px 8px}
#ai-comic .aic-head h2{font-size:clamp(22px,5vw,34px);margin:0 0 6px;color:var(--brand);letter-spacing:.02em}
#ai-comic .aic-head p{margin:0;font-size:15px;line-height:1.7;color:#3b4a5a}
#ai-comic .aic-main{max-width:860px;margin:0 auto;padding:8px 0 40px}
#ai-comic .panel{margin:0 0 10vh}
#ai-comic .frame{position:relative;width:100%;overflow:hidden;background:var(--mist);outline:2.5px solid var(--ink);outline-offset:-1px;container-type:inline-size}
#ai-comic .frame img{display:block}
#ai-comic .base{width:100%;height:100%;object-fit:cover}
#ai-comic .anim{display:none;position:absolute;inset:0;pointer-events:none}
#ai-comic .ly{position:absolute;height:auto}
#ai-comic .plate{position:absolute;inset:0;width:100%;height:100%}


/* 對白框（Blambot：layer method、尾巴指向嘴、字置中堆疊、不加陰影） */
#ai-comic svg.bl{position:absolute;left:0;top:0;width:100%;height:auto;overflow:visible;pointer-events:none;z-index:6}
#ai-comic .bl-stroke path{fill:#fff;stroke:var(--ink);stroke-width:4.5px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#ai-comic .bl-fill path{fill:#fff;stroke:none}
#ai-comic .say{position:absolute;margin:0;transform:translate(-50%,-50%);text-align:center;z-index:7;white-space:nowrap;
  font-family:var(--say);font-size:16px;font-size:max(16px,4.1cqw);line-height:1.3;letter-spacing:.03em;color:var(--ink)}
#ai-comic .say.think{font-size:max(14px,3.6cqw)}
#ai-comic .capbox{position:absolute;left:3%;top:4%;z-index:7;background:#FFF7E0;border:2.5px solid var(--ink);padding:.45em .8em;
  font-family:var(--say);font-size:16px;font-size:max(16px,4cqw);line-height:1.4}
#ai-comic .cap{position:relative;z-index:8;display:table;margin:-14px 0 0 10px;max-width:88%;background:#fff;border:2.5px solid var(--ink);
  padding:7px 13px;font-size:16px;line-height:1.6;color:var(--ink);letter-spacing:.02em}
#ai-comic .cap b{color:var(--brand);font-weight:700}


/* 小道具 */
#ai-comic .note{position:absolute;font:900 clamp(22px,6.2vw,40px)/1 var(--font);color:var(--brand);opacity:0;z-index:3;
  text-shadow:2px 0 #fff,-2px 0 #fff,0 2px #fff,0 -2px #fff}
#ai-comic .p2 .man,#ai-comic .p2 .aj,#ai-comic .p2 .cl{transform-origin:0% 100%}
#ai-comic .bossw img{position:absolute;left:0;top:0;width:100%;height:auto}
#ai-comic .bossw .bH{position:relative}
#ai-comic .bang{position:absolute;font:900 clamp(26px,7.5vw,56px)/1 Arial Black,var(--font);color:var(--pop);opacity:0;z-index:4;
  text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink),3px 3px 0 #fff}
#ai-comic .spark{position:absolute;width:12%;aspect-ratio:1;margin:-6% 0 0 -6%;opacity:0;z-index:3}
#ai-comic .spark i{position:absolute;left:50%;top:50%;width:3px;height:42%;margin-left:-1.5px;background:#fff;border-radius:2px;transform-origin:50% 0;box-shadow:0 0 6px #fff}
#ai-comic .spark i:nth-child(2){transform:rotate(60deg)}
#ai-comic .spark i:nth-child(3){transform:rotate(120deg)}
#ai-comic .spark i:nth-child(4){transform:rotate(180deg)}
#ai-comic .spark i:nth-child(5){transform:rotate(240deg)}
#ai-comic .spark i:nth-child(6){transform:rotate(300deg)}
#ai-comic .scr{position:absolute;width:7%;aspect-ratio:1;opacity:0;z-index:4}
#ai-comic .scr i{position:absolute;width:100%;height:100%;border:4px solid transparent;border-left-color:var(--ink);border-radius:50%}
#ai-comic .scr i:nth-child(2){transform:scale(.6) translateX(-30%)}
#ai-comic .lamp{position:absolute;width:42%;aspect-ratio:1;margin:-10% 0 0 -10%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,214,140,.55),rgba(255,200,120,.18) 55%,rgba(255,200,120,0));mix-blend-mode:screen;opacity:.0}
#ai-comic .core{position:absolute;width:13%;aspect-ratio:1;margin:-6.5% 0 0 -6.5%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(180,230,255,.95),rgba(80,170,255,.45) 45%,rgba(40,120,255,0));mix-blend-mode:screen;opacity:0}
#ai-comic svg.flow{position:absolute;inset:0;width:100%;height:100%;opacity:0}
#ai-comic svg.flow path{fill:none;stroke:#e6f6ff;stroke-width:9;stroke-linecap:round;stroke-dasharray:14 70;filter:drop-shadow(0 0 6px #6cc4ff) drop-shadow(0 0 3px #6cc4ff)}
#ai-comic .ring{position:absolute;width:9%;aspect-ratio:2.2/1;margin:-2% 0 0 -4.5%;border-radius:8px;box-shadow:0 0 0 3px rgba(80,170,255,.9),0 0 16px 4px rgba(80,170,255,.7);opacity:0}
#ai-comic svg.cursor{position:absolute;width:5.5%;height:auto;opacity:0;z-index:5;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.35))}
#ai-comic .twinkle{position:absolute;width:8%;aspect-ratio:1;opacity:0}
#ai-comic .twinkle i{position:absolute;width:30%;aspect-ratio:1;background:var(--pop);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
#ai-comic .twinkle i:nth-child(1){left:-30%;top:0}
#ai-comic .twinkle i:nth-child(2){left:10%;top:-55%;width:22%}
#ai-comic .twinkle i:nth-child(3){left:-55%;top:-40%;width:18%}


/* ================= 動畫（只在 JS 有跑、且沒要求減少動態時） =================
   原則：沒有 JS／減少動態＝看到完整的靜態條漫（每格的 base 圖就是最後一刻）。
   有動畫時：格子進畫面 → 淡入 → 人物動作 → 對白框逐一跳出 → 旁白框；各格自己的時鐘，互不影響。 */
@media (prefers-reduced-motion: no-preference){#ai-comic.js .anim{display:block}
#ai-comic.js .base.hb{visibility:hidden}
#ai-comic.js .panel{--t:calc(var(--enter) + var(--fade))}
#ai-comic.js .panel .frame{opacity:0;transform:translateY(18px)}
#ai-comic.js .panel .b,#ai-comic.js .panel .cap{opacity:0}
#ai-comic.js .panel.is-in .frame{opacity:1;transform:none;transition:opacity var(--fade) ease var(--enter),transform var(--fade) ease var(--enter)}
#ai-comic.js .panel:not(.is-in) *{animation-play-state:paused!important}
#ai-comic.js .panel.off *{animation-play-state:paused!important}


  /* 對白框依序跳出：b1 → b2 → b3；旁白框最後 */
  #ai-comic.js .panel.is-in .b{animation:aic-pop .42s cubic-bezier(.3,1.5,.5,1) both}
#ai-comic.js .panel.is-in .b1{animation-delay:calc(var(--t) + var(--say-at))}
#ai-comic.js .panel.is-in .b2{animation-delay:calc(var(--t) + var(--say-at) + var(--say-gap))}
#ai-comic.js .panel.is-in .b3{animation-delay:calc(var(--t) + var(--say-at) + var(--say-gap)*2)}
#ai-comic.js .panel.is-in .cap{animation:aic-capIn .45s ease-out both;animation-delay:calc(var(--t) + var(--say-at) + var(--say-gap)*var(--nsay,1) + var(--cap-gap))}
#ai-comic.js .p2{--nsay:3}


  /* ── 1 打字（逐格 3 張）、眨眼、煙、哼歌 ── */
  #ai-comic.js .p1.is-in .hb{animation:aic-typeB calc(2.4s*var(--pace)) steps(1,end) infinite var(--t)}
#ai-comic.js .p1.is-in .hc{animation:aic-typeC calc(2.4s*var(--pace)) steps(1,end) infinite var(--t)}
#ai-comic.js .p1 .hb,#ai-comic.js .p1 .hc,#ai-comic.js .p1 .eye,#ai-comic.js .p1 .steam{opacity:0}
#ai-comic.js .p1.is-in .eh{animation:aic-eyeH 6s steps(1,end) infinite calc(var(--t) + 1s)}
#ai-comic.js .p1.is-in .eo{animation:aic-eyeO 6s steps(1,end) infinite calc(var(--t) + 1s)}
#ai-comic.js .p1.is-in .steam{animation:aic-steam 4.2s ease-in-out infinite;transform-origin:50% 100%}
#ai-comic.js .p1.is-in .s2{animation-delay:-1.4s}
#ai-comic.js .p1.is-in .s3{animation-delay:-2.8s}
#ai-comic.js .p1.is-in .n1{animation:aic-note 3.6s ease-out infinite calc(var(--t) + .6s)}
#ai-comic.js .p1.is-in .n2{animation:aic-note 3.6s ease-out infinite calc(var(--t) + 1.8s)}


  /* ── 2 老闆走進來、拿出平板、舉高、對著員工；三人錯開往後仰 ── */
  #ai-comic.js .p2.is-in .bossw{animation:aic-bossIn calc(.8s*var(--pace)) steps(1,end) both var(--t)}
#ai-comic.js .p2.is-in .bL{animation:aic-hide .01s both calc(var(--t) + 1.1s*var(--pace))}
#ai-comic.js .p2.is-in .bM{animation:aic-blip calc(.6s*var(--pace)) steps(1,end) both calc(var(--t) + 1.1s*var(--pace))}
#ai-comic.js .p2.is-in .bH{animation:aic-show .01s both calc(var(--t) + 1.7s*var(--pace))}
#ai-comic.js .p2.is-in .spark{animation:aic-spark .5s ease-out both calc(var(--t) + 1.2s*var(--pace))}
#ai-comic.js .p2.is-in .aj{animation:aic-leanAJ calc(.5s*var(--pace)) steps(1,end) both calc(var(--t) + var(--say-at) + .6s)}
#ai-comic.js .p2.is-in .man{animation:aic-leanMan calc(.5s*var(--pace)) steps(1,end) both calc(var(--t) + var(--say-at) + .9s)}
#ai-comic.js .p2.is-in .cl{animation:aic-backCL calc(.5s*var(--pace)) steps(1,end) both calc(var(--t) + var(--say-at) + 1.2s)}
#ai-comic.js .p2.is-in .k1{animation:aic-bang 1.8s both calc(var(--t) + var(--say-at) + .6s)}
#ai-comic.js .p2.is-in .k2{animation:aic-bang 1.8s both calc(var(--t) + var(--say-at) + .9s)}
#ai-comic.js .p2.is-in .k3{animation:aic-bang 1.8s both calc(var(--t) + var(--say-at) + 1.2s)}
#ai-comic.js .p2.is-in .scr{animation:aic-scr 1.2s steps(1,end) both calc(var(--t) + var(--say-at) + 1.1s)}
#ai-comic.js .p2{--say-at:2s}
#ai-comic.js .p2.is-in .b2{animation-delay:calc(var(--t) + var(--say-at) + 1.9s)}
#ai-comic.js .p2.is-in .b3{animation-delay:calc(var(--t) + var(--say-at) + 1.9s + var(--say-gap))}
#ai-comic.js .p2.is-in .cap{animation-delay:calc(var(--t) + var(--say-at) + 1.9s + var(--say-gap) + var(--cap-gap))}


  /* ── 3 抱頭（頭偶爾更往下沉）、檯燈微閃 ── */
  #ai-comic.js .p3 .head{opacity:0}
#ai-comic.js .p3.is-in .head{animation:aic-headDrop 5s steps(1,end) infinite calc(var(--t) + .5s)}
#ai-comic.js .p3.is-in .lamp{animation:aic-flicker 4.5s linear infinite var(--t)}


  /* ── 4 插線（逐格）→ AI 核心亮起 → 線路流光 ── */
  #ai-comic.js .p4.is-in .plug{animation:aic-hide .01s both calc(var(--t) + .8s*var(--pace))}
#ai-comic.js .p4.is-in .core{animation:aic-coreOn .6s ease-out both calc(var(--t) + .9s*var(--pace)),aic-corePulse 2.4s ease-in-out infinite calc(var(--t) + 1.5s*var(--pace))}
#ai-comic.js .p4.is-in svg.flow{animation:aic-show .4s both calc(var(--t) + 1.1s*var(--pace))}
#ai-comic.js .p4.is-in svg.flow path{animation:aic-flow 1.6s linear infinite}


  /* ── 5 游標移到新按鈕 → 按下 → 按鈕亮 → 掛曆翻頁 ── */
  #ai-comic.js .p5.is-in .cursor{animation:aic-cursorMove calc(1.1s*var(--pace)) cubic-bezier(.4,.1,.2,1) both var(--t),aic-click .3s ease both calc(var(--t) + 1.15s*var(--pace))}
#ai-comic.js .p5.is-in .nog{animation:aic-hide .01s both calc(var(--t) + 1.3s*var(--pace))}
#ai-comic.js .p5.is-in .ring{animation:aic-ring 1.8s ease-out infinite calc(var(--t) + 1.3s*var(--pace))}
#ai-comic.js .p5 .pap{opacity:0}
#ai-comic.js .p5.is-in .nopap{animation:aic-fadeOut .4s both calc(var(--t) + 1.8s*var(--pace))}
#ai-comic.js .p5.is-in .pap{animation:aic-paperFall calc(.9s*var(--pace)) ease-out both calc(var(--t) + 1.8s*var(--pace))}


  /* ── 6 揹起包包 → 看到桌面驚訝 → 老闆比讚 ── */
  #ai-comic.js .p6.is-in .bag{animation:aic-hide .01s both calc(var(--t) + .5s*var(--pace))}
#ai-comic.js .p6.is-in .calm{animation:aic-hide .01s both calc(var(--t) + 1.1s*var(--pace))}
#ai-comic.js .p6.is-in .nothumb{animation:aic-hide .01s both calc(var(--t) + var(--say-at) + .9s)}
#ai-comic.js .p6.is-in .twinkle{animation:aic-twinkle 1.2s ease-out both calc(var(--t) + var(--say-at) + .9s)}}
@keyframes aic-pop{from{opacity:0;transform:scale(.88)}to{opacity:1}}
@keyframes aic-capIn{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
@keyframes aic-hide{from{opacity:1}to{opacity:0}}
@keyframes aic-show{from{opacity:0}to{opacity:1}}
@keyframes aic-fadeOut{from{opacity:1}to{opacity:0}}
@keyframes aic-blip{0%{opacity:0}1%{opacity:1}100%{opacity:0}}
@keyframes aic-typeB{0%{opacity:0}6.6%{opacity:1}13.3%{opacity:0}26.6%{opacity:1}33.3%{opacity:0}46.6%{opacity:1}53.3%{opacity:0}100%{opacity:0}}
@keyframes aic-typeC{0%{opacity:0}13.3%{opacity:1}20%{opacity:0}33.3%{opacity:1}40%{opacity:0}53.3%{opacity:1}60%{opacity:0}100%{opacity:0}}
@keyframes aic-eyeH{0%{opacity:0}48%{opacity:1}50.5%{opacity:0}66%{opacity:1}68.5%,100%{opacity:0}}
@keyframes aic-eyeO{0%{opacity:0}50.5%{opacity:1}66%,100%{opacity:0}}
@keyframes aic-steam{0%{opacity:0;transform:translateY(8%) scale(.92,.9)}30%{opacity:.95}65%{opacity:.7}100%{opacity:0;transform:translateY(-14%) scale(1.08,1.12)}}
@keyframes aic-note{0%{opacity:0;transform:scale(.8)}12%{opacity:1;transform:translate(-4px,-6px)}65%{opacity:1}85%{opacity:0;transform:translate(-22px,-34px) rotate(-14deg)}100%{opacity:0}}
@keyframes aic-bossIn{0%{transform:translateX(9%)}50%{transform:translateX(4.5%)}100%{transform:none}}
@keyframes aic-leanAJ{0%{transform:rotate(4.5deg)}35%{transform:rotate(-2.5deg) translateY(1.5%)}70%{transform:rotate(-1deg) translateY(.6%)}100%{transform:none}}
@keyframes aic-leanMan{0%{transform:rotate(3.5deg)}35%{transform:rotate(-2deg) translateY(1.2%)}70%{transform:rotate(-.7deg) translateY(.4%)}100%{transform:none}}
@keyframes aic-backCL{0%{transform:translateX(4%) rotate(3deg)}35%{transform:translateX(-3%) rotate(-1.5deg) translateY(1%)}70%{transform:translateX(-1%) rotate(-.5deg)}100%{transform:none}}
@keyframes aic-spark{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.4)}}
@keyframes aic-bang{0%{opacity:0;transform:translateY(-14%)}8%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
@keyframes aic-scr{0%{opacity:0}1%{opacity:1;transform:none}25%{transform:rotate(-12deg)}50%{transform:none}75%{transform:rotate(-12deg)}100%{opacity:0}}
@keyframes aic-headDrop{0%{opacity:0}40%{opacity:1}70%,100%{opacity:0}}
@keyframes aic-flicker{0%,100%{opacity:.75}8%{opacity:.75}9%{opacity:.25}10%{opacity:.8}11%{opacity:.4}12%{opacity:.75}55%{opacity:.85}70%{opacity:.7}}
@keyframes aic-coreOn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes aic-corePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.12)}}
@keyframes aic-flow{to{stroke-dashoffset:-168}}
@keyframes aic-cursorMove{0%{opacity:0;transform:translate(-320%,260%)}12%{opacity:1}100%{opacity:1;transform:none}}
@keyframes aic-click{0%{scale:1}40%{scale:.8}100%{scale:1}}
@keyframes aic-ring{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.5)}}
@keyframes aic-paperFall{0%{opacity:0;transform:translateY(-22%) rotate(-8deg)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes aic-twinkle{0%{opacity:0;transform:scale(.4) rotate(-20deg)}30%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1) rotate(10deg)}}