/* ══════════════════════════════════════
   SPLASH SCREEN — Mẫu 1: Kim & Chỉ
══════════════════════════════════════ */
#splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  cursor: pointer;
  user-select: none;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              opacity  0.3s ease 0.4s;
}
#splash.exit {
  transform: translateY(-100%);
  opacity: 0;
}

/* Radial green glow */
#splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 45% at 50% 42%, rgba(34,197,94,0.09) 0%, transparent 70%);
  pointer-events: none;
}

/* ── SVG rings ── */
.sp-ring-svg { width: 260px; height: 260px; overflow: visible; }

#sp-outer-ring {
  stroke-dasharray: 691;
  stroke-dashoffset: 691;
  animation: sp-draw 2.8s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
}
#sp-inner-ring {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  animation: sp-draw 1.8s ease-out 1.6s forwards;
}
@keyframes sp-draw { to { stroke-dashoffset: 0; } }

#sp-needle-group {
  opacity: 0;
  animation: sp-pop 0.3s ease 0.3s forwards;
}
@keyframes sp-pop { to { opacity: 1; } }

#sp-spool-g {
  opacity: 0;
  animation: sp-fade 1s ease 2.2s forwards;
}
#sp-spool-lines {
  transform-origin: 130px 130px;
  animation: sp-spin 5s linear 2.2s infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-fade { to { opacity: 1; } }

/* ── Brand block ── */
.sp-brand {
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  animation: sp-up 1s ease 2.6s forwards;
}
.sp-brand-name {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  font-family: var(--font);
  text-shadow: 0 0 28px rgba(255,255,255,0.28);
}
.sp-brand-sub {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #444;
  font-family: var(--font);
  margin-top: 5px;
}

/* ── Welcome text ── */
.sp-welcome {
  text-align: center;
  max-width: 280px;
  padding: 0 1rem;
  opacity: 0;
  transform: translateY(10px);
  animation: sp-up 1s ease 3.1s forwards;
}
.sp-welcome-text {
  font-size: 0.88rem;
  font-style: italic;
  color: #606060;
  font-family: var(--font);
  line-height: 1.6;
  border-left: 2px solid rgba(34,197,94,0.4);
  padding-left: 0.75rem;
  text-align: left;
}

/* ── Tap hint ── */
.sp-tap {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #333;
  font-family: var(--font);
  opacity: 0;
  animation: sp-fade 1s ease 4.2s forwards, sp-blink 2.2s ease-in-out 5.2s infinite;
}
@keyframes sp-blink { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes sp-up { to { opacity: 1; transform: translateY(0); } }