/* 全站共用的動畫設定（載入在各頁 <style> 前面）。 */

:root {
  /* 進場、展開、選單都用這條：一開始就快，尾端慢慢停 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* 設定裡關掉「介面動畫效果」時，各頁會把所有動畫縮成 0.001ms。
   但轉圈和錄音的閃爍是「處理中」的提示，不是裝飾，要保留。 */
html[data-reduce-motion="true"] .spinner {
  animation-duration: 0.7s !important;
  animation-iteration-count: infinite !important;
}
html[data-reduce-motion="true"] .mic-btn.active {
  animation-duration: 1s !important;
  animation-iteration-count: infinite !important;
}

/* 滑鼠在工具列裡移動時，提示文字直接出現，不要每顆都重播淡入；離開工具列才淡出 */
.icon-toolbar:hover [data-tooltip]::before {
  transition: none;
}

/* 後台切換分頁：只變透明度，而且要快 */
@keyframes paoTabFade {
  from { opacity: 0; }
}

/* 回饋、登入彈窗原本是瞬間出現。背景淡入，內容從 0.96 放大（彈窗置中，縮放中心就是中間） */
@keyframes paoModalFade {
  from { opacity: 0; }
}
@keyframes paoModalIn {
  from { opacity: 0; transform: scale(0.96); }
}
.feedback-modal {
  animation: paoModalFade 0.2s var(--ease-out);
  transition: opacity 0.15s var(--ease-out);
}
/* 關閉（motion.js 的 paoCloseModal）：比打開快，用 transition 所以中途又打開也能順順地回去 */
.feedback-modal.is-closing {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .feedback-modal-inner {
    animation: paoModalIn 0.2s var(--ease-out);
    transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out);
  }
  .feedback-modal.is-closing .feedback-modal-inner {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* 系統設定「降低透明度」時：玻璃質感的浮動元件改成不透明，文字才看得清楚 */
@media (prefers-reduced-transparency: reduce) {
  html .icon-toolbar,
  html .settings-panel,
  html .feedback-launcher,
  html .admin-header,
  html .card {
    background: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html .pz-select-menu {
    background: var(--pz-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* 切換深淺色／高對比時，顏色用 0.3 秒漸變，不要整頁瞬間跳亮跳暗（class 由 motion.js 加上再拿掉） */
html.pao-theme-changing,
html.pao-theme-changing *,
html.pao-theme-changing *::before,
html.pao-theme-changing *::after {
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), fill 0.3s var(--ease-out), stroke 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out) !important;
}

/* 裁切框右下角的縮放點只有 18px，手指很難按到；看不見的感應區放大到 44px */
#cropHandle::before {
  content: "";
  position: absolute;
  inset: -13px;
}