/* ============================================================
 * 首屏加载动画样式（loading.css）
 *
 * 作用域：全屏加载遮罩层（#spinner-container）+ 旋转动画（.spinner）。
 *         由 loading.js 在页面加载完成后隐藏（设置 display:none）。
 *
 * 设计要点：
 *   1. z-index 层级策略：#spinner-container 的 z-index: 9999
 *      必须高于所有页面内容 < 自定义弹出层（如右键菜单 z-index: 999999），
 *      确保遮罩覆盖全站首屏内容。
 *   2. 动画机制：.spinner 使用 @keyframes spin 旋转，
 *      每 20% 时间切换 border-top 颜色，形成彩色轮转效果。
 *   3. 加载完成隐藏方式：由 loading.js 检测页面就绪后，
 *      将 #spinner-container 的 display 设为 none（而非 opacity 渐变消失，
 *      以保证立即释放 GPU 合成层资源）。
 *
 * 目录（Table of Contents）：
 *   §1  全屏遮罩容器（#spinner-container）
 *   §2  旋转 spinner（.spinner）
 *   §3  旋转关键帧（@keyframes spin）
 * ============================================================ */


/* ============================================================
 * §1  全屏遮罩容器（#spinner-container）
 *
 *   position: fixed 覆盖整个视口
 *   background-color: rgba(0, 0, 0, 0.8) —— 80% 黑色半透明遮罩，
 *       足以遮蔽下方内容但又不完全黑暗，减少从全黑到页面的视觉跳跃。
 *   z-index: 9999 —— 高于绝大多数页面元素；
 *       注意：右键菜单 z-index 为 999999（Right.css），
 *       但加载完成后此容器消失，故层级冲突不会发生。
 *   display: flex + justify/align center —— 让 spinner 居中
 * ============================================================ */

#spinner-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ============================================================
 * §2  旋转 spinner（.spinner）
 *
 *   纯 CSS 圆环旋转效果，不使用任何图片或 SVG。
 *   实现方式：
 *     - border: 6px solid rgba(0,0,0,0.1) 作为基座（几乎透明，仅占位）
 *     - border-top 在 @keyframes 中逐段改变颜色 + 旋转
 *     - 宽高 65px + 边框 6px（较常规 spinner 更大），保证加载时视觉醒目
 *     - border-radius: 50% 圆形
 *     - animation: spin 1s linear infinite 匀速无限旋转
 * ============================================================ */

.spinner {
  border: 6px solid rgba(0, 0, 0, 0.1); /* 基座边框：几乎透明，仅用于占据边框厚度 */
  border-radius: 50%;
  width: 65px;  /* 增大宽度，提升视觉存在感 */
  height: 65px; /* 增大高度，与宽度保持一致 */
  animation: spin 1s linear infinite;
}


/* ============================================================
 * §3  旋转关键帧（@keyframes spin）
 *
 *   通过逐段改变 border-top 的颜色来产生彩色轮转效果。
 *   每 20% 切换一次颜色，6 种颜色构成一个色环循环：
 *     蓝 → 绿 → 黄 → 紫 → 红 → 蓝
 *   同时 100% 时 transform: rotate(360deg)，与 border 颜色变化配合，
 *   形成"色环旋转"的视觉效果而非简单的单色旋转。
 *
 *   注意：此处仅改变 border-top 而非全部四边，
 *   是因为只改变顶边色彩 + 整体旋转即可模拟多彩进度环效果；
 *   若四边全变色则闪烁感过强。
 * ============================================================ */

@keyframes spin {
  0% {
    border-top: 6px solid #007bff; /* 蓝色起始 */
  }
  20% {
    border-top: 6px solid #00ff00; /* 绿色 */
  }
  40% {
    border-top: 6px solid #ffff00; /* 黄色 */
  }
  60% {
    border-top: 6px solid #ff00ff; /* 紫色 */
  }
  80% {
    border-top: 6px solid #ff0000; /* 红色 */
  }
  100% {
    border-top: 6px solid #007bff; /* 回到蓝色，完成一个色环 */
    transform: rotate(360deg);     /* 完整旋转一周 */
  }
}