/* Splash de Gameloz (gameloz.js). El elemento .splash va en el HTML y tapa todo desde el primer
   pintado; su fondo (el del juego: un degradado como el de aquí) se le pone en línea en el HTML,
   para que se vea antes de que cargue nada. El sello (el emblema dorado y «Gameloz» en blanco) y
   su entrada son los mismos en todos los juegos: el emblema llega por la izquierda y el nombre
   por la derecha, se encuentran y rebotan uno contra otro; luego un brillo cruza el emblema.
   --u: los píxeles de una unidad del sello (lo pone gameloz.js). */
.splash { position: fixed; inset: 0; z-index: 150; overflow: hidden; touch-action: none; background: radial-gradient(circle at 50% 50%, #2a2a33 0%, #131318 55%, #0b0b0d 100%); transition: opacity 0.45s ease; }
.splash.fuera { opacity: 0; pointer-events: none; }
.gz-lienzo, .gz-fogonazo { position: absolute; inset: 0; width: 100%; height: 100%; }
.gz-fogonazo { opacity: 0; pointer-events: none; animation: gz-fogonazo 0.7s ease-out both; }
.gz-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 .gz-sello { transform: translate(-50%, -65%) scale(0.8); }
.gz-sello > * { position: absolute; }
.gz-emblema > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.gz-emblema { animation: gz-de-izquierda 1s both; will-change: transform, opacity; }
.gz-nombre { animation: gz-de-derecha 1s both; will-change: transform, opacity; }
.gz-palabra { display: block; width: 100%; height: 100%; }
/* el brillo: una franja de luz que cruza el emblema, recortada a su forma */
.gz-emblema > .gz-brillo { width: auto; height: auto; overflow: hidden; }
.gz-brillo > i { position: absolute; top: -25%; bottom: -25%; left: 0; width: 42%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-160%) skewX(-20deg); animation: gz-brillo 0.85s cubic-bezier(0.4, 0, 0.2, 1) both; will-change: transform; }
@keyframes gz-fogonazo { 0% { opacity: 0; } 12% { opacity: 0.95; } 100% { opacity: 0; } }
/* la entrada: vienen lanzados, se encuentran (al 46 %: casi se tocan), rebotan hacia fuera y se
   asientan. Los dos, lo mismo y a la vez, cada uno desde su lado */
@keyframes gz-de-izquierda {
  0% { opacity: 0; transform: translateX(calc(var(--u) * -820)); animation-timing-function: cubic-bezier(0.45, 0, 0.85, 0.7); }
  14% { opacity: 1; }
  46% { transform: translateX(calc(var(--u) * 24)); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  66% { transform: translateX(calc(var(--u) * -15)); animation-timing-function: ease-in-out; }
  84% { transform: translateX(calc(var(--u) * 6)); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes gz-de-derecha {
  0% { opacity: 0; transform: translateX(calc(var(--u) * 1150)); animation-timing-function: cubic-bezier(0.45, 0, 0.85, 0.7); }
  14% { opacity: 1; }
  46% { transform: translateX(calc(var(--u) * -24)); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  66% { transform: translateX(calc(var(--u) * 15)); animation-timing-function: ease-in-out; }
  84% { transform: translateX(calc(var(--u) * -6)); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes gz-brillo { from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(320%) skewX(-20deg); } }
@media (prefers-reduced-motion: reduce) { .splash * { animation: none !important; transition: none !important; } }