/* ============================================================
   intro.css —— 杨梅AI百科网 · 开幕欢迎动画 v2（2026-09-11）
   职责：深黑宇宙背景(#0A0A0A系) + 量子粒子Canvas层 + 新图标主视觉
        + 三行居中文字排版 + 主标题极淡暗红呼吸 + 黑白玻璃拟态按钮
   约束：纯CSS，不引入外部库；黑白为主，极少量黑红(≤15%)，不依赖站点深浅主题变量
   ============================================================ */

/* ---------- 开幕动画总层 ---------- */
#yangmei-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  /* 高级黑：深黑→炭黑→边缘纯黑，中心微亮 */
  background: radial-gradient(ellipse at center, #1A1A1A 0%, #0A0A0A 55%, #000000 100%);
  opacity: 1;
  /* 柔和淡出：不白屏不闪烁 */
  transition: opacity 0.9s ease-out;
}

#yangmei-intro-overlay.intro-fading {
  opacity: 0;
  pointer-events: none;
}

/* 边缘雾化渐变暗角 */
#yangmei-intro-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 32%, rgba(0, 0, 0, 0.62) 100%);
  pointer-events: none;
}

/* 淡出时叠加更厚的中心→边缘雾，过渡到首页自然 */
#yangmei-intro-overlay.intro-fading::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  background: radial-gradient(ellipse at center, rgba(10, 10, 10, 0.25) 25%, rgba(0, 0, 0, 0.92) 100%);
  pointer-events: none;
}

/* ---------- Canvas 粒子层 ---------- */
#yangmei-intro-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* ---------- 舞台：图标 + 文字，整体垂直居中 ---------- */
.intro-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  pointer-events: none;
  width: 90vw;
  max-width: 720px;
}

/* ---------- 新图标主视觉（透明PNG，靠外发光在暗底浮现） ---------- */
.intro-logo {
  width: 140px;
  height: auto;
  display: block;
  /* 黑色Y形变纯白：invert(1)反色 + hue-rotate(180deg)恢复金/红色相，仅黑色变白 */
  opacity: 0;
  filter: invert(1) hue-rotate(180deg)
          blur(10px)
          drop-shadow(0 0 10px rgba(255, 255, 255, 0.25))
          drop-shadow(0 0 26px rgba(196, 30, 58, 0.18));
  transition: opacity 1.4s ease-out, filter 1.4s ease-out;
  will-change: opacity, filter;
}

.intro-logo.intro-logo-visible {
  opacity: 1;
  filter: invert(1) hue-rotate(180deg)
          blur(0)
          drop-shadow(0 0 16px rgba(255, 255, 255, 0.45))
          drop-shadow(0 0 38px rgba(196, 30, 58, 0.22));
}

/* ---------- 三行文字（严格居中） ---------- */
.intro-line1,
.intro-title-main,
.intro-line3 {
  font-family: -apple-system, "PingFang SC", "SF Pro Display", "SF Pro Text", "Microsoft YaHei", sans-serif;
  text-align: center;
  margin: 0;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(12px);
}

.intro-line1.intro-line-visible,
.intro-title-main.intro-line-visible,
.intro-line3.intro-line-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* 第一行：欢迎来到 */
.intro-line1 {
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* 补偿末字字距，视觉居中 */
  color: rgba(232, 232, 237, 0.85);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.15);
  transition: opacity 1s ease-out, filter 1s ease-out, transform 1s ease-out;
}

/* 第二行（主标题）：杨梅AI百科网 —— 纯白 + 极轻微暗红呼吸余光 */
.intro-title-main {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: #FFFFFF;
  text-shadow: 0 0 20px rgba(139, 0, 0, 0.25);
  transition: opacity 1.1s ease-out, filter 1.1s ease-out, transform 1.1s ease-out;
}

/* 主标题显现后启动：极淡光晕呼吸（4.5s 慢速循环，白色/暗红，透明度极低，柔和不刺眼） */
.intro-title-main.intro-line-visible {
  animation: titleGlow 4.5s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 14px rgba(255, 255, 255, 0.10), 0 0 20px rgba(139, 0, 0, 0.22); }
  50%      { text-shadow: 0 0 22px rgba(255, 255, 255, 0.18), 0 0 30px rgba(139, 0, 0, 0.30); }
}

/* 第三行（仅登录用户）：欢迎回来，知识网络已连接 */
.intro-line3 {
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: rgba(174, 174, 178, 0.9);
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.08);
  transition: opacity 1s ease-out, filter 1s ease-out, transform 1s ease-out;
}

/* ---------- 跳过按钮（右上角 · 玻璃拟态 · 黑白） ---------- */
.intro-skip-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  padding: 10px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.85);
  font-family: -apple-system, "PingFang SC", "SF Pro Display", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.24s ease-out, border-color 0.24s ease-out,
              color 0.24s ease-out, box-shadow 0.24s ease-out;
}

.intro-skip-btn:hover {
  background: rgba(196, 30, 58, 0.2);
  border-color: rgba(196, 30, 58, 0.5);
  color: #ffffff;
  box-shadow: 0 0 22px rgba(196, 30, 58, 0.25);
}

.intro-skip-btn:active { transform: scale(0.96); }

/* ---------- 音量开关（右下角 · 玻璃拟态 · 黑白） ---------- */
.intro-volume-btn {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.24s ease-out, border-color 0.24s ease-out, color 0.24s ease-out;
}

.intro-volume-btn:hover {
  background: rgba(196, 30, 58, 0.2);
  border-color: rgba(196, 30, 58, 0.5);
  color: #ffffff;
}

.intro-volume-btn svg { width: 20px; height: 20px; display: block; }

/* ---------- 自建轻量 toast（Auth.toast 不可用时兜底） ---------- */
.intro-fallback-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-16px);
  z-index: 100000;
  padding: 12px 28px;
  border-radius: 14px;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-family: -apple-system, "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 0.24s ease-out, transform 0.24s ease-out;
  pointer-events: none;
  white-space: nowrap;
}

.intro-fallback-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- 响应式：平板/手机 ---------- */
@media (max-width: 768px) {
  .intro-stage { gap: 16px; }
  .intro-logo { width: 92px; }
  .intro-line1 { font-size: 22px; letter-spacing: 0.26em; text-indent: 0.26em; }
  .intro-title-main { font-size: 40px; letter-spacing: 0.04em; }
  .intro-line3 { font-size: 16px; letter-spacing: 0.12em; text-indent: 0.12em; }
  .intro-skip-btn { top: 16px; right: 16px; padding: 8px 18px; font-size: 13px; }
  .intro-volume-btn { bottom: 16px; right: 16px; width: 40px; height: 40px; }
}

@media (max-width: 480px) {
  .intro-logo { width: 82px; }
  .intro-line1 { font-size: 20px; }
  .intro-title-main { font-size: 34px; }
  .intro-line3 { font-size: 15px; }
  .intro-stage { gap: 14px; }
}

/* ---------- 降级：prefers-reduced-motion 直接隐藏 ---------- */
@media (prefers-reduced-motion: reduce) {
  #yangmei-intro-overlay { display: none !important; }
}