/* ==========================================================================
   ONYX · Интро (3.2 с) — компьютер.
   Закрытый глаз проступает из темноты → кадр гаснет → в темноте бьёт красная молния →
   под вспышку появляется открытый горящий глаз → камера влетает в зрачок → из зрачка
   рождается знак-глаз, выезжает ONYX VISION → логотип садится в шапку → заставка растворяется.
   Только CSS. Пока не загрузятся картинки, всё на паузе (.is-playing ставит main.js).
   ========================================================================== */

#intro{position:fixed;inset:0;z-index:999;background:#0A0707;overflow:hidden;contain:strict;
  --px:50%;--py:45%;                                   /* где на экране стоит зрачок */
  --ex:.518;--ey:.447;--ar:1.5;--W:max(100vw,150vh);   /* зрачок на картинке (доли) и её пропорции W/H */
  --bw:min(62vw,760px);                                /* ширина молнии */
  --fx:0px;--fy:-38vh;--fs:.22;                        /* куда летит логотип (ставит скрипт) */
  animation:i2-out 3.2s linear forwards}
#intro:not(.is-playing),#intro:not(.is-playing) *{animation-play-state:paused}
.no-js #intro,.intro-skip #intro{display:none}
html.intro-active,html.intro-active body{overflow:hidden}

/* кадр глаза: коробка с пропорциями картинки накрывает экран, зрачок в точке (--px, --py) */
.i2-box{position:absolute;width:var(--W);height:calc(var(--W) / var(--ar));
  left:calc(var(--px) - var(--W) * var(--ex));top:calc(var(--py) - var(--W) / var(--ar) * var(--ey));
  transform-origin:calc(var(--ex) * 100%) calc(var(--ey) * 100%);opacity:0;animation:i2-cam 3.2s forwards}
.i2-box img{position:absolute;inset:0;width:100%;height:100%;display:block}
.i2-box picture{display:contents}
.i2-e1{animation:i2-e1 3.2s forwards}
.i2-e2{opacity:0;animation:i2-e2 3.2s forwards}
.i2-box::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#0A0707 0%,#0A0707 19.5%,rgba(10,7,7,0) 31%),
             radial-gradient(ellipse 60% 70% at calc(var(--ex) * 100%) calc(var(--ey) * 100%),rgba(10,7,7,0) 45%,rgba(10,7,7,.85) 100%)}
.i2-dark{position:absolute;inset:0;background:#0A0707;opacity:0;animation:i2-dark 3.2s forwards}
.i2-glow{position:absolute;left:calc(var(--ex) * 100% - 30%);top:calc(var(--ey) * 100% - 30% * var(--ar));width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,226,218,.95) 0%,rgba(255,90,80,.75) 5%,rgba(240,30,20,.38) 20%,rgba(240,30,20,.12) 38%,rgba(240,30,20,0) 60%);
  opacity:0;animation:i2-glow 3.2s forwards}

/* молнии бьют в зрачок с двух сторон, искра, вспышка.
   Свечение молнии и знака «запечено» в картинки (bolt-glow, mark-glow): без filter и mix-blend-mode
   браузеру не нужно пересчитывать размытие в каждом кадре — это и убирало подлагивания. */
.i2-bolt{position:absolute;--bp:calc(var(--bw) * 44 / 574);width:calc(var(--bw) * 662 / 574);aspect-ratio:662/688;
  left:calc(var(--px) - var(--bw) * .93 - var(--bp));top:calc(var(--py) - var(--bw) * 600 / 574 * .97 - var(--bp));
  opacity:0;animation:i2-bolt 3.2s forwards}
.i2-bolt2{left:auto;right:calc(100% - var(--px) - var(--bw) * .93 - var(--bp));transform:scaleX(-1);animation-name:i2-bolt2}
.i2-burst{position:absolute;width:min(70vw,820px);aspect-ratio:596/640;left:var(--px);top:var(--py);
  transform:translate(-50%,-50%) scale(.3);opacity:0;animation:i2-burst 3.2s forwards}
