/* ============================================================
   常燕 · 全屏开屏动画 (splash.css)
   浅色 AI 科技风 · Token 流 · 语义核心 · 横向蒙版揭示
   参考 3:4「AI Token 流」：冰川白底 / 淡蓝空间光 / 少量淡青·浅紫
   蓝青高光 #246BFD→#55C7FF · 主文字 #111C35
   transform/opacity · 移动端适配 · reduced-motion
   ============================================================ */

.sp-ease { transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- 遮罩基础 ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #FFFFFF;
}
html.splash-lock, html.splash-lock body { overflow: hidden; }

/* ---------- 背景（明亮通透冰川白 + 淡蓝空间光） ---------- */
.splash-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(130% 100% at 50% 45%, #FFFFFF 0%, #F7FBFF 40%, #EEF6FF 72%, #E4F3FF 100%),
    radial-gradient(46% 40% at 20% 18%, rgba(36, 107, 253, 0.10), transparent 70%),
    radial-gradient(44% 40% at 82% 84%, rgba(85, 199, 255, 0.12), transparent 72%),
    radial-gradient(30% 26% at 78% 16%, rgba(121, 108, 255, 0.07), transparent 70%),
    radial-gradient(28% 30% at 12% 82%, rgba(85, 199, 255, 0.08), transparent 72%);
}
.splash.sp-play .splash-bg { animation: spBg 0.45s 0s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes spBg { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 中央语义核心（小而精致的发光方块组） ---------- */
.core-wrap {
  position: absolute;
  left: 50%;
  top: 46.5%;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.splash.sp-play .core-wrap { animation: spCoreL 1.2s 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes spCoreL { from { opacity: 0; } to { opacity: 1; } }

.core-wrap-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 120px; height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 107, 253, 0.22) 0%, rgba(85, 199, 255, 0.10) 44%, transparent 72%);
  animation: spCorePulse 2.6s 1.6s ease-in-out infinite;
}
@keyframes spCorePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; }
  50% { transform: translate(-50%, -50%) scale(1.28); opacity: 1; }
}

