/* Заставка: видео А по кругу → «Войти» → видео Б → неон моргает → сайт */
#intro{display:none}
html.intro-on{overflow:hidden}
html.intro-on #intro{display:block;position:fixed;inset:0;z-index:1000;background:#000;overflow:hidden;font-family:'Onest',system-ui,sans-serif;transition:opacity .7s ease}
/* пока идёт заставка, текст первого экрана спрятан; анимация появления стартует заново, когда открывается сайт (так надёжно и в Safari) */
html.intro-on .ceh-hero>*{animation:none;opacity:0}
html.intro-on .ceh-navbar{animation:none;transform:translateY(-100%)}

#intro .intro-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#intro-b{opacity:0}
#intro.is-b #intro-b{opacity:1}
#intro.is-b #intro-a{visibility:hidden}
#intro .intro-shade{display:none}

/* Комната с неоном: та же картинка, что фон первого экрана сайта */
#intro .intro-light{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(10,10,10,.75),rgba(10,10,10,0) 70%),linear-gradient(to bottom,rgba(10,10,10,.35),rgba(10,10,10,0) 25%,rgba(10,10,10,0) 70%,#0a0a0a),url('../assets/hero-container.webp') center/cover no-repeat,#0a0a0a}
#intro.is-dark .intro-v{opacity:0}
#intro.is-flicker .intro-light{animation:intro-flicker .9s steps(1,end) forwards}
@keyframes intro-flicker{
  0%{opacity:0}
  10%{opacity:1}
  16%{opacity:0}
  38%{opacity:0}
  44%{opacity:1}
  52%{opacity:.15}
  60%{opacity:1}
  100%{opacity:1}
}
#intro.is-out{opacity:0;pointer-events:none}

#intro .intro-ui{position:absolute;left:0;right:0;bottom:clamp(40px,9vh,96px);display:flex;justify-content:center;transition:opacity .4s ease,transform .4s ease}
#intro.is-go .intro-ui{opacity:0;transform:translateY(12px);pointer-events:none}
#intro-enter{min-height:48px;min-width:240px;padding:0 72px;outline:none;-webkit-tap-highlight-color:transparent;letter-spacing:.02em;border:0;border-radius:999px;background:#d4ff3a;color:#0a0a0a;font-family:inherit;font-size:18px;font-weight:600;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
#intro-enter:hover{transform:scale(1.04);box-shadow:0 0 40px rgba(212,255,58,.35)}
#intro-enter:focus-visible{box-shadow:0 0 0 4px rgba(212,255,58,.35)}
#intro-skip:focus-visible{outline:2px solid #d4ff3a;outline-offset:3px}
#intro-skip{position:absolute;top:20px;right:24px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(245,245,247,.25);background:rgba(10,10,10,.35);color:#f5f5f7;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:opacity .3s ease}
#intro-skip:hover{border-color:#f5f5f7}
#intro.is-flicker #intro-skip,#intro.is-flicker #intro-sound{opacity:0;pointer-events:none}
#intro-sound{position:absolute;top:20px;left:24px;min-height:44px;padding:0 18px 0 14px;display:flex;align-items:center;gap:8px;border-radius:999px;border:1px solid rgba(245,245,247,.25);background:rgba(10,10,10,.35);color:#f5f5f7;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:opacity .3s ease,border-color .3s ease,color .3s ease;-webkit-tap-highlight-color:transparent}
#intro-sound:hover{border-color:#f5f5f7}
#intro-sound:focus-visible{outline:2px solid #d4ff3a;outline-offset:3px}
#intro-sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#intro-sound .spk{fill:currentColor;stroke:none}
#intro-sound .on{display:none}
#intro-sound[aria-pressed="true"]{color:#d4ff3a;border-color:rgba(212,255,58,.5)}
#intro-sound[aria-pressed="true"] .on{display:inline}
#intro-sound[aria-pressed="true"] .off{display:none}

/* Телефон: горизонтальное видео крупно, но контейнер целиком; сверху и снизу — чёрный фон, как в самом видео */
@media (max-aspect-ratio:3/4){
  /* размер и место задаём напрямую, без transform и масок — так iPhone не тормозит */
  #intro .intro-v{inset:auto;left:-40vw;top:calc(44% - 50.2vw);width:180vw;height:100.4vw;object-fit:cover}
  /* затемнение по кругу и мягкие края сверху и снизу — отдельный лёгкий слой */
  #intro .intro-shade{display:block;position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 95% 42% at 50% 44%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%),linear-gradient(to bottom,#000 calc(44% - 50.2vw),rgba(0,0,0,0) calc(44% - 28vw),rgba(0,0,0,0) calc(44% + 24vw),#000 calc(44% + 50.2vw))}
  #intro.is-dark .intro-shade{display:none}
  #intro .intro-ui{bottom:max(48px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){#intro.is-flicker .intro-light{animation:none;opacity:1}}