/* glowing-border.css - 彩虹渐变流光边框效果（置于背后） */
/* 适用于任何尺寸的容器，流光效果自动置于内容背后 */

.glow-container {
  position: relative; /* 设置为相对定位，为伪元素的绝对定位提供参考 */
  border-radius: 15px; /* 容器圆角大小，影响整体圆润度 */
  display: inline-block; /* 确保容器根据内容自适应，不会占满整行 */
}

/* 流光效果 - 置于背后 - 彩虹渐变 */
.glow-container::before {
  content: ""; /* 伪元素必须内容，空内容用于显示样式 */
  position: absolute; /* 绝对定位，相对于.glow-container定位 */
  z-index: 0; /* 层级设置为0，确保置于底层，内容可以覆盖在上面 */
  top: -10px; /* 向上偏移10px，超出容器边界 */
  left: -10px; /* 向左偏移10px，超出容器边界 */
  width: 40px; /* 流光点的初始宽度 */
  height: 40px; /* 流光点的初始高度 */
  border-radius: 20px; /* 圆形边框半径，20px对应40px直径的圆 */

  /* 彩虹渐变背景 - 135度角渐变，包含6种颜色 */
  background: linear-gradient(
    135deg, /* 渐变角度：从左上到右下135度 */
    #ff0000 0%,    /* 红色 - 起始颜色 */
    #ff9900 20%,   /* 橙色 - 20%位置 */
    #ffff00 40%,   /* 黄色 - 40%位置 */
    #00ff00 60%,   /* 绿色 - 60%位置 */
    #0099ff 80%,   /* 蓝色 - 80%位置 */
    #6633ff 100%   /* 紫色 - 结束颜色 */
  );

  /* 多层阴影效果，创造发光效果 */
  box-shadow:
    0 0 25px rgba(255, 0, 0, 0.7),      /* 红色光晕，25px模糊，70%透明度 */
    0 0 50px rgba(255, 153, 0, 0.6),    /* 橙色光晕，50px模糊，60%透明度 */
    0 0 75px rgba(0, 255, 0, 0.5),      /* 绿色光晕，75px模糊，50%透明度 */
    0 0 100px rgba(0, 153, 255, 0.4),   /* 蓝色光晕，100px模糊，40%透明度 */
    inset 0 0 20px rgba(102, 51, 255, 0.3); /* 内阴影，紫色，20px模糊，30%透明度 */

  /* 复合动画：流光移动 + 脉动效果 + 颜色旋转 */
  animation:
    glow-flow 4s linear infinite,        /* 流光移动：4秒，匀速，无限循环 */
    glow-pulse 3s ease-in-out infinite alternate, /* 脉动：3秒，缓入缓出，交替反向，无限循环 */
    rainbow-rotate 6s linear infinite;   /* 颜色旋转：6秒，匀速，无限循环 */

  filter: brightness(1.2); /* 亮度滤镜：增加20%亮度，使颜色更鲜艳 */
  pointer-events: none; /* 禁止指针事件，确保不干扰内容区域的交互 */
}

/* 内容区域 - 置于上层 */
.glow-content {
  position: relative; /* 相对定位，建立新的层叠上下文 */
  z-index: 1; /* 层级设置为1，置于流光效果之上 */

  /* 半透明深色渐变背景 */
  background: linear-gradient(135deg,
    rgba(16, 36, 54, 0.9),  /* 深蓝色，90%透明度 */
    rgba(10, 25, 47, 0.9)   /* 更深蓝色，90%透明度 */
  );

  border-radius: 10px; /* 内容区域圆角，比容器稍小 */
  padding: 20px; /* 内边距，确保内容不贴边 */
  border: 10px solid rgba(255, 255, 255, 0.05); /* 半透明白色边框，5%透明度 */
  color: #a0d8f1; /* 浅蓝色文字颜色 */

  /* 弹性布局设置 */
  display: flex;
  flex-direction: column; /* 垂直方向排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  text-align: center; /* 文字居中 */

  height: 100%; /* 高度100%填充容器 */
  box-sizing: border-box; /* 盒模型计算包含边框和内边距 */
}

/* 流光移动动画关键帧 */
@keyframes glow-flow {
  0%, 100% {
    width: 40px;   /* 初始宽度 */
    height: 40px;  /* 初始高度 */
    top: -10px;    /* 左上角位置 */
    left: -10px;
  }
  20% {
    left: -10px;   /* 保持左边界 */
    top: -10px;    /* 保持上边界 */
    width: calc(100% + 20px); /* 宽度扩展到容器宽度+20px */
    height: 40px;  /* 高度保持40px，形成顶部横条 */
  }
  40% {
    left: calc(100% - 30px); /* 移动到右边界 */
    top: -10px;    /* 保持上边界 */
    width: 40px;   /* 宽度恢复40px */
    height: calc(100% + 20px); /* 高度扩展到容器高度+20px，形成右侧竖条 */
  }
  60% {
    top: calc(100% - 30px); /* 移动到底部边界 */
    left: -10px;   /* 回到左边界 */
    width: calc(100% + 20px); /* 宽度扩展到容器宽度+20px */
    height: 40px;  /* 高度保持40px，形成底部横条 */
  }
  80% {
    top: -10px;    /* 回到上边界 */
    left: -10px;   /* 回到左边界 */
    width: 40px;   /* 宽度恢复40px */
    height: calc(100% + 20px); /* 高度扩展到容器高度+20px，形成左侧竖条 */
  }
}