.i2-flash{position:absolute;inset:0;background:#ffeceb;opacity:0;animation:i2-flash 3.2s forwards}

/* логотип: коробка с пропорциями логотипа из шапки (563×132) */
.i2-logo{position:absolute;left:var(--px);top:var(--py);--wl:min(64vw,900px);width:var(--wl);aspect-ratio:563/132;
  transform:translate(-50%,-50%) translateX(calc(var(--wl) * .315));animation:i2-logo 3.2s forwards}
.i2-mark{position:absolute;left:0;top:0;width:37.1%;height:99%;transform-origin:50% 50%;
  opacity:0;animation:i2-mark 3.2s forwards}
.i2-mark img{position:absolute;left:-15%;top:-23.92%;width:130%;height:147.84%;max-width:none;display:block}
/* надпись выезжает «шторкой»: рамка едет вправо, надпись внутри — навстречу (только transform, без clip-path) */
.i2-word{position:absolute;left:40.7%;top:34.8%;height:24.2%;aspect-ratio:1220/120}
.i2-wm{position:absolute;inset:-60% -4%;overflow:hidden;transform:translateX(-100%);animation:i2-wm 3.2s forwards}
.i2-wi{position:absolute;inset:0;transform:translateX(100%);animation:i2-wi 3.2s forwards}
.i2-wi img{position:absolute;left:3.704%;top:27.273%;width:92.593%;height:45.455%;max-width:none;display:block;
  filter:drop-shadow(0 0 10px rgba(240,30,20,.55))}

/* телефон: вертикальные кадры глаза (2:3), всё остальное — как на компьютере */
@media (max-aspect-ratio:4/5){
  #intro{--py:44%;--ex:.567;--ey:.469;--ar:.6667;--W:max(100vw,66.67vh);--bw:76vw}
  .i2-box::after{background:radial-gradient(ellipse 75% 60% at calc(var(--ex) * 100%) calc(var(--ey) * 100%),rgba(10,7,7,0) 50%,rgba(10,7,7,.85) 100%)}
  .i2-logo{--wl:88vw}
  .i2-burst{width:110vw}
}

/* ================= ключевые кадры =================
   0,00–0,30  проявление закрытого глаза          0,95–1,28  молнии в темноте, вспышка 1,13
   0,30–0,72  медленный наезд                     1,13       под вспышкой — открытый глаз
   0,72–0,95  кадр гаснет почти в чёрный          1,20–1,75  открытый глаз горит, наезд
   1,75–2,15  влёт в зрачок, рождается знак       2,15–2,45  выезжает надпись ONYX VISION
   2,50–2,85  логотип садится в шапку             2,85–3,20  заставка растворяется        */
@keyframes i2-out{
  0.00%,89.06%{opacity:1}
  100.00%{opacity:0}}
@keyframes i2-cam{
  0.00%{opacity:0;transform:scale(1.05);animation-timing-function:ease-out}
  9.37%{opacity:1}
  29.69%{transform:scale(1.11)}
  31.25%{transform:scale(1.115) translate(-0.6%,0.5%)}
  32.81%{transform:scale(1.12) translate(0.7%,-0.5%)}
  34.38%{transform:scale(1.125) translate(-0.5%,0.3%)}
  36.25%{transform:scale(1.13) translate(0.4%,-0.3%)}
  38.75%{transform:scale(1.135) translate(0%,0%);animation-timing-function:ease-in-out}
  54.69%{opacity:1;transform:scale(1.2);animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  62.50%{opacity:.5;transform:scale(3.6);animation-timing-function:cubic-bezier(.3,.4,.6,1)}
  66.88%,100.00%{opacity:0;transform:scale(8)}}
@keyframes i2-e1{
  0.00%,35.00%{opacity:1}
  35.31%,100.00%{opacity:0}}
@keyframes i2-e2{
  0.00%,35.00%{opacity:0}
  35.31%,100.00%{opacity:1}}
@keyframes i2-dark{
  0.00%,22.50%{opacity:0;animation-timing-function:ease-in}
  29.69%,35.00%{opacity:.94}
  35.31%{opacity:.35;animation-timing-function:ease-out}
  41.25%,100.00%{opacity:0}}
@keyframes i2-glow{
  0.00%,35.00%{opacity:0;transform:scale(.6)}
  36.25%{opacity:1;transform:scale(1.25)}
  45.31%{opacity:.6;transform:scale(1.05)}
  56.25%{opacity:.85;transform:scale(1.3)}
  66.25%,100.00%{opacity:0;transform:scale(1.6)}}
@keyframes i2-bolt{
  0.00%,29.69%{opacity:0;transform:scale(.96)}
  30.62%{opacity:1}
  31.56%{opacity:.15}
  32.81%{opacity:1;transform:scale(1)}
  35.31%{opacity:.95}
  40.62%,100.00%{opacity:0;transform:scale(1.03)}}
@keyframes i2-bolt2{
  0.00%,31.25%{opacity:0}
  32.19%{opacity:.9}
  33.12%{opacity:.1}
  34.38%{opacity:.85}
  38.75%,100.00%{opacity:0}}
@keyframes i2-burst{
  0.00%,33.12%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}
  35.62%{opacity:.85;transform:translate(-50%,-50%) scale(1.05) rotate(8deg)}
  38.12%{opacity:.35;transform:translate(-50%,-50%) scale(1.2) rotate(10deg)}
  43.75%,100.00%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(14deg)}}
@keyframes i2-flash{
  0.00%,33.75%{opacity:0}
  35.31%{opacity:.55}
  36.56%{opacity:.15}
  41.25%,100.00%{opacity:0}}
@keyframes i2-mark{
  0.00%,57.50%{opacity:0;transform:scale(.08)}
  59.37%{opacity:1}
  64.06%{transform:scale(1.08);animation-timing-function:ease-out}
  67.19%,100.00%{opacity:1;transform:scale(1)}}
@keyframes i2-wm{
  0.00%,68.12%{transform:translateX(-100%)}
  76.56%,100.00%{transform:translateX(0)}}
@keyframes i2-wi{
  0.00%,68.12%{transform:translateX(100%)}
  76.56%,100.00%{transform:translateX(0)}}
@keyframes i2-logo{
  0.00%,67.19%{transform:translate(-50%,-50%) translateX(calc(var(--wl) * .315));animation-timing-function:cubic-bezier(.6,0,.2,1)}
  76.25%{transform:translate(-50%,-50%) translate(calc(var(--fx) * .04),calc(var(--fy) * .04)) scale(calc(1 - (1 - var(--fs)) * .04));animation-timing-function:cubic-bezier(.45,0,.25,1)}
  89.06%,100.00%{transform:translate(-50%,-50%) translate(var(--fx),var(--fy)) scale(var(--fs))}}