/* Заставка загрузки: тёмный космос со звёздной пылью, «нажмите любую клавишу», после нажатия — появление логотипа
   IGORJIma GAMES, как у Kojima Productions (луч света проходит по эмблеме слева направо, проявляется подпись) — один раз.
   Постоянно движется только пыль — медленно и плавно, без мигания. Поведение — splash.js. */
#splash { position: absolute; inset: 0; z-index: 2; background: #020308; overflow: hidden; transition: opacity 1.2s ease; }
#splash.done { opacity: 0; pointer-events: none; }
#splash-stars, #splash-dust { position: absolute; inset: 0; width: 100%; height: 100%; }

#splash-press { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center;
  font: 500 13px/1 system-ui, sans-serif; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(226, 234, 246, .72); opacity: 0; animation: splash-fade 1.6s ease .6s forwards; transition: opacity .5s ease; }
#splash.pressed #splash-press { animation: none; opacity: 0; }

#splash-logo { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: min(300px, 46vw, 34vh); visibility: hidden; }
#splash.pressed #splash-logo { visibility: visible; }
#splash-emblem { position: relative; aspect-ratio: 660 / 700; }
#splash-emblem img, #splash-glint { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Сначала силуэт еле виден в темноте, потом по нему проходит холодный луч и за лучом эмблема светлеет. */
#splash-dim { opacity: 0; }
#splash-bright { opacity: 0; -webkit-mask-image: linear-gradient(100deg, #000 40%, transparent 56%);
  mask-image: linear-gradient(100deg, #000 40%, transparent 56%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0; }
#splash-glint { opacity: 0; background: linear-gradient(100deg, transparent 42%, rgba(170, 214, 255, .95) 50%, transparent 58%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-mask: url(emblem.svg) center / contain no-repeat; mask: url(emblem.svg) center / contain no-repeat; }
#splash-wordmark { display: block; width: 92%; margin: 4% 0 0 auto; opacity: 0; }

#splash.pressed #splash-dim { animation: splash-dim 1.2s ease-out forwards; }
#splash.pressed #splash-glint { animation: splash-sweep 2s cubic-bezier(.45, 0, .25, 1) .7s forwards; }
#splash.pressed #splash-bright { animation: splash-reveal 2s cubic-bezier(.45, 0, .25, 1) .85s forwards; }
#splash.pressed #splash-emblem { animation: splash-glow 1.6s ease-out 2.7s; }
#splash.pressed #splash-wordmark { animation: splash-word 1.4s ease-out 2.5s forwards; }

#splash-status { position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%); display: flex;
  flex-direction: column; align-items: center; gap: 12px; }
#splash-bar { width: min(220px, 46vw); height: 1px; background: rgba(226, 234, 246, .14); overflow: hidden; }
#splash-fill { width: 0; height: 100%; background: rgba(226, 234, 246, .8); transition: width .3s linear; }
#splash-text { font: 500 10px/1 system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(226, 234, 246, .42); }

@keyframes splash-fade { to { opacity: 1; } }
@keyframes splash-dim { to { opacity: .13; } }
@keyframes splash-sweep { 0% { opacity: 1; background-position: 100% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }
@keyframes splash-reveal { 0% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  100% { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes splash-glow { 0% { filter: drop-shadow(0 0 0 rgba(150, 200, 255, 0)); }
  35% { filter: drop-shadow(0 0 22px rgba(150, 200, 255, .45)); } 100% { filter: drop-shadow(0 0 0 rgba(150, 200, 255, 0)); } }
@keyframes splash-word { from { opacity: 0; transform: translateY(6px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); } }

@media (prefers-reduced-motion: reduce) {
  #splash.pressed #splash-dim, #splash.pressed #splash-glint, #splash.pressed #splash-emblem { animation: none; }
  #splash.pressed #splash-bright { animation: none; opacity: 1; -webkit-mask-image: none; mask-image: none; }
  #splash.pressed #splash-wordmark { animation: none; opacity: 1; }
}