/* ── 變數 ── */
: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;          /* 旋轉一圈時間 */
}


/* ================================================================
   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">
   ================================================================ */