/* ==========================================================================
   粒子消散进度条 (Particle Progress)
   基于 Canvas 的加载动画组件，进度条前端产生粒子消散效果。
   配合 zuoekai-progress-particle.js 使用。

   结构：
     .zuoekai-particle-progress             容器（flex 纵向居中）
       .zuoekai-particle-progress__track     Canvas 轨道区域
         canvas.zuoekai-particle-progress__canvas
       p.zuoekai-particle-progress__text     提示文字（可选）

   变体：
     --fullscreen    填满可视区域垂直居中（用于全屏加载场景）

   ========================================================================== */

/* --- 容器 --- */
.zuoekai-particle-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 4px;
  user-select: none;
  pointer-events: none; /* 加载状态不接受交互 */
}

/* 全屏居中模式：扣除导航和底部 Dock 高度 */
.zuoekai-particle-progress--fullscreen {
  min-height: calc(100vh - 160px);
}

/* --- Canvas 轨道 --- */
.zuoekai-particle-progress__track {
  position: relative;
  width: 100%;
}

.zuoekai-particle-progress__canvas {
  display: block;
  width: 100%;
}

/* --- 提示文字 --- */
.zuoekai-particle-progress__text {
  margin: 0;
  font-size: 14px;
  color: var(--zuoekai-color-text-secondary, #6b7280);
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* --- 响应式：小屏幕 --- */
@media (max-width: 640px) {
  .zuoekai-particle-progress__track {
    max-width: 240px !important;
  }
  .zuoekai-particle-progress__text {
    font-size: 13px;
  }
  .zuoekai-particle-progress--fullscreen {
    min-height: calc(100vh - 120px);
  }
}