.core-chip {
  position: absolute;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(36, 107, 253, 0.5);
}
.core-chip.c1 { width: 14px; height: 14px; left: -7px; top: -7px; background: linear-gradient(135deg, #246BFD, #55C7FF); transform: rotate(16deg); }
.core-chip.c2 { width: 9px; height: 9px; left: 12px; top: -4px; background: #55C7FF; border-radius: 50%; }
.core-chip.c3 { width: 11px; height: 11px; left: 6px; top: 10px; background: rgba(36, 107, 253, 0.92); transform: rotate(-22deg); }
.core-chip.c4 { width: 7px; height: 7px; left: -14px; top: 6px; background: #796CFF; border-radius: 2px; }
.core-spark {
  position: absolute;
  left: -2px; top: -2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 8px 2px rgba(85, 199, 255, 0.95);
  animation: spSpark 1.8s 1.4s ease-in-out infinite;
}
@keyframes spSpark {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.7); }
}

/* ---------- Canvas Token 流层 ---------- */
.splash-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- 中央内容 ---------- */
.splash-inner {
  position: absolute;
  left: 50%; top: 46.5%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(90vw, 720px);
  pointer-events: none;
}

/* 主标识「常燕」：藏蓝粗黑体 */
.splash-name {
  margin: 0;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 800;
  font-size: 66px;
  line-height: 1.06;
  letter-spacing: 10px;
  text-indent: 10px;
  color: #111C35;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(12px);
}
.splash.sp-play .splash-name { animation: spName 1.0s 1.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes spName {
  from { opacity: 0; filter: blur(12px); transform: translateY(12px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* 分隔短线 */
.splash-line {
  width: 44px; height: 1px;
  margin: 26px 0 0;
  background: linear-gradient(90deg, #246BFD, #55C7FF);
  opacity: 0;
  transform: scaleX(0);
}
.splash.sp-play .splash-line { animation: spLine 0.5s 2.05s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes spLine {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 0.85; }
}

/* 两行宣传语：横向蒙版揭示，AI/GEO 蓝青渐变 */
.splash-txt {
  margin: 0;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  color: #111C35;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
.splash-txt em.hi {
  font-style: normal;
  background: linear-gradient(90deg, #246BFD 0%, #55C7FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.splash-txt + .splash-txt { margin-top: 10px; }
.splash.sp-play #spLine1 { animation: spMask 0.6s 2.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.splash.sp-play #spLine2 { animation: spMask 0.6s 2.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes spMask {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  60% { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ---------- 跳过按钮 ---------- */
.splash-skip {
  position: absolute;
  top: 28px; right: 28px;
  z-index: 3;
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #246BFD;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(36, 107, 253, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  opacity: 0;
  cursor: pointer;
}
.splash.sp-play .splash-skip { animation: spSkipIn 0.5s 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.splash-skip:hover { color: #FFFFFF; background: #246BFD; border-color: #246BFD; }
@keyframes spSkipIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 退场：整体淡出 + Token 上交还由 JS 控制滑向两侧 ---------- */
.splash.sp-out { animation: spFade 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes spFade {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}
.splash.sp-gone { display: none; pointer-events: none; }

/* ============================================================
   无 JS 兜底：纯 CSS 静态展示并隐藏
   ============================================================ */
html.no-js .splash-bg { animation: spBg 0.45s 0s cubic-bezier(0.22,1,0.36,1) both; }
html.no-js .core-wrap { animation: spCoreL 0.6s 0.3s cubic-bezier(0.22,1,0.36,1) both; }
html.no-js .splash-name { animation: spName 0.8s 0.3s cubic-bezier(0.22,1,0.36,1) both; }
html.no-js .splash-line { animation: spLine 0.5s 0.9s cubic-bezier(0.22,1,0.36,1) both; }
html.no-js #spLine1 { animation: spMask 0.6s 0.9s cubic-bezier(0.22,1,0.36,1) both; }
html.no-js #spLine2 { animation: spMask 0.6s 1.1s cubic-bezier(0.22,1,0.36,1) both; }
html.no-js .splash-skip { display: none; }
html.no-js .splash {
  pointer-events: none;
  animation:
    spFade 0.9s 3.0s cubic-bezier(0.22,1,0.36,1) forwards,
    spNoJSVisible 0s 3.8s forwards;
}
@keyframes spNoJSVisible { to { visibility: hidden; } }

/* ============================================================
   快速模式（会话内二次进入）：0.35s 轻淡入淡出
   ============================================================ */
.splash.sp-quick .splash-bg,
.splash.sp-quick .core-wrap,
.splash.sp-quick .splash-name,
.splash.sp-quick .splash-line,
.splash.sp-quick .splash-txt,
.splash.sp-quick .splash-skip { display: none; }
.splash.sp-quick { background: radial-gradient(120% 90% at 50% 42%, #FFFFFF, #E8F2FF 78%); animation: spQuick 0.35s ease both; }
@keyframes spQuick {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================================
   reduced-motion：取消 Token 流与逐层动画，仅 0.5s 静态淡入淡出
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .splash.sp-play .core-wrap,
  .splash.sp-play .core-wrap-glow,
  .splash.sp-play .core-spark { animation: none; opacity: 1; }
  .splash.sp-play .core-chip { animation: none; }
  .splash.sp-play .splash-bg { animation: spBg 0.5s 0s ease both; }
  .splash.sp-play .splash-name,
  .splash.sp-play .splash-line,
  .splash.sp-play #spLine1,
  .splash.sp-play #spLine2 { animation: spRM 0.5s 0.15s ease both; filter: none; transform: none; }

  /* 纯静态 Token 点缀（不流动），保持画面有语义核心感 */
  @keyframes spRM { from { opacity: 0; } to { opacity: 1; } }
}

/* ============================================================
   首页衔接入场（由 splash.js 在退场时添加 body.sp-anim）
   导航 0s → 照片 → 标签 0.15s → 主标题 0.25s → 副文 0.4s → 按钮 0.55s
   ============================================================ */
body.sp-anim .site-nav { animation: spRiseNav 0.7s 0s cubic-bezier(0.22,1,0.36,1) both; }
body.sp-anim .hero-photo { animation: spPhotoHome 0.9s 0s cubic-bezier(0.22,1,0.36,1) both; }
body.sp-anim .hero-copy .eyebrow { animation: spRiseHome 0.7s 0.15s cubic-bezier(0.22,1,0.36,1) both; }
body.sp-anim .hero-title { animation: spRiseHome 0.8s 0.25s cubic-bezier(0.22,1,0.36,1) both; }
body.sp-anim .hero-tags { animation: spRiseHome 0.7s 0.4s cubic-bezier(0.22,1,0.36,1) both; }
body.sp-anim .hero-desc { animation: spRiseHome 0.8s 0.4s cubic-bezier(0.22,1,0.36,1) both; }
body.sp-anim .hero-actions { animation: spRiseHome 0.75s 0.55s cubic-bezier(0.22,1,0.36,1) both; }
body.sp-anim .hero-photo .hm { animation: spRiseHome 0.6s 0.6s cubic-bezier(0.22,1,0.36,1) both; }
body.sp-anim .hero-photo .hm:nth-child(2) { animation-delay: 0.7s; }
body.sp-anim .hero-photo .hm:nth-child(3) { animation-delay: 0.8s; }
body.sp-anim .hero-photo .hm:nth-child(4) { animation-delay: 0.9s; }

@keyframes spRiseHome {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spRiseNav {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spPhotoHome {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   移动端适配
   ============================================================ */
@media (max-width: 767px) {
  .splash-name { font-size: 46px; letter-spacing: 7px; text-indent: 7px; }
  .splash-txt { font-size: 24px; }
  .splash-txt + .splash-txt { margin-top: 8px; }
  .core-wrap-glow { width: 92px; height: 92px; }
  .splash-inner, .core-wrap { top: 45%; }
  .splash-skip { top: 22px; right: 20px; }
}

@media (max-width: 429px) {
  .splash-name { font-size: 40px; letter-spacing: 5px; text-indent: 5px; }
  .splash-txt { font-size: 22px; }
  .splash-txt + .splash-txt { margin-top: 6px; }
}