/* 微動效疊加層：只做視覺潤飾，不改版面、資料或功能。
   css/app.css 是受測試保護的凍結基準，加強一律寫在這裡（最後載入）。
   進場動畫用 backwards 填充，結束後不留 transform，不會蓋掉 app.css 的 hover／active。 */
:root{--ease-pop:cubic-bezier(.2,.9,.3,1.2);--ease-out:cubic-bezier(.22,.8,.3,1)}

/* ---------- 過渡：狀態切換有緩衝 ---------- */
.btn.btn-cartoon{transition:transform .1s,box-shadow .1s,background-color .15s,filter .15s}
.navtabs button,.sitelinks a{transition:transform .1s,box-shadow .1s,background-color .2s}
.opt,.chip{transition:transform .1s,box-shadow .1s,background-color .2s,color .2s,opacity .25s}
.avatarpick button,.examdots button{transition:transform .15s var(--ease-pop),background-color .2s}
.hero,.unit-card{transition:transform .2s var(--ease-pop),box-shadow .2s}
.avatar,.brand .logo,.unit-card .medal,.badgecard .medal,#cardCanvas{transition:transform .3s var(--ease-pop)}
.awe-footer a{transition:color .15s}

/* 目前所在的分頁呈按下狀；首頁名片可點，補上按壓回饋 */
.navtabs button.active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.hero:active{transform:translateY(3px);box-shadow:0 3px 0 var(--ink)}

/* ---------- 鍵盤焦點 ---------- */
.btn.btn-cartoon:focus-visible,.navtabs button:focus-visible,.sitelinks a:focus-visible,.opt:focus-visible,
.chip:focus-visible,.avatarpick button:focus-visible,.examdots button:focus-visible{outline:4px solid var(--blue);outline-offset:3px}

