/* v5.7 (просьба владельца, 10 октября 2026): заставка при запуске «Разрез Бездны» (js/intro.js).
   #intro стоит в разметке чёрным с первого кадра (чтобы меню не мелькнуло до заставки); если скрипт не запустился —
   через 14 с исчезает сам. Дальше (класс run) фон рисует холст ролика и к концу прозрачнеет — под ним уже меню. */
#intro { position: fixed; inset: 0; z-index: 9000; background: #000; cursor: none; animation: introFailsafe .4s 14s forwards; } /* ролик не пропускается — курсор не нужен */
#intro.run { background: transparent; animation: none; }
#intro canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
@keyframes introFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* пока идёт заставка: логотипа в меню нет (его роль играет летящий логотип ролика), пункты меню спрятаны слева */
html.ns-intro-logo .lobby-stage #L-logo { visibility: hidden; }
html.ns-intro .lobby-stage :is(#M-menu .mm-btn, #M-sub, #ns-me) { opacity: 0; translate: -40px 0; }
html.ns-intro .lobby-stage #ns-me { translate: 0 -18px; }
/* логотип долетел — пункты по очереди выезжают (translate/opacity, чтобы не спорить с анимацией табличек lbDrop) */
html.ns-intro.ns-intro-in .lobby-stage :is(#M-menu .mm-btn, #M-sub, #ns-me) { opacity: 1; translate: 0 0; transition: opacity .5s ease-out, translate .7s cubic-bezier(.16, .84, .24, 1); }
html.ns-intro.ns-intro-in .lobby-stage #M-menu .mm-btn:nth-of-type(2) { transition-delay: .07s; }
html.ns-intro.ns-intro-in .lobby-stage #M-menu .mm-btn:nth-of-type(3) { transition-delay: .14s; }
html.ns-intro.ns-intro-in .lobby-stage #M-menu .mm-btn:nth-of-type(4) { transition-delay: .21s; }
html.ns-intro.ns-intro-in .lobby-stage #M-sub { transition-delay: .3s; }
html.ns-intro.ns-intro-in .lobby-stage #ns-me { transition-delay: .18s; }
html.ns .lobby-stage #L-logo.ns-pix { cursor: pointer; } /* нажатие — заставка ещё раз */

/* экран «Нажмите, чтобы войти» перед роликом: мерцающая искра в центре (с неё начинается ролик) и тонкая надпись */
#intro.gate { animation: none; cursor: pointer; }
#intro .intro-gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
#intro .ig-star { position: relative; width: 30px; height: 30px; margin-top: 15px; animation: igPulse 2.6s ease-in-out infinite; }
#intro .ig-star::before, #intro .ig-star::after { content: ''; position: absolute; left: 50%; top: 50%; background: #fff2fd; box-shadow: 0 0 10px #c277fa, 0 0 24px #7a2bd2; }
#intro .ig-star::before { width: 5px; height: 30px; margin: -15px 0 0 -2.5px; }
#intro .ig-star::after { width: 30px; height: 5px; margin: -2.5px 0 0 -15px; }
#intro .ig-txt { position: absolute; top: calc(50% + 46px); font: 400 14px / 1 var(--ns-font, sans-serif); letter-spacing: .55em; text-indent: .55em; text-transform: uppercase; color: #d8c4ff; animation: igText 2.6s ease-in-out infinite; }
@keyframes igPulse { 0%, 100% { transform: scale(.62); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
@keyframes igText { 0%, 100% { opacity: .3; } 50% { opacity: .85; } }
/* v5.8: загрузка перед экраном входа (звуки и картинки ролика готовятся заранее) — та же искра, «Загрузка…» и тонкая полоса */
#intro.load { cursor: progress; }
#intro .ig-bar { position: absolute; top: calc(50% + 72px); width: 180px; height: 3px; background: #1c0830; box-shadow: 0 0 0 1px #270b45; }
#intro .ig-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7a2bd2, #c277fa); box-shadow: 0 0 8px #9040e6; transition: width .2s linear; }
#intro:not(.load) .ig-bar { display: none; }