/* ============================================================
   kp-splash.css — Intro de KinesPrime
   La corona desciende girando, rebota y queda posada sobre la
   palabra; las letras aparecen una a una con brillo dorado.
   ============================================================ */
html.kp-splash-lock, html.kp-splash-lock body { overflow: hidden; }

.kp-splash {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 40%, #3a0b2b 0%, #1a0616 55%, #0b0310 100%);
  overflow: hidden; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: opacity .7s cubic-bezier(.4,0,.2,1), filter .7s ease;
}
.kp-splash.is-leaving { opacity: 0; filter: blur(6px); pointer-events: none; }

.kp-splash-glow {
  position: absolute; width: min(90vw, 620px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 79, 139, .38) 0%, rgba(199, 62, 168, .16) 40%, transparent 70%);
  opacity: 0; transform: scale(.6);
}
.is-playing .kp-splash-glow { animation: kps-glow 2.6s ease-out forwards; }
@keyframes kps-glow { 40% { opacity: 1; transform: scale(1); } 100% { opacity: .75; transform: scale(1.08); } }

.kp-splash-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 16px; }

/* Corona */
.kp-splash-crown {
  width: clamp(74px, 17vw, 124px); height: auto; margin-bottom: -0.2em;
  filter: drop-shadow(0 10px 22px rgba(255, 170, 60, .45));
  opacity: 0; transform: translateY(-60vh) rotate(-28deg) scale(.8);
}
.is-playing .kp-splash-crown { animation: kps-crown 1.15s cubic-bezier(.2,.9,.25,1) .15s forwards, kps-bob 3s ease-in-out 1.6s infinite; }
@keyframes kps-crown {
  0%   { opacity: 0; transform: translateY(-60vh) rotate(-28deg) scale(.8); }
  55%  { opacity: 1; transform: translateY(10px) rotate(8deg) scale(1.05); }
  72%  { transform: translateY(-14px) rotate(-6deg) scale(.98); }
  86%  { transform: translateY(3px) rotate(3deg) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes kps-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.kps-shine { opacity: 0; }
.is-playing .kps-shine { animation: kps-shine 1s ease-in-out 1.35s forwards; }
@keyframes kps-shine { 0% { opacity: 1; transform: skewX(-20deg) translateX(0); } 100% { opacity: 1; transform: skewX(-20deg) translateX(190px); } }

/* Palabra */
.kp-splash-word {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.8rem, 12vw, 6.2rem); font-weight: 700; line-height: 1.05; letter-spacing: -.01em;
  white-space: nowrap;
}
.kp-splash-word b {
  display: inline-block; font-weight: inherit;
  opacity: 0; transform: translateY(.45em); filter: blur(8px);
}
.kps-kines b { color: #fff4f8; }
.kps-prime b {
  background: linear-gradient(135deg, #ffd6e6 0%, #ff4f8b 45%, #c73ea8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.is-playing .kp-splash-word b {
  animation: kps-letter .6s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(.55s + var(--i) * 55ms);
}
@keyframes kps-letter { to { opacity: 1; transform: none; filter: blur(0); } }

.kp-splash-tag {
  margin-top: 12px; color: rgba(255, 214, 230, .75);
  font: 600 clamp(.66rem, 2.6vw, .82rem)/1 "Outfit", system-ui, sans-serif;
  letter-spacing: .32em; text-transform: uppercase; opacity: 0;
}
.is-playing .kp-splash-tag { animation: kps-fade .8s ease 1.35s forwards; }
@keyframes kps-fade { to { opacity: 1; } }

.kp-splash-line { margin-top: 26px; width: min(180px, 46vw); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.kp-splash-line i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd166, #ff4f8b, #c73ea8); }
.is-playing .kp-splash-line i { animation: kps-load 2.4s cubic-bezier(.6,.1,.3,1) .3s forwards; }
@keyframes kps-load { to { width: 100%; } }

/* Destellos */
.kp-splash-sparks i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #ffe39a; box-shadow: 0 0 12px 3px rgba(255, 210, 120, .7); opacity: 0;
}
.kp-splash-sparks i:nth-child(1) { top: 30%; left: 22%; animation-delay: 1.2s; }
.kp-splash-sparks i:nth-child(2) { top: 24%; left: 70%; animation-delay: 1.35s; }
.kp-splash-sparks i:nth-child(3) { top: 62%; left: 16%; animation-delay: 1.5s; }
.kp-splash-sparks i:nth-child(4) { top: 68%; left: 80%; animation-delay: 1.3s; }
.kp-splash-sparks i:nth-child(5) { top: 44%; left: 88%; animation-delay: 1.6s; width: 4px; height: 4px; }
.kp-splash-sparks i:nth-child(6) { top: 40%; left: 9%;  animation-delay: 1.45s; width: 4px; height: 4px; }
.kp-splash-sparks i:nth-child(7) { top: 16%; left: 46%; animation-delay: 1.7s; width: 3px; height: 3px; }
.kp-splash-sparks i:nth-child(8) { top: 80%; left: 50%; animation-delay: 1.55s; width: 3px; height: 3px; }
.is-playing .kp-splash-sparks i { animation-name: kps-spark; animation-duration: 1.6s; animation-timing-function: ease-out; animation-fill-mode: both; }
@keyframes kps-spark { 0% { opacity: 0; transform: scale(0); } 30% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(.4) translateY(-20px); } }

@media (prefers-reduced-motion: reduce) {
  .kp-splash *, .kp-splash { animation-duration: .01s !important; animation-delay: 0s !important; }
}