/* ============================================================
   ZSWS Splash 全屏入场动画 · 20 套随机 · 高级感
   ============================================================ */
#zsws-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #070d1a;
  color: #fff;
  opacity: 1;
  transition: opacity .9s ease, visibility .9s ease;
}
#zsws-splash.zs-done,
#zsws-splash.zs-off {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#zsws-splash .zs-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.zs-mid {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1180px;
  padding: 0 6vw;
  will-change: transform, opacity;
}
.zs-kicker {
  font-size: clamp(12px, 1.6vw, 17px);
  letter-spacing: .55em;
  text-transform: uppercase;
  opacity: 0;
  margin-bottom: 26px;
  font-weight: 500;
}
.zs-title {
  font-size: clamp(34px, 6.2vw, 92px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: .02em;
  margin: 0 0 22px;
  opacity: 0;
}
.zs-title em { font-style: normal; }
.zs-sub {
  font-size: clamp(15px, 2.1vw, 24px);
  font-weight: 400;
  line-height: 1.7;
  opacity: 0;
  max-width: 820px;
  margin: 0 auto;
  color: rgba(255,255,255,.82);
}
.zs-bar {
  width: 220px;
  height: 2px;
  background: rgba(255,255,255,.16);
  margin: 34px auto 0;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.zs-bar i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: translateX(-100%);
}
.zs-enter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 46px;
  padding: 14px 42px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: .2em;
  cursor: pointer;
  opacity: 0;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .3s, color .3s, transform .3s, box-shadow .3s;
  user-select: none;
}
.zs-enter:hover {
  background: #fff;
  color: #070d1a;
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(255,255,255,.18);
}
.zs-enter .zs-arrow { transition: transform .3s; }
.zs-enter:hover .zs-arrow { transform: translateX(6px); }
.zs-tag {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  z-index: 3;
}

/* ---------- 基础文字入场动画 ---------- */
.zs-in .zs-kicker { animation: zsKicker .7s ease forwards .15s; }
.zs-in .zs-title { animation: zsTitleIn .9s cubic-bezier(.16,1,.3,1) forwards .45s; }
.zs-in .zs-sub { animation: zsFadeUp .8s ease forwards .95s; }
.zs-in .zs-bar i { animation: zsBar 2.4s cubic-bezier(.65,0,.35,1) forwards 1.35s; }
.zs-in .zs-enter { animation: zsEnterIn .6s ease forwards 2.6s; }
@keyframes zsKicker { from { opacity:0; transform: translateY(16px); letter-spacing:.9em; } to { opacity:1; transform:none; } }
@keyframes zsTitleIn { from { opacity:0; transform: translateY(34px) scale(.96); filter: blur(10px); } to { opacity:1; transform:none; filter: blur(0); } }
@keyframes zsFadeUp { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }
@keyframes zsBar { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes zsEnterIn { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }

/* ============================================================
   V1 粒子星系汇聚 · 深空蓝
   ============================================================ */
#zsws-splash.zs-v1 { background: radial-gradient(120% 120% at 50% 20%, #0b1e3a 0%, #070d1a 55%, #050810 100%); }
#zsws-splash.zs-v1 .zs-kicker { color: #7cc4ff; }
#zsws-splash.zs-v1 .zs-title { background: linear-gradient(180deg, #fff 30%, #9fd3ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================
   V2 数字矩阵雨 · 赛博绿
   ============================================================ */
#zsws-splash.zs-v2 { background: radial-gradient(120% 120% at 50% 30%, #12233f 0%, #0a1322 55%, #060a12 100%); }
#zsws-splash.zs-v2 .zs-kicker { color: #6dffb0; }
#zsws-splash.zs-v2 .zs-title { text-shadow: 0 0 34px rgba(80,255,170,.55); }
#zsws-splash.zs-v2 .zs-sub { color: rgba(190,255,225,.85); }

/* ============================================================
   V3 星座连线 · 星紫
   ============================================================ */
#zsws-splash.zs-v3 { background: radial-gradient(120% 120% at 80% 10%, #2a1b4f 0%, #120b26 50%, #08040f 100%); }
#zsws-splash.zs-v3 .zs-kicker { color: #c7a7ff; }
#zsws-splash.zs-v3 .zs-title { text-shadow: 0 0 44px rgba(180,120,255,.5); }

/* ============================================================
   V4 星轨漂移 · 鎏金
   ============================================================ */
#zsws-splash.zs-v4 { background: radial-gradient(120% 120% at 30% 80%, #3a2810 0%, #151008 45%, #07050a 100%); }
#zsws-splash.zs-v4 .zs-kicker { color: #ffd98a; }
#zsws-splash.zs-v4 .zs-title { background: linear-gradient(180deg, #fff7e0 20%, #e8b45a 75%, #9a6b1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#zsws-splash.zs-v4 .zs-enter { border-color: rgba(255,200,110,.55); color: #ffe9bf; }

/* ============================================================
   V5 极光流动 · 极光青
   ============================================================ */
#zsws-splash.zs-v5 { background: linear-gradient(160deg, #041b26 0%, #07323a 45%, #040f18 100%); }
#zsws-splash.zs-v5 .zs-kicker { color: #8fe8ff; }
#zsws-splash.zs-v5 .zs-title { text-shadow: 0 0 60px rgba(90,230,255,.45), 0 0 20px rgba(90,230,255,.3); }

/* ============================================================
   V6 扫描分栏 · 绯红金
   ============================================================ */
#zsws-splash.zs-v6 { background: #0a0c12; }
#zsws-splash.zs-v6::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(255,70,70,.05) 0 2px, transparent 2px 34px);
}
#zsws-splash.zs-v6 .zs-kicker { color: #ff8a8a; }
#zsws-splash.zs-v6 .zs-title { text-shadow: 0 0 30px rgba(255,90,90,.5); }
#zsws-splash.zs-v6 .zs-enter { border-color: rgba(255,120,120,.55); }

