/* GoAskVivi 首頁「AI 互動課」區：Tutor 老師一題小測驗＋扇形書堆（2026-10-04 Vivi 選方向 2B）
   全部規則限縮在 .gavhs 底下；keyframes 一律 gavhs- 前綴；字型用獨立 family 名，不影響首頁其他區塊。 */
@font-face{font-family:'GAVHS Serif';src:url('fonts/gavhs-serif.woff2') format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'GAVHS En';src:url('fonts/gavhs-en-italic.woff2') format('woff2');font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:'GAVHS Hand';src:url('fonts/gavhs-hand.woff2') format('woff2');font-display:swap}
.gavhs{--serif:'GAVHS Serif','Noto Serif TC','Songti TC',serif;--en:'GAVHS En','Cormorant Garamond',Georgia,serif;--hand:'GAVHS Hand',cursive;--sans:'PingFang TC','Noto Sans TC','Heiti TC',sans-serif;--ink:#211c18;--cocoa:#845e41;--gold:#aa8552;--mute:#8d7f70;
 position:relative;background:#f4efe6 url('assets/fine-plaster.webp') center/cover;padding:84px 0 72px;overflow:hidden;color:var(--ink);font-family:var(--sans)}
.gavhs *,.gavhs *:before,.gavhs *:after{box-sizing:border-box}
.gavhs img{display:block;max-width:none}
.gavhs a{text-decoration:none!important}
.gavhs p{margin:0}
.gavhs .in{max-width:1180px;margin:0 auto;padding:0 56px}
.gavhs .top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px}
.gavhs .kick{font-family:var(--en);font-style:italic;font-weight:500;font-size:19px;color:#8a6a45;letter-spacing:.04em;display:flex;align-items:center;gap:14px;margin:0}
.gavhs .kick:after{content:"";width:60px;height:1px;background:#b9a07c}
.gavhs .kick i{font-size:22px;color:var(--gold)}
.gavhs h2.ttl{font-family:var(--serif)!important;font-weight:900!important;font-size:44px!important;line-height:1.2!important;letter-spacing:.03em;margin:10px 0 0!important;padding:0!important;color:var(--ink)!important}
.gavhs .hand{display:block;margin-top:10px;font-family:var(--hand);color:#7b5f45;font-size:19px;letter-spacing:.06em}
.gavhs .more{display:inline-flex;align-items:center;gap:8px;font:600 15px/1.4 var(--sans);color:var(--ink)!important;-webkit-text-fill-color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px;white-space:nowrap}
.gavhs .grid{display:grid;grid-template-columns:minmax(0,450px) minmax(0,1fr);gap:40px;align-items:center}
/* 聊天框 */
.gavhs .chat{height:520px;display:flex;flex-direction:column;background:rgba(255,252,247,.94);border:1px solid #e6dccd;border-radius:22px;box-shadow:0 24px 50px -24px #5a3e2455,0 1px 0 #fff inset}
.gavhs .chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #efe6d9}
.gavhs .chat-head img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 2px 6px #0002}
.gavhs .chat-head strong{font:600 15px/1.3 var(--sans);color:var(--ink)}
.gavhs .dots{margin-left:auto;display:flex;gap:3px}.gavhs .dots i{width:4px;height:4px;border-radius:50%;background:#6b5d50}
.gavhs .convo{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:18px 18px 6px;display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.75}
.gavhs .msg{max-width:88%;padding:12px 16px;border-radius:16px}
.gavhs .msg.t{background:#f1ebe2;border-top-left-radius:6px;color:#3b322a}
.gavhs .msg.s{align-self:flex-end;background:var(--cocoa);color:#fff;border-bottom-right-radius:6px}
.gavhs .msg.typing{display:flex;gap:5px;padding:14px 16px}.gavhs .msg.typing i{width:7px;height:7px;border-radius:50%;background:#a99886;animation:gavhs-blink 1s infinite}.gavhs .msg.typing i:nth-child(2){animation-delay:.15s}.gavhs .msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes gavhs-blink{50%{opacity:.3}}
.gavhs .msg b{font-weight:700}
.gavhs .quick{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin:2px 0 4px}
.gavhs button.qr{all:unset;box-sizing:border-box;border:1px solid #c7a985;background:#fffaf3;color:#6b4c33;border-radius:18px;padding:9px 15px;font:400 14.5px/1.35 var(--sans);cursor:pointer;text-align:left;box-shadow:0 2px 6px #5a3e2412}
.gavhs button.qr:hover{background:#f6ead9}.gavhs button.qr:focus-visible{outline:2px solid var(--cocoa);outline-offset:2px}
.gavhs button.qr.ghost{border-style:dashed;color:var(--mute)}
.gavhs .composer{display:flex;align-items:center;gap:10px;margin:12px 14px 14px;padding:6px 6px 6px 16px;background:#fff;border:1px solid #e3d8c8;border-radius:28px;height:56px}
.gavhs .composer>span:first-child{flex:1}
.gavhs .send{flex:none;width:44px;height:44px;border-radius:50%;background:#c7b6a2;display:flex;align-items:center;justify-content:center}
.gavhs .send svg{width:19px;height:19px;display:block}
.gavhs .msg.rcard{max-width:100%;align-self:stretch;background:#fff;border:1px solid #e6dccd;padding:14px;opacity:0}
.gavhs .msg.rcard.shown{opacity:1;transition:opacity .25s}
.gavhs .rc{display:flex;gap:16px;align-items:center}
.gavhs .rc-book{position:relative;height:118px;flex:none;--bh:118px}
.gavhs .rc-book img{height:100%;width:auto;filter:drop-shadow(0 8px 8px rgba(40,30,20,.2))}
.gavhs .rc-name{font:700 17px/1.4 var(--serif);display:flex;gap:6px;align-items:center;color:var(--ink)}
.gavhs .rc-name em,.gavhs .tagv{font-style:normal;font:500 11px/1.5 var(--sans);color:#6b5d4f;border:1px solid #cdbca5;border-radius:2px;padding:0 5px}
.gavhs .rc-ch{margin:3px 0 0;font-size:13px;color:var(--mute);letter-spacing:.04em}
.gavhs .btn{display:inline-flex;align-items:center;gap:12px;height:42px;padding:0 18px;margin-top:10px;border-radius:2px;background:#171717;color:#fff!important;-webkit-text-fill-color:#fff;font:600 14px/1 var(--sans);letter-spacing:.08em;border:1px solid #171717}
.gavhs .btn svg{width:14px;height:14px}
.gavhs .pop{animation:gavhs-pop .35s ease-out both}
@keyframes gavhs-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 書堆舞台 */
.gavhs .stage{position:relative;height:520px}
.gavhs .books{position:absolute;inset:0}
.gavhs .hb2{position:absolute;left:50%;bottom:150px;--bh:230px;width:170px;margin-left:-85px;display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;transform:translateX(calc(var(--x) + var(--sx,0px))) rotate(var(--r)) scale(var(--s,1));z-index:calc(2 + var(--z));transition:transform .8s cubic-bezier(.3,1.2,.5,1),bottom .8s cubic-bezier(.3,1.2,.5,1),opacity .5s,filter .5s}
.gavhs .hb2:nth-child(1){--x:-120px;--r:-14deg;--z:1}
.gavhs .hb2:nth-child(2){--x:-42px;--r:-5deg;--z:2}
.gavhs .hb2:nth-child(3){--x:40px;--r:5deg;--z:3}
.gavhs .hb2:nth-child(4){--x:118px;--r:14deg;--z:4}
.gavhs .lift{display:block;transition:transform .35s ease}
.gavhs .float{display:block;animation:gavhs-breathe 5.2s ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s)}
@keyframes gavhs-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.gavhs .bk{position:relative;display:block;height:var(--bh)}
.gavhs .bk img{height:100%;width:auto;filter:drop-shadow(0 14px 12px rgba(40,30,20,.24));transition:filter .6s}
.gavhs .cover{position:absolute;left:18%;right:6%;top:14%;font:500 calc(var(--bh)*.084)/1.3 var(--serif);color:#d9b66c;pointer-events:none;text-align:center}
.gavhs .rib{position:absolute;right:2%;bottom:9%;font-style:normal;font:600 calc(var(--bh)*.05)/1 var(--sans);letter-spacing:.06em;background:#f6efe2;color:#5b4632;padding:4px 7px;border-radius:2px;box-shadow:0 2px 6px #0003}
.gavhs .rib.soon{background:#3b322a;color:#f1e6d4}
.gavhs .bk:after{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;background:linear-gradient(115deg,transparent 38%,rgba(235,240,250,.55) 46%,rgba(255,255,255,.92) 50%,rgba(220,228,240,.5) 54%,transparent 62%) no-repeat;background-size:300% 100%;background-position:120% 0;mix-blend-mode:screen;opacity:0}
@keyframes gavhs-shine{0%{opacity:1;background-position:120% 0}85%{opacity:1;background-position:-20% 0}100%{opacity:0;background-position:-20% 0}}
.gavhs .hb2.is-shine .bk:after{animation:gavhs-shine 1.1s cubic-bezier(.4,0,.2,1) .15s both}
@media(hover:hover){.gavhs a.hb2:hover .lift{transform:translateY(-8px)}.gavhs a.hb2:hover .bk:after{opacity:1;background-position:-20% 0;transition:background-position .9s cubic-bezier(.4,0,.2,1),opacity .15s}}
.gavhs .hb2.soon{cursor:default}
.gavhs .base{position:absolute;left:50%;width:440px;margin-left:-220px;bottom:128px;height:30px;background:url('assets/oak-shelf.webp') center/100% 100% no-repeat;filter:drop-shadow(0 10px 10px #5a3e2433);z-index:1}
.gavhs .sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.gavhs .sweep:after{content:"";position:absolute;top:-40%;bottom:-40%;width:22%;left:-30%;background:linear-gradient(100deg,transparent,rgba(255,246,222,.75),transparent);transform:skewX(-20deg);animation:gavhs-sweep 7s ease-in-out infinite}
@keyframes gavhs-sweep{0%,55%{left:-30%}100%{left:120%}}
.gavhs .plinth{position:absolute;left:50%;width:240px;margin-left:-120px;bottom:92px;height:58px;border-radius:3px;background:linear-gradient(#e7dccb,#cdbca3);box-shadow:0 16px 22px -10px #5a3e2466,inset 0 1px #fff8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;opacity:0;transform:translateY(16px);transition:opacity .5s .15s,transform .6s .15s;z-index:8}
.gavhs .pl-name{font:600 14.5px/1.3 var(--serif);color:#3b2d20;position:relative}
.gavhs .pl-price{font:700 12px/1.4 var(--sans);color:#c6532e;letter-spacing:.06em;display:flex;gap:5px;align-items:center;position:relative}
.gavhs .has-pick .plinth{opacity:1;transform:none}
.gavhs .has-pick .hb2{--s:.9}
.gavhs .hb2.dim{opacity:.62;filter:saturate(.75)}
.gavhs .has-pick .hb2.picked{--x:0px;--r:0deg;--s:1.45;--z:9;bottom:150px}
.gavhs .hb2.picked .bk img{filter:drop-shadow(0 30px 22px rgba(40,30,20,.38)) drop-shadow(0 6px 6px rgba(40,30,20,.2))}
.gavhs .fx{position:absolute;inset:0;pointer-events:none;z-index:12}
.gavhs .fx i{position:absolute;width:var(--sz);height:var(--sz);margin:calc(var(--sz)/-2);border-radius:50%;background:radial-gradient(circle,#fff6d6,#d9b66c 60%,transparent 70%);box-shadow:0 0 6px #e9c77a;animation:gavhs-spark .95s ease-out var(--dl) both}
@keyframes gavhs-spark{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
/* 卡片從書裡飛出（掛在 body 上） */
.gavhs-ghost{position:fixed;z-index:9999;pointer-events:none;background:#fff;border:1px solid #e6dccd;border-radius:6px;box-shadow:0 20px 40px -12px #3a281866;display:flex;align-items:center;padding:6px;overflow:hidden;transition:left .6s cubic-bezier(.5,0,.2,1),top .6s cubic-bezier(.5,0,.2,1),width .6s cubic-bezier(.5,0,.2,1),height .6s cubic-bezier(.5,0,.2,1),opacity .3s}
.gavhs-ghost img{height:100%;width:auto;max-width:none}
.gavhs-ghost.go{animation:gavhs-flip .6s ease-in-out both}
.gavhs-ghost.out{opacity:0}
@keyframes gavhs-flip{0%{transform:perspective(700px) rotateY(0) scale(1)}50%{transform:perspective(700px) rotateY(75deg) scale(1.05)}100%{transform:perspective(700px) rotateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.gavhs .float,.gavhs .sweep:after,.gavhs .fx i,.gavhs .hb2.is-shine .bk:after,.gavhs .pop{animation:none}.gavhs .hb2,.gavhs .lift,.gavhs .plinth{transition:none}}
@media(max-width:900px){.gavhs .in{padding:0 28px}}
@media(max-width:700px){
 .gavhs{padding:52px 0 40px}.gavhs .in{padding:0 16px}
 .gavhs .top{display:block;margin-bottom:24px}.gavhs h2.ttl{font-size:32px!important}.gavhs .hand{font-size:16px}.gavhs .more{margin-top:14px}.gavhs .kick{font-size:16px}.gavhs .kick:after{width:34px}
 .gavhs .grid{grid-template-columns:minmax(0,1fr);gap:18px}
 .gavhs .chat{height:470px}.gavhs .convo{font-size:14.5px;padding:14px 14px 4px}.gavhs .msg{max-width:92%}
 .gavhs .stage{height:360px}
 .gavhs .hb2{--bh:150px;width:112px;margin-left:-56px;bottom:96px}
 .gavhs .hb2:nth-child(1){--x:-78px}.gavhs .hb2:nth-child(2){--x:-27px}.gavhs .hb2:nth-child(3){--x:26px}.gavhs .hb2:nth-child(4){--x:77px}
 .gavhs .base{width:300px;margin-left:-150px;bottom:80px;height:22px}
 .gavhs .has-pick .hb2{--s:.88}
 .gavhs .has-pick .hb2.picked{--x:0px;--s:1.5;bottom:94px}
 .gavhs .plinth{width:170px;margin-left:-85px;bottom:52px;height:42px}
 .gavhs .pl-name{font-size:12.5px}.gavhs .pl-price{font-size:11px}
}
/* v2 三題版：進度、目前最可能推薦的書輕亮一下、手機氣泡 ≥44px */
.gavhs .prog{margin-left:auto;font:600 12px/1 var(--sans);letter-spacing:.08em;color:var(--cocoa);background:#f3e9da;border-radius:12px;padding:6px 10px}
.gavhs .prog[hidden]{display:none}
.gavhs .hb2.lead .bk img{filter:drop-shadow(0 0 14px rgba(233,199,122,.75)) drop-shadow(0 14px 12px rgba(40,30,20,.24))}
.gavhs .hb2.nudge .lift{animation:gavhs-nudge .7s cubic-bezier(.3,1.4,.5,1)}
@keyframes gavhs-nudge{0%{transform:translateY(0)}40%{transform:translateY(-14px)}100%{transform:translateY(0)}}
.gavhs button.qr{min-height:44px;display:inline-flex;align-items:center}
@media(prefers-reduced-motion:reduce){.gavhs .hb2.nudge .lift{animation:none}}

/* 2026-10-04 Vivi 選手機提案 A：放大扇形＋緊貼對話框（只影響 ≤700px，電腦版不變） */
@media(max-width:700px){
 .gavhs{padding-bottom:20px}
 .gavhs .grid{gap:6px}
 .gavhs .stage{height:262px}
 .gavhs .hb2{--bh:178px;width:128px;margin-left:-64px;bottom:44px}
 .gavhs .hb2:nth-child(1){--x:-102px;--r:-13deg}.gavhs .hb2:nth-child(2){--x:-35px;--r:-4.5deg}.gavhs .hb2:nth-child(3){--x:35px;--r:4.5deg}.gavhs .hb2:nth-child(4){--x:102px;--r:13deg}
 .gavhs .base{width:350px;margin-left:-175px;bottom:30px;height:22px}
 .gavhs .has-pick .hb2{--s:.9}
 .gavhs .has-pick .hb2.picked{--x:0px;--s:1.22;bottom:50px}
 .gavhs .plinth{width:190px;margin-left:-95px;bottom:10px;height:42px}
}