/* Animación de entrada de la app (2,5 s). Se carga antes que app.css para verse al instante. */
@font-face { font-family: "Quicksand"; src: url("/fonts/quicksand-latin.woff2") format("woff2"); font-weight: 300 700; font-display: block; }
#splash { --sp-bg: #ffffff; --sp-ink: #0a0a0a; --sp-muted: #737373; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #splash { --sp-bg: #0a0a0a; --sp-ink: #fafafa; --sp-muted: #a3a3a3; } }
:root[data-theme="dark"] #splash { --sp-bg: #0a0a0a; --sp-ink: #fafafa; --sp-muted: #a3a3a3; }
#splash {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--sp-bg); color: var(--sp-ink);
  font-family: "Quicksand", ui-rounded, -apple-system, "Segoe UI", sans-serif;
  animation: sp-out 0.35s ease-in 2.15s forwards, sp-gone 0s linear 3.2s forwards;
}
#splash .sp-box { display: grid; justify-items: center; gap: 18px; }
#splash .sp-face { width: 112px; height: 112px; border-radius: 50%; background: var(--sp-ink); color: var(--sp-bg); display: grid; place-items: center;
  transform: scale(0); animation: sp-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards; }
#splash svg { width: 80%; height: 80%; overflow: visible; }
#splash .leaf, #splash .eye, #splash .dot { fill: currentColor; }
#splash .smile { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 32; stroke-dashoffset: 32; animation: sp-draw 0.45s ease-out 0.75s forwards; }
#splash .leaf { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0) rotate(-25deg); animation: sp-leaf 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s forwards; }
#splash .eye { transform-box: fill-box; transform-origin: center; animation: sp-blink 0.28s ease-in-out 1.45s; }
#splash .dot { opacity: 0; animation: sp-dot 0.9s ease-in-out forwards; }
#splash .dot:nth-child(1) { animation-delay: 1.1s; } #splash .dot:nth-child(2) { animation-delay: 1.2s; } #splash .dot:nth-child(3) { animation-delay: 1.3s; }
#splash .sp-word { display: flex; font-size: 34px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
#splash .sp-word span { opacity: 0; transform: translateY(14px); animation: sp-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
#splash .sp-tag { font-size: 14px; font-weight: 500; color: var(--sp-muted); opacity: 0; animation: sp-fade 0.5s ease-out 1.35s forwards; }
@keyframes sp-pop { to { transform: scale(1); } }
@keyframes sp-leaf { to { transform: scale(1) rotate(0); } }
@keyframes sp-draw { to { stroke-dashoffset: 0; } }
@keyframes sp-blink { 50% { transform: scaleY(0.1); } }
@keyframes sp-dot { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sp-up { to { opacity: 1; transform: none; } }
@keyframes sp-fade { to { opacity: 1; } }
@keyframes sp-out { to { opacity: 0; transform: scale(1.04); } }
@keyframes sp-gone { to { visibility: hidden; } }

#splash .sp-word span:nth-child(1) { animation-delay: 0.55s; } #splash .sp-word span:nth-child(2) { animation-delay: 0.6s; } #splash .sp-word span:nth-child(3) { animation-delay: 0.65s; } #splash .sp-word span:nth-child(4) { animation-delay: 0.7s; }
#splash .sp-word span:nth-child(5) { animation-delay: 0.75s; } #splash .sp-word span:nth-child(6) { animation-delay: 0.8s; } #splash .sp-word span:nth-child(7) { animation-delay: 0.85s; } #splash .sp-word span:nth-child(8) { animation-delay: 0.9s; }
@media (prefers-reduced-motion: reduce) {
  #splash, #splash * { animation-duration: 0.01s !important; animation-delay: 0s !important; }
  #splash { animation: sp-out 0.4s ease-in 0.9s forwards, sp-gone 0s linear 1.3s forwards !important; }
}