/* 消失文字效果的基础样式 */
.disappear-effect span {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.3s ease; /* 设置透明度过渡效果 */
}

/* 隐藏状态的文字样式 */
.disappear-effect span.hidden {
  opacity: 0; /* 完全透明 */
}

/* 小圆点的基本样式 */
.disappear-dot {
  position: absolute; /* 绝对定位 */
  width: 6px;
  height: 6px;
  border-radius: 50%; /* 圆形 */
  pointer-events: none; /* 防止干扰鼠标事件 */
  z-index: 999; /* 确保在最上层 */
  background-color: var(--dot-color); /* 使用CSS变量设置颜色 */
  animation: float 3s ease-in-out infinite; /* 浮动动画 */
}

/* 浮动动画关键帧 */
@keyframes float {
  0%, 100% {
    transform: translate(0, 0); /* 起始和结束位置 */
    opacity: 1;
  }
  50% {
    transform: translate(var(--move-x), var(--move-y)); /* 使用CSS变量设置随机移动 */
    opacity: 0.8; /* 半透明效果 */
  }
}

/* 定义淡雅色系的颜色变量 */
:root {
  --dot-colors: #E6F7FF, #D6E4FF, #F0F5FF, #E6FFFB, #F6FFED;
}