/* ============================================================
   V7 水墨晕染 · 玄墨
   ============================================================ */
#zsws-splash.zs-v7 { background: radial-gradient(120% 120% at 50% 40%, #22262e 0%, #0e1116 55%, #050608 100%); }
#zsws-splash.zs-v7 .zs-kicker { color: #d7dde6; }
#zsws-splash.zs-v7 .zs-title { font-weight: 600; letter-spacing: .12em; text-shadow: 0 0 40px rgba(255,255,255,.25); }
#zsws-splash.zs-v7 .zs-sub { color: rgba(220,226,235,.78); }

/* ============================================================
   V8 霓虹脉冲 · 品红
   ============================================================ */
#zsws-splash.zs-v8 { background: #12040e; }
#zsws-splash.zs-v8 .zs-kicker { color: #ff7ad9; }
#zsws-splash.zs-v8 .zs-title { text-shadow: 0 0 42px rgba(255,80,210,.6), 0 0 8px rgba(255,120,225,.7); }
#zsws-splash.zs-v8 .zs-enter { border-color: rgba(255,110,215,.6); }

/* ============================================================
   V9 几何切面 · 蓝紫
   ============================================================ */
#zsws-splash.zs-v9 { background: linear-gradient(135deg, #10133a 0%, #241a55 50%, #0b1024 100%); }
#zsws-splash.zs-v9 .zs-kicker { color: #aab4ff; }
#zsws-splash.zs-v9 .zs-title { text-shadow: 0 0 36px rgba(130,120,255,.5); }

/* ============================================================
   V10 放射光芒 · 鎏金脉冲
   ============================================================ */
