/* Splash de Veltrix Studios (veltrix.js). El elemento .splash va en el HTML y tapa todo desde el primer pintado; su
   fondo (el del juego, el mismo que el del arranque nativo: un degradado como el de aquí) se le pone en línea en el
   HTML, para que se vea antes de que cargue nada. Encima, un fogonazo, las pavesas del juego y el sello, el mismo en
   todos los juegos: la V (cada trazo por su lado), «VELTRIX» que asoma desde abajo, la raya lima que se tiende bajo
   el nombre y «STUDIOS». Los retrasos y las duraciones, en línea (los de T). */
.splash { position: fixed; inset: 0; z-index: 150; overflow: hidden; touch-action: none; background: radial-gradient(circle at 50% 50%, #1a1c24 0%, #0d0e13 55%, #08090d 100%); transition: opacity 0.45s ease; }
.splash.fuera { opacity: 0; pointer-events: none; }
.vx-lienzo, .vx-fogonazo { position: absolute; inset: 0; width: 100%; height: 100%; }
.vx-fogonazo { opacity: 0; pointer-events: none; animation: vx-fogonazo 0.7s ease-out both; }
.vx-sello { position: absolute; left: 50%; top: 50%; aspect-ratio: 1600 / 740; transform: translate(-50%, -50%); transition: transform 0.7s cubic-bezier(0.3, 0.1, 0.2, 1); will-change: transform; pointer-events: none; }
.splash.corre .vx-sello { transform: translate(-50%, -65%) scale(0.8); }
.vx-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vx-marca-blanca { animation: vx-de-izquierda 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.vx-marca-lima { animation: vx-de-arriba 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.vx-nombre { animation: vx-asoma 0.6s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.vx-raya { transform-box: fill-box; transform-origin: 0 50%; animation: vx-raya 0.75s cubic-bezier(0.6, 0, 0.2, 1) both; }
.vx-studios { animation: vx-aparece 0.6s ease-out both; }
@keyframes vx-fogonazo { 0% { opacity: 0; } 12% { opacity: 0.95; } 100% { opacity: 0; } }
/* (la V, en sus unidades: 64 × 56) */
@keyframes vx-de-izquierda { from { opacity: 0; transform: translateX(-13px); } to { opacity: 1; transform: translateX(0); } }
@keyframes vx-de-arriba { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
/* (el nombre, en unidades del escenario: sube desde debajo de su recorte) */
@keyframes vx-asoma { from { transform: translateY(150px); } to { transform: translateY(0); } }
@keyframes vx-raya { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vx-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .splash * { animation: none !important; transition: none !important; } }