/* ---------- 滑鼠 hover（觸控裝置不套用，避免點完卡在 hover） ---------- */
@media (hover:hover){
  /* 抬升後元件上移，游標停在底緣會脫離 :hover 而抖動；用一條透明延伸帶補回命中範圍 */
  .btn.btn-cartoon,.opt,.chip,.navtabs button,.sitelinks a,.hero{position:relative}
  .btn.btn-cartoon::after,.opt::after,.chip::after,.navtabs button::after,.sitelinks a::after,.hero::after,.unit-card::after{
    content:'';position:absolute;left:0;right:0;top:100%;height:6px;
  }
  .btn.btn-cartoon:hover:not(:disabled):not(:active){transform:translateY(-2px);box-shadow:0 6px 0 var(--ink);filter:brightness(1.04)}
  .opt:hover:not(:disabled):not(:active),.chip:hover:not(:disabled):not(:active){transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
  .navtabs button:hover:not(.active):not(:active),.sitelinks a:hover:not(:active){transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
  .hero:hover:not(:active){transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}
  .unit-card:hover:not(:active){box-shadow:0 10px 0 var(--ink)}
  .hero:hover .avatar{transform:rotate(-8deg) scale(1.08)}
  .unit-card:hover .medal,.badgecard:hover .medal{transform:rotate(-8deg) scale(1.08)}
  .brand:hover .logo{transform:rotate(-6deg) scale(1.06)}
  .avatarpick button:hover:not(.sel):not(:active){transform:translateY(-2px) scale(1.08)}
  .examdots button:hover:not(:active){transform:scale(1.15)}
  #cardCanvas:hover{transform:scale(1.02) rotate(-.6deg)}
}

/* ---------- 動畫 ---------- */
@keyframes mo-rise{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes mo-slide{from{opacity:0;transform:translateX(-10px)}}
@keyframes mo-drop{from{opacity:0;transform:translateY(-10px)}}
@keyframes mo-bump{40%{transform:scale(1.02)}}
@keyframes mo-pop{40%{transform:scale(1.12)}}
@keyframes mo-pop-in{from{opacity:0;transform:scale(.4)}60%{transform:scale(1.15)}}
@keyframes mo-medal-in{from{opacity:0;transform:scale(.3) rotate(-30deg)}60%{transform:scale(1.12) rotate(6deg)}}
@keyframes mo-deal{from{opacity:0;transform:translateY(24px) rotate(-4deg) scale(.94)}}
@keyframes mo-float{50%{transform:translateY(-6px) rotate(4deg)}}
@keyframes mo-ping{from{opacity:.7;transform:scale(1)}70%,to{opacity:0;transform:scale(1.4)}}
@keyframes mo-sheen{from{background-position:150% 0}50%,to{background-position:-50% 0}}
@keyframes mo-fill{from{width:0}}
@keyframes mo-mark{from{background-size:0 100%}}

@media (prefers-reduced-motion:no-preference){
  /* 登入頁與儲存通知 */
  #v-login .text-center>div:first-child{animation:mo-float 3.2s ease-in-out infinite}
  #loginChoices>*{animation:mo-rise .35s var(--ease-out) backwards}
  #storageNotice{animation:mo-drop .3s var(--ease-out)}

  /* 首頁、徽章牆：卡片依序翻進來 */
  #v-home .hero,#v-home .wrongbook,:is(#v-home,#v-badges) .row>*{animation:mo-rise .45s var(--ease-out) backwards}
  #v-home .wrongbook{animation-delay:.5s}
  :is(#v-home,#v-badges) .row>:nth-child(1){animation-delay:.04s}
  :is(#v-home,#v-badges) .row>:nth-child(2){animation-delay:.08s}
  :is(#v-home,#v-badges) .row>:nth-child(3){animation-delay:.12s}
  :is(#v-home,#v-badges) .row>:nth-child(4){animation-delay:.16s}
  :is(#v-home,#v-badges) .row>:nth-child(5){animation-delay:.2s}
  :is(#v-home,#v-badges) .row>:nth-child(6){animation-delay:.24s}
  :is(#v-home,#v-badges) .row>:nth-child(7){animation-delay:.28s}
  :is(#v-home,#v-badges) .row>:nth-child(8){animation-delay:.32s}
  :is(#v-home,#v-badges) .row>:nth-child(9){animation-delay:.36s}
  :is(#v-home,#v-badges) .row>:nth-child(10){animation-delay:.4s}
  :is(#v-home,#v-badges) .row>:nth-child(11){animation-delay:.44s}
  :is(#v-home,#v-badges) .row>:nth-child(12){animation-delay:.48s}
  :is(#v-home,#v-badges) .row>:nth-child(n+13){animation-delay:.52s}
  .tiers span.got{animation:mo-pop-in .45s var(--ease-pop) backwards}
  .tiers span.got:nth-child(1){animation-delay:.35s}
  .tiers span.got:nth-child(2){animation-delay:.45s}
  .tiers span.got:nth-child(3){animation-delay:.55s}

  /* 進度條：首頁進場時填滿，並定時掃過一道亮光 */
  .progress.chunky .progress-bar{
    background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
    background-repeat:no-repeat;background-size:250% 100%;background-position:150% 0;
    animation:mo-sheen 3.6s ease-in-out 1s infinite;
  }
  #v-home .progress-bar{animation:mo-fill .8s var(--ease-out) backwards,mo-sheen 3.6s ease-in-out 1.2s infinite}

  /* 金牌外圈定時向外擴散 */
  .medal.tier-3::after{
    content:'';position:absolute;inset:calc(var(--size)*-.07);border-radius:50%;border:3px solid #f7c948;
    opacity:0;pointer-events:none;animation:mo-ping 2.8s ease-out 1s infinite;
  }

  /* 小教室：例句逐行滑入、重點螢光筆掃過 */
  #v-intro .exbox>div{animation:mo-slide .4s var(--ease-out) backwards}
  #v-intro .exbox>:nth-child(1){animation-delay:.15s}
  #v-intro .exbox>:nth-child(2){animation-delay:.23s}
  #v-intro .exbox>:nth-child(3){animation-delay:.31s}
  #v-intro .exbox>:nth-child(4){animation-delay:.39s}
  #v-intro .exbox>:nth-child(n+5){animation-delay:.47s}
  .lesson mark{background:linear-gradient(#ffe27a,#ffe27a) no-repeat 0 0/100% 100%;animation:mo-mark .7s var(--ease-out) .35s backwards}

  /* 作答回饋 */
  .qcard.is-ok,.slotbox.ok{animation:mo-bump .45s var(--ease-pop)}
  .chip.correct,.qcard .opt.picked,.qcard .chip.picked{animation:mo-pop .35s var(--ease-pop)}
  .fixlabel{animation:mo-slide .35s var(--ease-out)}

  /* 結果頁：徽章蓋章登場，其餘內容依序浮現 */
  #v-result .resultcard .medal,#v-examresult .resultcard>:first-child{animation:mo-medal-in .7s var(--ease-pop) .15s backwards}
  .resultcard>:not(:first-child){animation:mo-rise .5s var(--ease-out) backwards}
  .resultcard>:nth-child(2){animation-delay:.3s}
  .resultcard>:nth-child(3){animation-delay:.36s}
  .resultcard>:nth-child(4){animation-delay:.42s}
  .resultcard>:nth-child(5){animation-delay:.48s}
  .resultcard>:nth-child(6){animation-delay:.54s}
  .resultcard>:nth-child(n+7){animation-delay:.6s}

  /* 我的卡：像發牌一樣滑進來 */
  #cardCanvas{animation:mo-deal .6s var(--ease-pop) backwards}
}

/* 偏好減少動態：連 app.css 既有的動畫與過渡也縮成一瞬間 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0s !important;
  }
  .confetti{display:none}
}