/* ============================================================
   splash.css — 开屏动画（票据印刷风）
   品牌印章 → 小票打印 → 上滑进入
   ============================================================ */

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  margin: 0 auto;
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image:
    radial-gradient(72% 52% at 16% 46%, rgba(244, 211, 94, 0.16), transparent 72%),
    radial-gradient(circle at 88% 78%, rgba(238, 108, 77, 0.08), transparent 42%);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease;
  touch-action: none;
  overflow: hidden;
}

.splash.is-leaving {
  transform: translateY(-100%);
  opacity: 0.6;
}

.splash-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--safe-top) 24px var(--safe-bottom);
}

/* ---------- 品牌印章 ---------- */
.splash-brand {
  position: relative;
  animation: spStamp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both;
}

.splash-brand-img {
  display: block;
  width: 260px;
  height: auto;
  object-fit: contain;
}

.splash-brand-no {
  position: absolute;
  top: -11px;
  right: -13px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--brand-yellow);
  color: var(--ink);
  padding: 2px 7px;
  border-radius: 3px;
  border: 1.5px solid var(--ink);
  transform: rotate(3deg);
}

@keyframes spStamp {
  0% {
    opacity: 0;
    transform: scale(1.8) rotate(-7deg);
  }

  55% {
    opacity: 1;
    transform: scale(0.94) rotate(-1deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.splash-tag {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  animation: spFade 0.6s ease 0.85s both;
}

/* ---------- 出票口 + 小票打印 ---------- */
.splash-printer {
  margin-top: 30px;
  width: 232px;
}

.splash-slot {
  position: relative;
  z-index: 2;
  height: 12px;
  border-radius: 6px;
  background: #2a261f;
  box-shadow: 0 2px 6px rgba(40, 34, 20, 0.35), inset 0 -2px 3px rgba(0, 0, 0, 0.5);
  animation: spFade 0.4s ease 1s both;
}

.splash-rcpt-clip {
  /* 只裁顶部：小票从出票口滑出时遮住上方（spPrint 动画起点在框外）。
     左右/底部用负 inset 留出余量，不裁切 .splash-rcpt 的投影 ——
     overflow:hidden/clip 会把投影硬切成矩形边，正是之前看到的「色差」。 */
  clip-path: inset(0 -60px -60px -60px);
  padding: 0 10px 26px;
  margin-top: -2px;
}

.splash-rcpt {
  background: var(--rcpt-paper);
  box-shadow: 0 2px 4px rgba(40, 34, 20, 0.1), 0 18px 36px -16px rgba(40, 34, 20, 0.4);
  font-family: var(--font-mono);
  color: var(--rcpt-ink);
  animation: spPrint 1.6s cubic-bezier(0.25, 0.7, 0.3, 1) 1.25s both;
}

@keyframes spPrint {
  from {
    transform: translateY(-103%);
  }

  to {
    transform: translateY(0);
  }
}

.splash-rcpt-body {
  padding: 14px 16px 13px;
}

.splash-rcpt-head {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: #6b6453;
  text-align: center;
  animation: spFade 0.45s ease 1.7s both;
  margin-bottom: 10px;
}

.splash-rule {
  border-top: 1.5px dashed #c8bb9c;
  margin: 10px 0;
}

.splash-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-family: var(--font-cn);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rcpt-ink);
  /* 逐行盖章出现，延迟由各行内联的 --d 控制 */
  animation: spStampLine 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 1.95s) both;
}

.splash-line .ic {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
}

.splash-line .tx {
  flex: 1;
  text-align: center;
}

.splash-line .ic svg {
  width: 100%;
  height: 100%;
}

.splash-line .no {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  color: #b07a2a;
  letter-spacing: 0.08em;
}

@keyframes spStampLine {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }

  60% {
    opacity: 1;
    transform: scale(0.97);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.splash-bc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  animation: spFade 0.5s ease 3.35s both;
}

.splash-bc svg {
  opacity: 0.85;
}

.splash-bc span {
  font-size: 8.5px;
  letter-spacing: 0.22em;
  color: #6b6453;
}

@keyframes spFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 上滑提示 ---------- */
.splash-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--ink-soft);
  cursor: pointer;
  animation: spFade 0.6s ease 3.75s both;
  -webkit-user-select: none;
  user-select: none;
}

.splash-chev {
  width: 22px;
  height: 22px;
  animation: spBounce 1.6s ease-in-out 3.75s infinite;
}

.splash-chev svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes spBounce {

  0%,
  100% {
    transform: translateY(4px);
    opacity: 0.55;
  }

  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* 减少动态效果偏好：跳过动画直接呈现 */
@media (prefers-reduced-motion: reduce) {

  .splash *,
  .splash {
    animation-duration: 0.01s !important;
    animation-delay: 0s !important;
  }
}