/* ==========================================================================
   Интро на главной (3 с): робот проявляется из темноты → по нему пробегает блик →
   надпись ONYX летит в рот → рот открывается, ядро вспыхивает → молнии и белая
   вспышка → интро исчезает. Только CSS-анимации.
   Анимации стоят на паузе, пока не загрузятся картинки (класс .is-playing
   ставит main.js). Длительность: 3s везде, проценты в @keyframes — доли от 3 с.
   ========================================================================== */

#intro{position:fixed;inset:0;z-index:999;background:radial-gradient(ellipse at 50% 40%,#1A0807 0%,var(--bg) 60%);overflow:hidden;animation:i-out 3s linear forwards;contain:strict}
#intro *{will-change:transform,opacity}
#intro:not(.is-playing),#intro:not(.is-playing) *{animation-play-state:paused}
.no-js #intro,.intro-skip #intro{display:none}

.i-cam{--w:min(96vw,92vh);position:absolute;left:50%;top:50%;width:var(--w);height:var(--w);margin-left:calc(var(--w) / -2);margin-top:calc(var(--w) / -2);transform-origin:50% 29%;animation:i-cam 3s forwards}
.i-r{position:absolute;inset:0;width:100%;height:100%}
.i-closed{animation:i-closed 3s forwards}
.i-open{opacity:0;animation:i-open 3s forwards}
.i-glow{opacity:0;animation:i-glow 3s forwards}
.i-eyes{opacity:0;filter:drop-shadow(0 0 10px #FF2A1A) drop-shadow(0 0 26px #E01005);animation:i-eyes 3s forwards}
.i-core{opacity:0;transform-origin:49.9% 34.8%;mix-blend-mode:screen;animation:i-core 3s forwards}
/* блик: осветлённая копия робота видна только в узкой диагональной полосе, которая проходит справа налево */
.i-sweep{filter:brightness(2.4) sepia(.6) saturate(2) hue-rotate(-38deg);mix-blend-mode:screen;opacity:0;animation:i-sweep 3s forwards}
.i-onyx{position:absolute;left:50%;top:35%;width:58%;transform:translate(-50%,-50%) translateY(140%) scale(2.6);opacity:0;animation:i-onyx 3s forwards}
.i-bolt{position:absolute;opacity:0;mix-blend-mode:screen;pointer-events:none}
.b1{left:-4%;top:-6%;width:min(62vw,720px);transform:rotate(-8deg);animation:i-b1 3s forwards}
.b2{right:-6%;bottom:-8%;width:min(52vw,600px);transform:rotate(12deg) scaleX(-1);animation:i-b2 3s forwards}
.b3{left:50%;top:44%;width:min(110vw,1100px);transform:translate(-50%,-50%) scale(.5);animation:i-b3 3s forwards}
.i-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,rgba(255,225,220,1) 0%,rgba(240,30,20,.75) 30%,rgba(10,7,7,0) 70%);opacity:0;animation:i-flash 3s forwards}

@keyframes i-out{0%,88%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes i-cam{0%{transform:scale(.3);opacity:0;animation-timing-function:cubic-bezier(.5,0,.2,1)}8%{opacity:1}46%{transform:scale(1);animation-timing-function:cubic-bezier(.6,0,.3,1)}62%{transform:scale(1.9);animation-timing-function:ease-in-out}84%{transform:scale(2.25);animation-timing-function:cubic-bezier(.7,0,1,.6)}100%{transform:scale(8)}}
@keyframes i-closed{0%{opacity:1;filter:brightness(.04) contrast(1.2)}30%{filter:brightness(.4) contrast(1.15)}46%{filter:brightness(1.15) contrast(1.08)}52%{opacity:1}55%,100%{opacity:0}}
@keyframes i-open{0%,52%{opacity:0;filter:brightness(1.15)}55%,72%{opacity:1;filter:brightness(1.2)}75%,100%{opacity:0}}
@keyframes i-glow{0%,72%{opacity:0;filter:brightness(1)}75%{opacity:1;filter:brightness(1.7) saturate(1.3)}84%{filter:brightness(1.25)}100%{opacity:1;filter:brightness(1.1)}}
@keyframes i-eyes{0%{opacity:0}5%{opacity:1}22%{opacity:.75}30%,74%{opacity:1}77%,100%{opacity:0}}
@keyframes i-sweep{0%,20%{opacity:0;clip-path:polygon(130% 0,146% 0,126% 100%,110% 100%)}24%{opacity:.6}50%{opacity:.6;clip-path:polygon(-10% 0,6% 0,-14% 100%,-30% 100%)}54%,100%{opacity:0;clip-path:polygon(-10% 0,6% 0,-14% 100%,-30% 100%)}}
@keyframes i-core{0%,54%{opacity:0;transform:scale(.6)}58%{opacity:1;transform:scale(1.8)}63%{opacity:.6;transform:scale(1.2)}69%{opacity:1;transform:scale(2.2)}74%,100%{opacity:0;transform:scale(1)}}
@keyframes i-onyx{0%{opacity:0;transform:translate(-50%,-50%) translateY(140%) scale(2.6);filter:blur(12px)}16%{opacity:1;transform:translate(-50%,-50%) translateY(95%) scale(1.6);filter:blur(0) drop-shadow(0 0 18px rgba(240,30,20,.55))}46%{transform:translate(-50%,-50%) translateY(70%) scale(1.1);animation-timing-function:cubic-bezier(.6,0,.4,1)}56%{transform:translate(-50%,-50%) translateY(0) scale(.7);filter:blur(0)}66%{opacity:.9;transform:translate(-50%,-50%) translateY(0) scale(.05);filter:blur(2px) brightness(2)}68%,100%{opacity:0;transform:translate(-50%,-50%) scale(0)}}
@keyframes i-b1{0%,74%{opacity:0}76%{opacity:1}78.5%{opacity:.15}81%{opacity:1}88%,100%{opacity:0}}
@keyframes i-b2{0%,76%{opacity:0}78%{opacity:1}80.5%{opacity:.2}83%{opacity:.95}89%,100%{opacity:0}}
@keyframes i-b3{0%,78%{opacity:0;transform:translate(-50%,-50%) scale(.4)}82%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}92%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
@keyframes i-flash{0%,82%{opacity:0}87%{opacity:1}100%{opacity:0}}
@media (max-aspect-ratio:3/4){.i-cam{--w:140vw;margin-top:calc(var(--w) / -2.6)}.i-onyx{width:40%}}

/* Пока идёт интро, страница под ним не прокручивается */
html.intro-active,html.intro-active body{overflow:hidden}