#zsws-splash.zs-v10 { background: radial-gradient(100% 100% at 50% 50%, #2c1d08 0%, #14100a 55%, #070608 100%); }
#zsws-splash.zs-v10::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; z-index: 1;
  transform: translate(-50%,-50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,190,90,.07) 0 2deg, transparent 2deg 9deg);
  animation: zsSpin 60s linear infinite;
}
@keyframes zsSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
#zsws-splash.zs-v10 .zs-kicker { color: #ffd98a; }
#zsws-splash.zs-v10 .zs-title { background: linear-gradient(180deg, #fff6df 15%, #f0b65f 70%, #8a5c16 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================
   V11 波浪文字 · 海蓝青
   ============================================================ */
#zsws-splash.zs-v11 { background: linear-gradient(170deg, #06253a 0%, #0a4a63 40%, #04131f 100%); }
#zsws-splash.zs-v11 .zs-kicker { color: #7fe4ff; }
#zsws-splash.zs-v11 .zs-title em { display: inline-block; animation: zsWave 2.6s ease-in-out infinite; }
@keyframes zsWave { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ============================================================
   V12 3D 翻转 · 暖橙
   ============================================================ */
#zsws-splash.zs-v12 { background: radial-gradient(120% 120% at 20% 30%, #3c1c08 0%, #160d07 50%, #070605 100%); }
#zsws-splash.zs-v12 .zs-kicker { color: #ffb077; }
#zsws-splash.zs-v12 .zs-title { text-shadow: 0 0 40px rgba(255,150,70,.5); }
#zsws-splash.zs-v12 .zs-title em { display: inline-block; }
#zsws-splash.zs-v12.zs-in .zs-title em { animation: zsFlipIn 1s cubic-bezier(.16,1,.3,1) forwards; opacity: 0; }
@keyframes zsFlipIn { from { opacity:0; transform: rotateX(95deg) translateY(20px); } to { opacity:1; transform:none; } }

/* ============================================================
   V13 故障闪烁 · 银白红
   ============================================================ */
#zsws-splash.zs-v13 { background: #0c0c0f; }
#zsws-splash.zs-v13 .zs-kicker { color: #ff6b6b; }
#zsws-splash.zs-v13 .zs-title { color: #f2f4f8; text-shadow: 3px 0 0 rgba(255,60,60,.55), -3px 0 0 rgba(60,180,255,.5); }
#zsws-splash.zs-v13.zs-in .zs-title { animation: zsGlitch .9s steps(2, jump-none) both .45s; }
@keyframes zsGlitch {
  0%,100% { transform: translate(0); filter: none; }
  12% { transform: translate(-3px,1px); filter: hue-rotate(20deg); }
  24% { transform: translate(3px,-1px); }
  36% { transform: translate(-4px,0); filter: hue-rotate(-25deg); }
  48% { transform: translate(0,2px); }
}

/* ============================================================
   V14 云层金光 · 暖阳
   ============================================================ */
#zsws-splash.zs-v14 { background: linear-gradient(175deg, #2c2410 0%, #5a4a20 38%, #1c1408 100%); }
#zsws-splash.zs-v14 .zs-kicker { color: #ffe3a0; }
#zsws-splash.zs-v14 .zs-title { text-shadow: 0 4px 60px rgba(255,200,90,.55); }

/* ============================================================
   V15 字母坠落重组 · 电光蓝
   ============================================================ */
#zsws-splash.zs-v15 { background: radial-gradient(120% 120% at 60% 20%, #10305c 0%, #081426 55%, #040810 100%); }
#zsws-splash.zs-v15 .zs-kicker { color: #8cc8ff; }
#zsws-splash.zs-v15 .zs-title em { display: inline-block; }
#zsws-splash.zs-v15.zs-in .zs-title em { animation: zsDropIn .8s cubic-bezier(.22,1,.36,1) forwards; opacity: 0; transform: translateY(-70px); }
@keyframes zsDropIn { from { opacity:0; transform: translateY(-70px); } to { opacity:1; transform:none; } }

/* ============================================================
   V16 光点轨迹 · 翡翠金
   ============================================================ */
#zsws-splash.zs-v16 { background: radial-gradient(120% 120% at 50% 60%, #0d3525 0%, #071710 45%, #040907 100%); }
#zsws-splash.zs-v16 .zs-kicker { color: #8fffc9; }
#zsws-splash.zs-v16 .zs-title { background: linear-gradient(180deg, #eaffe6 20%, #7ee6a6 70%, #2e8f5e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================
   V17 网格透视 · 科技深蓝
   ============================================================ */
#zsws-splash.zs-v17 { background: linear-gradient(150deg, #0a1f38 0%, #0c2f52 55%, #071524 100%); }
#zsws-splash.zs-v17::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(rgba(90,170,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(90,170,255,.14) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(600px) rotateX(24deg) scale(1.4);
  transform-origin: 50% 120%;
  animation: zsGrid 24s linear infinite;
}
@keyframes zsGrid { to { background-position: 0 540px, 0 0; } }
#zsws-splash.zs-v17 .zs-kicker { color: #8fd0ff; }
#zsws-splash.zs-v17 .zs-title { text-shadow: 0 0 34px rgba(80,160,255,.55); }

