/* 知識+ /qa/ 主頁動態 D2：三張廣告各自的進場動畫、Katsuji 片頭＋問卷、流光名條（莉亞／亦然）、區塊標題波浪＋霓虹呼吸外框。
   疊在 home.css 後面；JS 在 d2.js。時間軸：每張廣告換進來時 d2.js 在該張加 .run，CSS animation-delay 排好每一步。
   減少動態：沒有 .run 的預設版面就是「完整文字＋最後一格」，@media (prefers-reduced-motion) 再補排版；名條不流動、霓虹只留靜態外框。 */

/* ---------- 橫幅：要放得下問卷，比 D1 高一點 ---------- */
.qh-banner{--bh:clamp(168px,12vw,176px);height:var(--bh)}
.qh-banner.hold .qh-slide *,.qh-banner.hold .qh-slide *::before,.qh-banner.hold .qh-slide *::after{animation-play-state:paused!important}
.qh-dots{left:16px;transform:none;bottom:6px}
.ad-px svg{display:block;shape-rendering:crispEdges}
.c-b{fill:oklch(42% .07 50)}[data-theme="night"] .c-b{fill:oklch(62% .09 55)}

/* ---------- 波浪字（.wc 外層給進場、.wi 內層給 d2.js 的波浪） ---------- */
.wc,.wi{display:inline-block;white-space:pre}
.wi{transform-origin:50% 80%}

/* ---------- 第 1 張：請我喝咖啡（夜裡的咖啡店窗邊：整條就是一幅像素場景，四邊貼齊） ----------
   底 #2a1e33、窗內 #ffcf6b、窗格線 #4a3550、吧台 #7a4a2e／亮邊 #a8693f、字 #fff3e0（對底約 14:1）。窗放在右 1/3，字放在左 2/3，字不壓在亮窗上。 */
