/* ── 變數 ── */
:root {
  --float-distance: -16px;       /* 漂浮高度，正值往上 */
  --float-duration: 3s;          /* 漂浮週期 */

  --hover-lift: -5px;            /* hover 上移距離 */
  --hover-scale: 0.94;           /* hover 縮小比例 */
  --hover-brightness: 1.12;      /* hover 亮度 */
  --hover-duration: 0.28s;       /* hover 動畫速度 */

  --spin-duration: 18s;          /* 旋轉一圈時間 */

  --pulse-duration: 1s;        
  --pulse-scale: 1.05;

  --flip-duration: 0.5s;        /* flipInX 動畫時間 */
}


/* ================================================================
   1. 上下漂浮  →  class="float"
   ================================================================ */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(var(--float-distance)); }
}

.float {
  animation: float var(--float-duration) ease-in-out infinite;
  will-change: transform;
  backface-visibility: hidden;
}


/* ================================================================
   2. Hover 效果基底  →  所有 <a> 共用
   ================================================================ */

a {
  transition:
    transform var(--hover-duration) ease,
    filter    var(--hover-duration) ease;
  will-change: transform, filter;
  cursor: pointer;
}


/* ================================================================
   2-A. 上飄  →  目前啟用，想換效果請註解此區、解除 2-B 註解
   ================================================================ */

@media (hover: hover) {
  a:hover {
    transform: translateY(var(--hover-lift));
    filter: brightness(var(--hover-brightness));
  }
}

a:active {
  transform: translateY(calc(var(--hover-lift) * 0.6));
  filter: brightness(var(--hover-brightness));
  transition: transform 0.08s ease, filter 0.08s ease;
}


/* ================================================================
   2-B. 縮小  →  目前關閉，想啟用請解除此區註解、註解 2-A
   ================================================================ */

/* @media (hover: hover) {
  a:hover {
    transform: scale(var(--hover-scale));
    filter: brightness(var(--hover-brightness));
  }
}

a:active {
  transform: scale(calc(var(--hover-scale) - 0.03));
  filter: brightness(var(--hover-brightness));
  transition: transform 0.08s ease, filter 0.08s ease;
} */


/* ================================================================
   3. 旋轉  →  class="spin" / class="spin-reverse"
   ================================================================ */

@keyframes spin-cw  { to { transform: rotate( 360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }

.spin {
  animation: spin-cw var(--spin-duration) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.spin-reverse {
  animation: spin-ccw var(--spin-duration) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}


/* ================================================================
   🔧 使用說明

   ── <a> hover 效果切換 ──
   啟用上飄   →  解除 2-A 註解，註解 2-B
   啟用縮小   →  解除 2-B 註解，註解 2-A

   ── 動畫效果切換（CSS 內使用）──
   上下漂浮      →  animation: float      var(--float-duration)  ease-in-out infinite;
   順時針旋轉    →  animation: spin-cw    var(--spin-duration)   linear      infinite;
   逆時針旋轉    →  animation: spin-ccw   var(--spin-duration)   linear      infinite;

   ── 單獨調整速度／幅度（HTML inline style）──
   <img class="float" style="--float-distance:-30px; --float-duration:5s">
   ================================================================ */


   

/* ================================================================
   animate.style_bounceIn
   ================================================================ */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  20%  { opacity: 1; transform: scale(1.1); }
  40%  { transform: scale(0.9); }
  60%  { transform: scale(1.03); }
  80%  { transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

.bounce-in {
  opacity: 0;
  animation: bounceIn 0.76s ease forwards;
}




@keyframes pulse {
  from { transform: scale3d(1, 1, 1); }
  50%  { transform: scale3d(var(--pulse-scale), var(--pulse-scale), var(--pulse-scale)); }
  to   { transform: scale3d(1, 1, 1); }
}

.pulse {
  animation: pulse var(--pulse-duration) ease-in-out ;
  will-change: transform;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
}




@keyframes flipInX {
  0%   { transform: perspective(400px) rotateX(90deg);  opacity: 0; }
  40%  { transform: perspective(400px) rotateX(-10deg); }
  70%  { transform: perspective(400px) rotateX(10deg);  }
  100% { transform: perspective(400px) rotateX(0deg);   opacity: 1; }
}

.flip-in-x {
  opacity: 0;
  animation: flipInX var(--flip-duration) ease-in-out forwards;
  backface-visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  .flip-in-x { animation: none; opacity: 1; }
}



/* ================================================================
   flip-card-in  →  排行榜卡片依序翻入（載入時，只播一次）
   animation-delay 由 JS inline style 設定
   ================================================================ */
@keyframes flip-card-in {
  from {
    transform: perspective(2500px) rotateY(-100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2500px) rotateY(0);
    opacity: 1;
  }
}

.flip-card-in {
  opacity: 0;
  animation: flip-card-in 0.6s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .flip-card-in { animation: none; opacity: 1; }
}