/* 脉动发光效果关键帧 */
@keyframes glow-pulse {
  0% {
    /* 弱光晕状态 */
    box-shadow:
      0 0 15px rgba(255, 0, 0, 0.6),
      0 0 30px rgba(255, 153, 0, 0.5),
      0 0 45px rgba(0, 255, 0, 0.4),
      0 0 60px rgba(0, 153, 255, 0.3),
      inset 0 0 15px rgba(102, 51, 255, 0.2);
  }
  100% {
    /* 强光晕状态 */
    box-shadow:
      0 0 30px rgba(255, 0, 0, 0.8),
      0 0 60px rgba(255, 153, 0, 0.7),
      0 0 90px rgba(0, 255, 0, 0.6),
      0 0 120px rgba(0, 153, 255, 0.5),
      inset 0 0 25px rgba(102, 51, 255, 0.4);
  }
}

/* 彩虹颜色旋转动画关键帧 */
@keyframes rainbow-rotate {
  0% {
    filter: hue-rotate(0deg) brightness(1.2); /* 色相旋转0度，亮度120% */
  }
  25% {
    filter: hue-rotate(90deg) brightness(1.3); /* 色相旋转90度，亮度130% */
  }
  50% {
    filter: hue-rotate(180deg) brightness(1.2); /* 色相旋转180度，亮度120% */
  }
  75% {
    filter: hue-rotate(270deg) brightness(1.3); /* 色相旋转270度，亮度130% */
  }
  100% {
    filter: hue-rotate(360deg) brightness(1.2); /* 色相旋转360度（完整一圈），亮度120% */
  }
}

/* 响应式调整 - 移动端适配 */
@media (max-width: 768px) {
  .glow-container::before {
    width: 30px;  /* 移动端减小流光点宽度 */
    height: 30px; /* 移动端减小流光点高度 */
  }

  /* 移动端流光移动动画调整 */
  @keyframes glow-flow {
    0%, 100% {
      width: 30px;   /* 调整初始尺寸 */
      height: 30px;
    }
    20% {
      width: calc(100% + 20px); /* 调整扩展宽度 */
      height: 30px;
    }
    40% {
      width: 30px;
      height: calc(100% + 20px); /* 调整扩展高度 */
    }
    60% {
      width: calc(100% + 20px);
      height: 30px;
    }
    80% {
      width: 30px;
      height: calc(100% + 20px);
    }
  }

  /* 移动端减少阴影强度，避免过度占用性能 */
  .glow-container::before {
    box-shadow:
      0 0 15px rgba(255, 0, 0, 0.6),
      0 0 30px rgba(255, 153, 0, 0.5),
      0 0 45px rgba(0, 255, 0, 0.4),
      inset 0 0 15px rgba(102, 51, 255, 0.2);
  }

  /* 移动端脉动动画调整 */
  @keyframes glow-pulse {
    0% {
      box-shadow:
        0 0 10px rgba(255, 0, 0, 0.5),
        0 0 20px rgba(255, 153, 0, 0.4),
        0 0 30px rgba(0, 255, 0, 0.3),
        inset 0 0 10px rgba(102, 51, 255, 0.2);
    }
    100% {
      box-shadow:
        0 0 20px rgba(255, 0, 0, 0.7),
        0 0 40px rgba(255, 153, 0, 0.6),
        0 0 60px rgba(0, 255, 0, 0.5),
        inset 0 0 20px rgba(102, 51, 255, 0.3);
    }
  }
}

/* 可选：为不同场景提供变体 */

/* 明亮彩虹变体 */
.glow-container.rainbow-bright::before {
  filter: brightness(1.5) saturate(1.5); /* 增加亮度和饱和度 */
}

/* 柔和彩虹变体 */
.glow-container.rainbow-subtle::before {
  filter: brightness(1.1) saturate(0.8); /* 轻微增加亮度，降低饱和度 */
  animation-duration: 8s, 4s, 8s; /* 减慢所有动画速度 */
}

/* 快速彩虹变体 */
.glow-container.rainbow-fast::before {
  animation-duration: 2s, 1.5s, 3s; /* 加快所有动画速度 */
}