#ad-bmc{display:block;padding:0;background:#2a1e33;color:#fff3e0}
.ad-scene{position:absolute;inset:0;overflow:hidden}
.ad-win{position:absolute;top:9%;height:46%;width:12%;box-sizing:border-box;border:4px solid #4a3550;
  background:linear-gradient(#4a3550,#4a3550) 50% 0/4px 100% no-repeat,linear-gradient(#4a3550,#4a3550) 0 50%/100% 4px no-repeat,#ffcf6b}
.ad-w1{left:54%}.ad-w2{left:84%}
.ad-bar{position:absolute;left:0;right:0;bottom:0;height:18%;background:#7a4a2e;border-top:4px solid #a8693f;box-sizing:border-box}
.ad-tx{position:absolute;left:0;top:0;bottom:0;width:66.6%;display:grid;place-items:center;white-space:nowrap;min-width:0;padding-bottom:6%}
.ad-l{font:900 clamp(24px,4.2vw,46px)/1.25 var(--serif);letter-spacing:.08em;color:#fff3e0}
.ad-l1{grid-area:1/1;opacity:0}.ad-l2{grid-area:2/1;opacity:0}.ad-l3{grid-area:1/1/3/2}
.ad-mini{display:inline-block;margin-left:.12em;vertical-align:-.1em;line-height:0}
.ad-mini svg{display:block}
/* 場景裡的捐款箱（取代大咖啡杯）：像素箱體葡萄柚粉 #e8749a、深邊 #8a3a5a、正面愛心、頂部深色投幣口；高約橫幅 55%（手機 45%）。
   d2.js 的 buildBox 設 --bxh（箱高）、--cell、--cs（零錢直徑）、--fall（零錢掉落距離）。
   時間軸（從頁面換進來算）：箱子 1.8s 彈出 → 零錢 2.0／2.35／2.7s 各掉 .5s（落地 2.5／2.85／3.2s，落地時箱子下壓 2px＋投幣口白閃）→ 3.2s 起愛心從投幣口冒出、1s 飄出上緣 → 4.2s 跑完，再停 3 秒（DUR 7200） */
#ad-bmc .c-o{fill:#a8693f}#ad-bmc .c-w{fill:#fff3e0}#ad-bmc .c-b{fill:#7a4a2e}
.bx-o{fill:#8a3a5a}.bx-p{fill:#e8749a}.bx-s{fill:#2a1e33}.bx-h{fill:#fff3e0}.cn-g{fill:#ffcf6b}.cn-o{fill:#a8781f}
.ad-cup{position:absolute;left:75%;bottom:6%;width:var(--cw);height:var(--bxh);margin-left:calc(var(--cw) * -.5)}
.ad-boxw{position:absolute;inset:0;transform-origin:50% 100%}
.ad-boxw svg,.ad-coin svg{display:block}
.ad-flash{position:absolute;left:calc(var(--cell) * 3);top:var(--cell);width:calc(var(--cell) * 9);height:var(--cell);background:#fff;opacity:0}
.ad-coin{position:absolute;left:50%;bottom:calc(var(--bxh) - var(--cs) * .5);width:var(--cs);height:var(--cs);margin-left:calc(var(--cs) * -.5);opacity:0;line-height:0}
.ad-coin svg{width:100%;height:100%}
.ad-hh{position:absolute;left:50%;bottom:calc(var(--bxh) - var(--cell) * 1.5);width:calc(var(--cell) * 4);margin-left:calc(var(--cell) * -2);opacity:0;overflow:visible;fill:var(--px-p);stroke:#fff3e0;stroke-width:3.2;stroke-linejoin:round}
.qh-slide.run .ad-boxw{animation:ad-pop-box .6s 1.8s cubic-bezier(.3,1.4,.5,1) both}
@keyframes ad-pop-box{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.qh-slide.run .ad-bumpy{animation:ad-bump .25s 2.5s both,ad-bump .25s 2.85s both,ad-bump .25s 3.2s both}
@keyframes ad-bump{0%{transform:translateY(0)}35%{transform:translateY(2px)}100%{transform:translateY(0)}}
.qh-slide.run .ad-flash{animation:ad-fl .2s 2.5s both,ad-fl .2s 2.85s both,ad-fl .2s 3.2s both}
@keyframes ad-fl{0%{opacity:0}25%{opacity:.95}100%{opacity:0}}
.qh-slide.run .ad-coin{animation:ad-drop .5s cubic-bezier(.5,0,.9,.6) both}
.qh-slide.run .ad-c1{animation-delay:2s}.qh-slide.run .ad-c2{animation-delay:2.35s}.qh-slide.run .ad-c3{animation-delay:2.7s}
@keyframes ad-drop{0%{opacity:0;transform:translateY(calc(var(--fall) * -1))}1%{opacity:1}84%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(calc(var(--cs) * .3)) scale(.3)}}
.qh-slide.run .ad-hh{animation:ad-hup 1s 3.2s linear both}
@keyframes ad-hup{0%{opacity:0;transform:translateY(0) scale(.3)}12%{opacity:1;transform:translateY(calc(var(--cell) * -1)) scale(1)}100%{opacity:1;transform:translateY(calc(var(--bh) * -.8)) scale(1.1)}}

/* ---------- 第 2 張：Katsuji 片頭＋問卷 ---------- */
#ad-kat{display:block}
.ad-vid{position:absolute;inset:0;display:none;background:oklch(95% .02 70)}
.ad-vid video,.ad-last{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ad-last{display:none}
.ad-hit{all:unset;position:absolute;inset:0;z-index:2;cursor:var(--cur-hand,pointer);display:none}
.ad-hit:focus-visible{outline:3px solid var(--pink);outline-offset:-6px}
#ad-kat.ph-vid .ad-vid{display:block}
#ad-kat.ph-vid .ad-hit{display:block}
#ad-kat.ph-vid .ad-poll{visibility:hidden;opacity:0}
.ad-poll{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:6px clamp(14px,4vw,60px);color:#fff3e0;pointer-events:none;transition:opacity .35s;overflow:hidden;background:#2a1e33}
/* 問卷底：最後一格放大鋪滿、模糊 8px，上面蓋一層墨紫 .72；字都用奶油白 */
.ad-pbg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ad-pbg::after{content:"";position:absolute;inset:0;background:rgba(42,30,51,.72)}
.ad-pbg img{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);max-width:none;object-fit:cover;filter:blur(8px)}
.ad-poll>*{pointer-events:auto}
.ad-pstat{margin:0;font:700 13.5px/1.4 var(--sans);letter-spacing:.06em;color:#fff3e0}
.ad-pstat::before{content:"✦ ";color:var(--px-p)}
.ad-q{margin:0;font:900 clamp(15px,1.7vw,19px)/1.35 var(--serif);letter-spacing:.04em;padding-right:52px}
.ad-opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 10px}
.ad-opt{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:8px;min-height:30px;width:100%;padding:2px 10px 2px 6px;border:2px solid rgba(255,243,224,.6);background:rgba(26,18,32,.6);color:#fff3e0;font:500 14.5px/1.3 var(--sans);cursor:var(--cur-hand,pointer);overflow:hidden}
.ad-opt:hover{background:rgba(26,18,32,.8);border-color:var(--px-p)}
.ad-opt:focus-visible{outline:3px solid var(--pink);outline-offset:1px}
.ad-opt i{position:relative;z-index:1;flex:none;font:400 13px/1.5 "Cubic 11",var(--sans);font-style:normal;padding:0 6px;background:var(--px-p);color:oklch(18% .04 330)}
.ad-opt .ad-t{position:relative;z-index:1;flex:1;min-width:0}
.ad-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--px-p);opacity:.42;transition:width .6s var(--ease,ease)}
.ad-pct,.ad-me{position:relative;z-index:1;flex:none;display:none;font:700 13px/1.3 var(--sans);color:#fff3e0}
.ad-poll.done .ad-opt{cursor:default;pointer-events:none}
.ad-poll.done .ad-opt.me{border-color:var(--px-p);box-shadow:0 0 0 1px var(--px-p)}
.ad-poll.done .ad-opt.me .ad-me{display:inline}
.ad-poll.has .ad-pct{display:inline}
.ad-foot{display:flex;justify-content:flex-end;min-height:24px}
.ad-sub{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border:2px solid var(--px-o);border-radius:6px;background:var(--qh-btn);background-size:200% 100%;color:var(--qh-btn-ink);font:700 13px/1.2 var(--sans);letter-spacing:.1em;box-shadow:0 2px 0 var(--px-o);cursor:var(--cur-hand,pointer)}
.ad-sub:hover{background-position:100% 0}
.ad-sub:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
[data-theme="night"] .ad-sub{box-shadow:0 0 10px oklch(74% .17 352 / .5)}

/* ---------- 第 3 張：招租招牌（整條橫幅就是招牌：深色底鋪滿含圓角，燈泡沿最外圈等距排；字高約橫幅 45%，手機兩行各約 28%） ---------- */
#ad-rent{display:block;padding:0;background:oklch(20% .035 330)}
.ad-sign{position:absolute;inset:0;display:grid;place-items:center;background:oklch(20% .035 330);box-shadow:inset 0 0 40px oklch(10% .03 330),inset 0 0 0 3px oklch(36% .05 330)}
.ad-bulbs{position:absolute;inset:0;pointer-events:none}
.ad-bulb{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:oklch(90% .17 92);box-shadow:0 0 6px 2px oklch(88% .17 90 / .85),0 0 14px 4px oklch(84% .16 85 / .5)}
.ad-sign-tx{display:flex;flex-wrap:wrap;justify-content:center;white-space:nowrap;font-size:calc(var(--bh) * .45);line-height:1.15;font-weight:900;font-family:var(--serif);letter-spacing:.1em;color:oklch(94% .12 92);text-shadow:0 0 6px oklch(90% .16 90),0 0 16px oklch(84% .16 85 / .8)}
.ad-br{display:none}
.qh-slide.run .ad-bulb{animation:ad-bulb .3s both;animation-delay:calc(var(--i) * 62ms)}
@keyframes ad-bulb{from{background:oklch(34% .04 80);box-shadow:none}to{background:oklch(90% .17 92);box-shadow:0 0 6px 2px oklch(88% .17 90 / .85),0 0 14px 4px oklch(84% .16 85 / .5)}}
.qh-slide.run .ad-sign-tx .wc{animation:ad-char .3s both;animation-delay:calc(1.35s + var(--i) * .14s)}
@keyframes ad-char{from{color:oklch(30% .03 330);text-shadow:none}to{color:oklch(94% .12 92);text-shadow:0 0 6px oklch(90% .16 90),0 0 16px oklch(84% .16 85 / .8)}}
.qh-slide.run .ad-sign{animation:ad-flash .5s 2.55s ease-in-out}
@keyframes ad-flash{0%,100%{filter:none}35%{filter:brightness(1.9) saturate(1.25)}65%{filter:brightness(1.1)}}

/* ---------- 流光名條：莉亞（葡萄柚粉→珊瑚→暖金）、亦然（月光銀藍→淡紫→白）；沒有底板、邊框、內距，只有流光漸層字 ----------
   日／夜各一組色（--np*）：日間深色字在淺卡片上、夜間亮色字在深卡片上；漸層每 6 秒平移 120px，同一個動畫裡每 6 秒有一道掃光從左掃到右。
   掃光夜間白色半透明、日間白色 .55，只在掃過的瞬間提亮（不算對比）。 */
.qh{--np-shine:oklch(100% 0 0 / .55);
  --np-rb1:#b8326a;--np-rb2:#b5452e;--np-rb3:#8a6200;
  --np-mn1:#3b5b8c;--np-mn2:#6a4c9c;--np-mn3:#4a3a6e}
[data-theme="night"] .qh{--np-shine:oklch(100% 0 0 / .9);
  --np-rb1:#ff8fb8;--np-rb2:#ff9e85;--np-rb3:#ffd36e;
  --np-mn1:#a9c4ff;--np-mn2:#d4b8ff;--np-mn3:#ffffff}
.qh .tag-rainbow,.qh .tag-moon{
  padding:0;border:0;border-radius:0;box-shadow:none;font-weight:800;
  color:transparent;-webkit-text-fill-color:transparent;
  background:
    linear-gradient(104deg,transparent 0 38%,var(--np-shine) 50%,transparent 62% 100%) -140% 0 / 55% 100% no-repeat,
    linear-gradient(90deg,var(--np1),var(--np2),var(--np3),var(--np1)) 0 0 / 120px 100% repeat-x;
  -webkit-background-clip:text,text;background-clip:text,text;animation:np-flow 6s linear infinite}
.qh .tag-rainbow{--np1:var(--np-rb1);--np2:var(--np-rb2);--np3:var(--np-rb3)}
.qh .tag-moon{--np1:var(--np-mn1);--np2:var(--np-mn2);--np3:var(--np-mn3);animation-delay:-3s}
@keyframes np-flow{
  0%{background-position:-140% 0,0 0}
  20%{background-position:240% 0,24px 0}
  100%{background-position:240% 0,120px 0}}
.qh .tag-candy,.qh .tag-aurora,.qh .tag-soda{animation:none}

/* ---------- 區塊：霓虹外框呼吸（日間粉紫珠光、夜間粉紫霓虹）；d2.js 加 .glow／.gfade ---------- */
@property --gp{syntax:"<number>";inherits:false;initial-value:0}
@property --gg{syntax:"<number>";inherits:false;initial-value:0}
.qh{--gl1:oklch(60% .18 325);--gl2:oklch(78% .13 315 / .8);--gl3:oklch(86% .08 305 / .55)}
[data-theme="night"] .qh{--gl1:oklch(74% .22 335);--gl2:oklch(66% .26 325 / .9);--gl3:oklch(62% .22 305 / .55)}
.qh-tip{position:relative}
.qh-box::after,.qh-tip::after{content:"";position:absolute;inset:-5px;border-radius:10px;pointer-events:none;z-index:3;
  border:2px solid var(--gl1);
  box-shadow:0 0 calc(8px + 14px * var(--gp)) var(--gl2),inset 0 0 calc(5px + 11px * var(--gp)) var(--gl3);
  opacity:calc(var(--gg) * (.5 + .5 * var(--gp)));transition:--gg .5s ease}
.qh-box.glow::after,.qh-tip.glow::after{--gg:1}
.qh-box.glow::after,.qh-box.gfade::after,.qh-tip.glow::after,.qh-tip.gfade::after{animation:gl-breathe 2.4s ease-in-out infinite}
@keyframes gl-breathe{0%,100%{--gp:0}50%{--gp:1}}
.qh-bh .wc,.qh-rent-tx b .wc{display:inline-block}

/* ---------- 知識報：滑過（電腦）／捲到正中間（手機，d2.js 加 .lit）那一期，標題變流光字（沿用名條 np-flow；知識報專用漸層＝莉亞×亦然名條色混合） ---------- */
.qh{--zs1:#b8326a;--zs2:#6a4c9c;--zs3:#3b5b8c}
[data-theme="night"] .qh{--zs1:#ff8fb8;--zs2:#d4b8ff;--zs3:#a9c4ff}
.qh-issues li.lit b{color:transparent;-webkit-text-fill-color:transparent;background:
    linear-gradient(104deg,transparent 0 38%,var(--np-shine) 50%,transparent 62% 100%) -140% 0 / 55% 100% no-repeat,
    linear-gradient(90deg,var(--zs1),var(--zs2),var(--zs3),var(--zs1)) 0 0 / 120px 100% repeat-x;
  -webkit-background-clip:text,text;background-clip:text,text;animation:np-flow 6s linear infinite}
@media (hover:hover){
  .qh-issues li:hover b{color:transparent;-webkit-text-fill-color:transparent;background:
    linear-gradient(104deg,transparent 0 38%,var(--np-shine) 50%,transparent 62% 100%) -140% 0 / 55% 100% no-repeat,
    linear-gradient(90deg,var(--zs1),var(--zs2),var(--zs3),var(--zs1)) 0 0 / 120px 100% repeat-x;
  -webkit-background-clip:text,text;background-clip:text,text;animation:np-flow 6s linear infinite}
}
@media (prefers-reduced-motion:reduce){
  .qh-issues li.lit b,.qh-issues li:hover b{animation:none;background:linear-gradient(90deg,var(--zs1),var(--zs2),var(--zs3)) 0 0 / 100% 100% no-repeat;-webkit-background-clip:text;background-clip:text}
}

/* ---------- 手機 ---------- */
@media (max-width:640px){
  .qh-banner{height:212px}
  .qh-adtag{top:6px;bottom:auto;left:6px;right:auto}
  .qh-dots{left:auto;right:auto;left:50%;transform:translateX(-50%)}
  .ad-poll{padding:6px 12px 6px;gap:3px}
  .ad-q{padding-right:0;font-size:15px;text-indent:46px}
  .ad-opts{grid-template-columns:1fr;gap:4px}
  .ad-opt{min-height:28px;font-size:13.5px}
  .ad-pstat{font-size:13px;padding-left:44px}
  .qh-banner{--bh:212px}
  .ad-tx{width:52%;padding-left:8px}
  .ad-l{font-size:clamp(15px,5vw,22px);letter-spacing:.04em}
  .ad-cup{left:auto;right:3%;bottom:6%;margin-left:0}
  .ad-win{top:8%;height:42%;width:16%}.ad-w1{left:50%}.ad-w2{left:80%}
  .ad-sign-tx{font-size:calc(var(--bh) * .28);letter-spacing:.04em;max-width:100%}
  .ad-br{display:block;flex-basis:100%;height:0}
}

/* ---------- 減少動態：廣告直接顯示完整文字與最後一格；名條不流動；霓虹只有靜態外框 ---------- */
@media (prefers-reduced-motion:reduce){
  .ad-tx{grid-auto-flow:row;gap:0}
  .ad-l1,.ad-l2,.ad-l3{grid-area:auto;opacity:1}
  .ad-l1,.ad-l2{font-size:clamp(16px,2.2vw,22px)}
  .ad-l3 .wc{animation:none!important}
  .ad-boxw,.ad-bumpy{animation:none!important}
  .ad-coin{display:none}
  .ad-hh{animation:none!important;opacity:1;bottom:calc(var(--bxh) + 3px)}
  #ad-kat .ad-vid{display:block!important;inset:0 60% 0 0}
  #ad-kat .ad-vid video{display:none}
  #ad-kat .ad-last{display:block}
  #ad-kat .ad-hit{display:block!important;inset:0 60% 0 0}
  #ad-kat .ad-poll{visibility:visible!important;opacity:1!important;left:40%}
  .qh .tag-rainbow,.qh .tag-moon{animation:none;background-position:-140% 0,0 0}
  .qh-box.glow::after,.qh-tip.glow::after{--gg:1;--gp:.35}
}
@media (prefers-reduced-motion:reduce) and (max-width:640px){
  #ad-kat .ad-vid,#ad-kat .ad-hit{display:none!important}
  #ad-kat .ad-poll{left:0}
}

/* ---------- 「知識＋」標誌字：M PLUS Rounded 1c Black（Google Fonts，SIL OFL；字重 900、用 text= 只載這幾個字，index.html 的 <link>）----------
   「知識」用網站墨色（夜間自動換成夜間主要文字色）、「＋」葡萄柚粉；不用 text-shadow 加粗，Black 本身夠粗。電腦 48px、手機 36px。 */
.qh-logo{font:900 48px/1 "M PLUS Rounded 1c","Noto Sans TC",sans-serif;letter-spacing:.04em;color:var(--ink)}
.qh-logo i{font-style:normal;color:var(--qh-link)}
@media (max-width:560px){.qh-logo{font-size:36px}}