/**
 * 欢迎页加载动画 — 艺评通「画廊白」风格
 * 暖灰白底 + 靛墨紫点缀 + 深金细节，与登录页/小程序视觉同源
 */

* {
  box-sizing: border-box;
}

html {
  font-size: clamp(14px, 2.5vw, 18px);
}

/* 主容器：暖灰白底 */
#loader-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 999;
  background:
    radial-gradient(circle at 12% 14%, rgba(78, 70, 216, 0.07) 0%, transparent 42%),
    radial-gradient(circle at 88% 86%, rgba(201, 151, 28, 0.08) 0%, transparent 40%),
    #f6f5f2;
  transition: opacity 0.45s ease;
}

/* 同一会话再次进入：由 index.html 内联脚本打标，加载动画不再显示 */
.ypt-no-loader #loader-wrapper {
  display: none;
}

/* App 挂载后淡出（App.vue 会加 .done） */
#loader-wrapper.done {
  opacity: 0;
  pointer-events: none;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo：轻柔浮动 */
.logo-container {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  animation: logoFloat 3.6s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* 紫色柔光环（跟随 logo 浮动节奏呼吸） */
.logo-glow {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 90, 232, 0.18) 0%, transparent 70%);
  animation: glowBreath 3.6s ease-in-out infinite;
}

@keyframes glowBreath {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* 应用名称 */
.name {
  margin-top: 26px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 10px;
  text-indent: 10px; /* 抵消末字符字距，保持视觉居中 */
  color: #191c33;
}

.tip {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 3px;
  color: #9ca0b5;
}

/* 进度条：细线 + 品牌紫流光 */
.progress-indicator {
  margin-top: 34px;
  width: min(280px, 60vw);
  height: 3px;
  border-radius: 3px;
  background: #e6e4de;
  overflow: hidden;
  position: relative;
}

.progress-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.progress-track::before {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #534bde 0%, #8a75f2 100%);
  animation: progressSweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes progressSweep {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* 流光尾迹（由 progress-track::before 实现，保留节点兼容） */
.progress-glow {
  display: none;
}

/* 数据流 → 三个呼吸圆点（紫 / 金 / 紫） */
.data-stream {
  margin-top: 22px;
  display: flex;
  gap: 10px;
}

.data-stream span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: dotBreath 1.4s ease-in-out infinite;
}
.data-stream span:nth-child(1) { background: rgba(78, 70, 216, 0.55); }
.data-stream span:nth-child(2) { background: #c9971c; animation-delay: 0.2s; }
.data-stream span:nth-child(3) { background: rgba(78, 70, 216, 0.55); animation-delay: 0.4s; }

@keyframes dotBreath {
  0%, 100% { transform: scale(0.8); opacity: 0.35; }
  50% { transform: scale(1); opacity: 1; }
}

/* 公司信息 */
.company-info {
  position: fixed;
  bottom: 28px;
  text-align: center;
}

.company-name {
  font-size: 12px;
  letter-spacing: 2px;
  color: #555a75;
}

.company-subtitle {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #9ca0b5;
}

/* 深色模式跟随系统：保持暖白不变，仅微调氛围光 */
@media (prefers-color-scheme: dark) {
  #loader-wrapper {
    background:
      radial-gradient(circle at 12% 14%, rgba(78, 70, 216, 0.10) 0%, transparent 42%),
      radial-gradient(circle at 88% 86%, rgba(201, 151, 28, 0.10) 0%, transparent 40%),
      #f6f5f2;
  }
}

/* 打印样式 */
@media print {
  #loader-wrapper {
    display: none;
  }
}