/* 離子外部容器：負責平滑的移動過渡動畫 */
.ion-wrapper {
  position: absolute;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  transition: left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 10;
}

/* 離子內部元素：負責樣式與漂浮動畫 */
.ion-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 漂浮動畫定義 (透過 JS 動態加入 style 調整週期) */
@keyframes floatAnimation {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(6px, 6px); }
  50% { transform: translate(0, 12px); }
  75% { transform: translate(-6px, 6px); }
}

.is-floating {
  animation-name: floatAnimation;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}