/* ============================================
   Splash Screen — 复刻原博客风格
   ============================================ */

html.splash-pending { background: #0a0a1a; }
html.splash-pending body { overflow: hidden; }
html.splash-skipped .splash { display: none; }

.splash {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0a0a1a;
  overflow: hidden;
}

/* Canvas — opacity 0.6 匹配原版 */
.splash__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  opacity: 0.6;
}

/* 内容层 (z-10) */
.splash__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 标题 — 原版字体 tracking[0.15em] */
.splash__title {
  margin: 0 0 0.75rem;
  color: #fff;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  font-size: clamp(2.25rem, 8vw, 4rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.15em;
  animation: titleReveal 800ms cubic-bezier(0.23,1,0.32,1) 200ms both;
}
@keyframes titleReveal {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 副标题 — 原版 tracking[0.6em] uppercase */
.splash__subtitle {
  margin: 0 0 3.5rem;
  color: rgba(148,163,184,0.6);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  animation: subtitleReveal 600ms ease 500ms both;
}
@keyframes subtitleReveal {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* 进度条 — 原版 w-48 sm:w-56 h-[2px] */
.splash__progress {
  width: 12rem;
  height: 2px;
  background: rgba(148,163,184,0.15);
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  opacity: 0;
  animation: fadeIn 400ms ease 800ms both;
}
@media (min-width: 640px) {
  .splash__progress { width: 14rem; }
}
.splash__progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a78bfa, #c4b5fd);
  box-shadow: 0 0 16px rgba(124,58,237,0.6);
  border-radius: 9999px;
  transition: width 0.15s ease-out;
}

/* 状态文字 — 原版 mt-5 text-[10px] */
.splash__status {
  margin-top: 1.25rem;
  font-size: 10px;
  font-weight: 700;
  color: rgba(148,163,184,0.4);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeIn 400ms ease 1000ms both;
}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

/* 退出过渡 → splash.js 用行内 style 控制 */

/* Page shell */
html:not(.splash-complete) .page-shell {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(5px);
}
html.page-revealing .page-shell,
html.splash-complete .page-shell {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 700ms ease, transform 800ms cubic-bezier(0.22,1,0.36,1), filter 700ms ease;
}

/* Mobile */
@media (max-width: 480px) {
  .splash__title { font-size: clamp(2rem, 9vw, 2.75rem); letter-spacing: 0.12em; white-space: nowrap; }
  .splash__subtitle { letter-spacing: 0.4em; }
  .splash__progress { width: 10rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .splash__title, .splash__subtitle {
    animation-duration: 1ms !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .splash__progress, .splash__status { animation-duration: 1ms !important; opacity: 1 !important; }
}