/* ============================================================
   V18 胶片翻页 · 黑白金
   ============================================================ */
#zsws-splash.zs-v18 { background: #0b0b0d; }
#zsws-splash.zs-v18::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 92px);
  animation: zsFilm 14s linear infinite;
}
@keyframes zsFilm { to { background-position: 920px 0; } }
#zsws-splash.zs-v18 .zs-kicker { color: #e8c38a; }
#zsws-splash.zs-v18 .zs-title { font-weight: 600; letter-spacing: .08em; }

/* ============================================================
   V19 环绕光圈 · 紫金
   ============================================================ */
#zsws-splash.zs-v19 { background: radial-gradient(110% 110% at 50% 50%, #2a1145 0%, #140a24 50%, #070409 100%); }
#zsws-splash.zs-v19::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 56vmin; height: 56vmin; z-index: 1;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(200,160,255,.35);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(190,120,255,.25), inset 0 0 60px rgba(190,120,255,.15);
  animation: zsRing 9s linear infinite;
}
#zsws-splash.zs-v19::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 40vmin; height: 40vmin; z-index: 1;
  transform: translate(-50%,-50%);
  border: 1px dashed rgba(255,210,130,.28);
  border-radius: 50%;
  animation: zsRing 13s linear infinite reverse;
}
@keyframes zsRing { to { transform: translate(-50%,-50%) rotate(360deg); } }
#zsws-splash.zs-v19 .zs-kicker { color: #cfa9ff; }
#zsws-splash.zs-v19 .zs-title { text-shadow: 0 0 40px rgba(200,130,255,.5); }

/* ============================================================
   V20 沙漏流光 · 古金棕
   ============================================================ */
#zsws-splash.zs-v20 { background: radial-gradient(120% 120% at 50% 30%, #3a2610 0%, #1c1208 50%, #090604 100%); }
#zsws-splash.zs-v20 .zs-kicker { color: #ffcf8f; }
#zsws-splash.zs-v20 .zs-title { text-shadow: 0 0 44px rgba(240,170,80,.5); }
#zsws-splash.zs-v20 .zs-sub { color: rgba(255,220,170,.8); }

/* ============ 移动端适配 ============ */
@media (max-width: 768px) {
  .zs-kicker { letter-spacing: .3em; margin-bottom: 16px; }
  .zs-sub { max-width: 92vw; }
  .zs-bar { width: 150px; margin-top: 24px; }
  .zs-enter { margin-top: 34px; padding: 12px 30px; font-size: 13px; }
  .zs-tag { letter-spacing: .3em; font-size: 9px; bottom: 22px; }
}

/* 打印/低动画偏好：直接隐藏 splash */
@media (prefers-reduced-motion: reduce) {
  #zsws-splash { display: none !important; }
}