/* ============================================================
   开屏动画（Splash）—— 替换原来的 splash.jpg 静态图
   结构由 index.html 的 .splash 容器 + 这里注入的 DOM 组成，
   动画纯 CSS，进度由 app.js 的 splashDone() 控制淡出。

   设计：樱花花瓣飘落 + 中央樱花徽记「绽放」 + 底部进度点
   ============================================================ */

/* ---------- 容器 ---------- */
.splash {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,122,168,.22), transparent 58%),
    radial-gradient(circle at 50% 100%, rgba(224,85,138,.18), transparent 62%),
    #f7e8ed;
  transition: opacity .45s ease;
}
.splash.off { opacity: 0; pointer-events: none; }

html[data-theme="dark"] .splash {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,122,168,.20), transparent 58%),
    radial-gradient(circle at 50% 100%, rgba(224,85,138,.14), transparent 62%),
    #191114;
}

/* ---------- 樱花花瓣层 ---------- */
.sp-petals {
  position: absolute; inset: -10% -10%;
  pointer-events: none;
}
.sp-petal {
  position: absolute; top: -12%;
  width: 12px; height: 12px;
  background: linear-gradient(140deg, #ffb3cc, #ff7aa8);
  border-radius: 100% 0 100% 0;
  opacity: 0;
  filter: blur(.2px);
  animation: sp-fall linear infinite;
}
html[data-theme="dark"] .sp-petal {
  background: linear-gradient(140deg, #ff9ec1, #e0558a);
  opacity: 0;
}
@keyframes sp-fall {
  0%   { transform: translate3d(0,-10vh,0) rotate(0deg) scale(var(--s,1)); opacity: 0; }
  8%   { opacity: var(--o,.85); }
  90%  { opacity: var(--o,.85); }
  100% { transform: translate3d(var(--dx,40px), 115vh, 0) rotate(540deg) scale(var(--s,1)); opacity: 0; }
}

/* ---------- 中央徽记 ---------- */
.sp-core {
  position: relative;
  width: 168px; height: 168px;
  display: grid; place-items: center;
  animation: sp-pop .9s cubic-bezier(.22,1.2,.36,1) both;
}
@keyframes sp-pop {
  0%   { transform: scale(.55); opacity: 0; }
  55%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 外圈光环脉冲 */
.sp-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,122,168,.55);
  animation: sp-ring 2.2s ease-out infinite;
}
.sp-ring:nth-child(2) { animation-delay: .75s; }
.sp-ring:nth-child(3) { animation-delay: 1.5s; }
@keyframes sp-ring {
  0%   { transform: scale(.62); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: scale(1.42); opacity: 0; }
}

/* 樱花形状（CSS 画，不用图） */
.sp-sakura {
  position: relative;
  width: 96px; height: 96px;
  animation: sp-spin 9s linear infinite;
}
.sp-sakura i {
  position: absolute;
  left: 50%; top: 50%;
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  background: linear-gradient(150deg, #ffc2d8, #ff7aa8 62%, #e0558a);
  border-radius: 100% 0 100% 0;
  transform-origin: 50% 100%;
  box-shadow: 0 2px 10px rgba(224,85,138,.28);
}
.sp-sakura i:nth-child(1) { transform: rotate(0deg)   translateY(-24px); }
.sp-sakura i:nth-child(2) { transform: rotate(72deg)  translateY(-24px); }
.sp-sakura i:nth-child(3) { transform: rotate(144deg) translateY(-24px); }
.sp-sakura i:nth-child(4) { transform: rotate(216deg) translateY(-24px); }
.sp-sakura i:nth-child(5) { transform: rotate(288deg) translateY(-24px); }
@keyframes sp-spin {
  to { transform: rotate(360deg); }
}

/* ---------- 标题 ---------- */
.sp-title {
  margin: 26px 0 0;
  font-size: 22px; font-weight: 700;
  letter-spacing: .34em;
  text-indent: .34em;
  color: #e0558a;
  text-shadow: 0 0 18px rgba(255,122,168,.45);
  animation: sp-fadeup .7s .15s ease both;
}
html[data-theme="dark"] .sp-title { color: #ffc2d8; text-shadow: 0 0 22px rgba(255,122,168,.55); }

.sp-sub {
  margin: 9px 0 0;
  font-size: 12px; letter-spacing: .26em;
  text-indent: .26em;
  color: rgba(224,85,138,.8);
  animation: sp-fadeup .7s .22s ease both;
}
html[data-theme="dark"] .sp-sub { color: rgba(255,194,216,.8); }

@keyframes sp-fadeup {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 底部进度条 ---------- */
.sp-bar {
  position: absolute; left: 50%; bottom: calc(46px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: 108px; height: 3px;
  border-radius: 3px;
  background: rgba(224,85,138,.16);
  overflow: hidden;
  animation: sp-fadeup .7s .3s ease both;
}
.sp-bar span {
  display: block; height: 100%; width: 34%;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffb3cc, #ff7aa8);
  animation: sp-load 1.15s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes sp-load {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(400%); }
}

/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sp-petal, .sp-ring, .sp-sakura, .sp-bar span { animation: none !important; }
  .sp-petal { opacity: .5; }
}