/* 共用動態效果（跨頁面共用，供 enter-play / gameplay / finished 等頁面引用）
   ────────────────────────────────────────────────────────────────
   cw-pop-scale：面板／物件「由小至大彈出」

   用法 A（元件 CSS 直接引用關鍵幀，本專案多數頁面採此法）：
     .my-block {
       transform-origin: center center;
       animation: cw-pop-scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
       animation-delay: 0.3s;              // 依需求調整出場時間，做出先後彈出的順序
     }

   用法 B（若元素本身已有靜態 transform，例如置中用的 translateX(-50%)、
   translateY(20%)、rotate(4deg) 等，用 --pop-base-transform 保留，
   避免動畫把原有定位覆蓋掉）：
     .my-centered-block {
       --pop-base-transform: translateX(-50%);
       transform-origin: center center;
       animation: cw-pop-scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
     }

   用法 C（純 HTML 端快速套用，不想額外寫 CSS 規則時）：
     <div class="cw-pop-scale" style="--pop-delay:0.3s;">...</div>

   降低動態效果偏好（prefers-reduced-motion）已內建於本檔案的 .cw-pop-scale
   工具類別；若元件是採用法 A／B（自行在元件 CSS 內寫 animation），
   仍需在該元件的 CSS 補上對應的 @media (prefers-reduced-motion: reduce) 覆寫
   （可直接用 transform: var(--pop-base-transform, none); 取代硬編碼數值）。
*/

@keyframes cw-pop-scale {
  0% {
    opacity: 0;
    transform: var(--pop-base-transform,) scale(0.35);
  }

  65% {
    opacity: 1;
    transform: var(--pop-base-transform,) scale(1.08);
  }

  100% {
    opacity: 1;
    transform: var(--pop-base-transform,) scale(1);
  }
}

.cw-pop-scale {
  transform-origin: center center;
  animation-name: cw-pop-scale;
  animation-duration: var(--pop-duration, 0.45s);
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-delay: var(--pop-delay, 0s);
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .cw-pop-scale {
    animation: none;
    opacity: 1;
    transform: var(--pop-base-transform, none);
  }
}