/* ===== 按鈕閃光 (.light) ===== */
.light {
  --light-color: rgba(255, 255, 255, 0.7); /* 預設為白色閃光 */
  width: 100%;
  text-align: center;
  font-size: 2rem;
  overflow: hidden;
  display: block;
  position: relative;
}

.light:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, var(--light-color) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--light-color) 100%);
  animation: light-transform 3s infinite ease-in-out;
}
.goldenlight {
  /* 使用 .goldenlight 來覆寫閃光顏色 */
  --light-color: rgba(255, 215, 0, 0.7);
}
@keyframes light-transform {
  0% {
    /* 結合 skewX 和 translateX */
    transform: skewX(-25deg) translateX(-300%);
  }
  70% {
    transform: skewX(-25deg) translateX(300%);
  }
  100% {
    transform: skewX(-25deg) translateX(300%);
  }
}
/* 閃光效果 E */

/* 2. 果凍跳動效果 S (Bouncing/Jelly Effect) */
.ani-bounce {
  animation: bounce 2s infinite ease-in-out;
}
@keyframes bounce {
  0% {
    transform: scale(1, 1) translate3d(0, 0, 0);
  }
  10% {
    transform: scale(1.05, 0.95) translate3d(0, 0, 0);
  }
  30% {
    transform: scale(0.95, 1.05) translate3d(0, -8%, 0);
  }
  50% {
    transform: scale(1.02, 0.97) translate3d(0, 0, 0);
  }
  57% {
    transform: scale(1, 1) translate3d(0, -2%, 0);
  }
  64% {
    transform: scale(1, 1) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
  }
}
/* 果凍跳動效果 E */

/* 3. 縮放效果 S (Scaling Effect) */
.ani-scale {
  animation: scale 1s infinite ease-in-out;
}
@keyframes scale {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
.ani-scalem {
  animation: scalem 1s infinite ease-in-out;
}
@keyframes scalem {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.05, 1.05);
  }
  100% {
    transform: scale(1, 1);
  }
}
/* 縮放效果 E */

/* 4. 浮動效果 S (Floating Effect) */
.ani-float-horizontal {
  animation: float-horizontal 1.5s ease-in-out infinite;
}
.ani-float-vertical {
  animation: float-vertical 1.5s ease-in-out infinite;
}
@keyframes float-horizontal {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes float-vertical {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
/* 浮動效果 E */
/* 揭示 */
/* [LITURGY: VERTICAL MANIFESTATION] 定義向下伸展的視覺矩陣 */
.ani-grow-down {
  /* 注入時間律動，使其如齒輪般精確循環 */
  animation: grow-down 2s infinite ease-in-out;
  
  /* [RITE: INITIAL STATE] 初始狀態：邏輯剪裁鎖定於頂部邊緣 (0% 縱軸) */
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}

/* [LITURGY: TEMPORAL FLOW] 詠唱時間軸，修正多邊形顶點的位移 */
@keyframes grow-down {
  0% {
    /* [STC-STEP: VOID] 萬物歸於頂部虛無，高度為 0 */
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    /* [STC-STEP: FULLNESS] 釋放下方頂點至 100%，顯現神聖的全貌 */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
/* 5. 動畫延遲工具類 S (Animation Delay Utilities) */
.delay-03s {
  animation-delay: 0.3s;
}
.delay-05s {
  animation-delay: 0.5s;
}
.delay-07s {
  animation-delay: 0.7s;
}