:root{
  --size: 28px;          /* 三角形邊長 */
  --color: white;         /* 顏色 */
  --distance: 22px;      /* 每次向下移動距離 */
  --duration: 2.4s;      /* 完整循環時間 */
  --easing: cubic-bezier(.25,.8,.25,1); /* 動畫節奏 */
}

/* 用 border 畫「向下三角形」 */
.triangle-down{
  width: 0; 
  height: 0;
  border-left:  calc(var(--size) / 2) solid transparent;
  border-right: calc(var(--size) / 2) solid transparent;
  border-top:   calc(var(--size) / 1.6) solid var(--color);

  /* 置中示範：可依需要移除 */
  position: relative;
  margin: 40px auto;

  /* 動畫 */
  animation: dropFade var(--duration) var(--easing) infinite;
  will-change: transform, opacity; /* 提升流暢度 */
}

/* 淡入＋向下移動 → 停留 → 淡出 */
@keyframes dropFade{
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(var(--distance)); } /* 淡入＋移動完成 */
  60%  { opacity: 1; transform: translateY(var(--distance)); } /* 停留一會兒 */
  100% { opacity: 0; transform: translateY(var(--distance)); } /* 淡出 */
}

/* 使用者偏好減少動效時：僅淡入淡出 */
@media (prefers-reduced-motion: reduce){
  .triangle-down{
    animation: fadeOnly 2s ease-in-out infinite;
  }
  @keyframes fadeOnly{
    0%,100%{opacity:0}
    40%,60%{opacity:1}
  }
}