/* Заставка входа. Всё в трансформациях и прозрачности — свойства, которые браузер
   считает на видеокарте: на телефоне сцена не роняет кадры и не двигает вёрстку. */
.vr-intro{
  position:fixed;inset:0;z-index:9000;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 45%,#0d1b2e 0%,#050912 62%,#02040a 100%);
  display:flex;align-items:center;justify-content:center;
  animation:vrOut .5s ease 1.9s forwards;
}
.vr-stage{
  position:absolute;inset:0;perspective:1100px;perspective-origin:50% 48%;
  display:flex;align-items:center;justify-content:center;
}
/* Уходящая вдаль сетка — «мир», который открывается за стеклом. */
.vr-grid{
  position:absolute;left:50%;top:62%;width:260vmax;height:150vmax;
  transform:translate(-50%,0) rotateX(78deg);transform-origin:50% 0;
  background:
    repeating-linear-gradient(90deg,rgba(51,144,236,.34) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(51,144,236,.24) 0 1px,transparent 1px 84px);
  opacity:0;animation:vrGrid 1.5s ease-out .85s forwards;
  mask-image:radial-gradient(60% 55% at 50% 12%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(60% 55% at 50% 12%,#000 0%,transparent 78%);
}
.vr-goggles{
  position:relative;width:min(46vw,340px);aspect-ratio:2.35/1;
  transform-style:preserve-3d;
  animation:vrFly 2.05s cubic-bezier(.42,0,.35,1) forwards;
}
.vr-body{
  position:absolute;inset:0;border-radius:22% / 42%;
  background:linear-gradient(165deg,#39506e 0%,#1b2740 46%,#0e1626 100%);
  box-shadow:0 18px 46px rgba(0,0,0,.62),inset 0 2px 0 rgba(255,255,255,.16),
             inset 0 -10px 22px rgba(0,0,0,.5);
}
.vr-lens{
  position:absolute;top:22%;width:34%;height:56%;border-radius:50%;
  background:radial-gradient(60% 60% at 36% 32%,#9fd0ff 0%,#3390EC 34%,#12345c 76%,#060c16 100%);
  box-shadow:0 0 22px rgba(51,144,236,.75),inset 0 0 16px rgba(0,0,0,.55);
  opacity:.9;animation:vrGlow 2.05s ease-in-out forwards;
}
.vr-lens-l{left:11%;}
.vr-lens-r{right:11%;}
.vr-bridge{
  position:absolute;left:44%;top:38%;width:12%;height:20%;border-radius:40%;
  background:linear-gradient(180deg,#2a3a56,#16203a);
}
/* Ремешок: две плоскости, отведённые в глубину — очки читаются объёмными, а не наклейкой. */
.vr-strap{
  position:absolute;top:34%;width:42%;height:26%;
  background:linear-gradient(180deg,#243146,#131c2e);border-radius:8px;
}
.vr-strap-l{left:-34%;transform:rotateY(62deg);transform-origin:100% 50%;}
.vr-strap-r{right:-34%;transform:rotateY(-62deg);transform-origin:0 50%;}
/* Вспышка в момент «надели» — стык между сценой и интерфейсом. */
.vr-flash{
  position:absolute;inset:0;background:#dceafd;opacity:0;
  animation:vrFlash .5s ease-out 1.62s forwards;
}
.vr-word{
  position:absolute;left:0;right:0;bottom:16%;text-align:center;
  font-size:clamp(18px,3.4vw,30px);font-weight:650;letter-spacing:.14em;
  color:#dfeaf8;text-shadow:0 0 18px rgba(51,144,236,.7);
  opacity:0;animation:vrWord 1.1s ease-out 1.05s forwards;
}
.vr-skip{
  position:absolute;right:16px;bottom:16px;z-index:2;
  min-height:40px;padding:9px 16px;border-radius:20px;
  border:1px solid rgba(223,234,248,.34);background:rgba(8,14,26,.5);
  color:#dfeaf8;font:inherit;font-size:14px;cursor:pointer;
}
.vr-skip:hover{background:rgba(20,32,54,.7);}
@keyframes vrFly{
  0%  {transform:translate3d(0,6%,-820px) rotateY(-26deg) rotateX(9deg);opacity:0;}
  18% {opacity:1;}
  52% {transform:translate3d(0,0,-90px) rotateY(0deg) rotateX(0deg);opacity:1;}
  76% {transform:translate3d(0,0,340px) scale(1.5);opacity:1;}
  100%{transform:translate3d(0,0,1150px) scale(3.6);opacity:0;}
}
@keyframes vrGlow{
  0%{opacity:.25;} 45%{opacity:1;} 100%{opacity:1;}
}
@keyframes vrGrid{
  0%{opacity:0;transform:translate(-50%,14vmax) rotateX(78deg);}
  100%{opacity:.85;transform:translate(-50%,0) rotateX(78deg);}
}
@keyframes vrFlash{0%{opacity:0;} 38%{opacity:.82;} 100%{opacity:0;}}
@keyframes vrWord{0%{opacity:0;transform:translateY(10px);} 100%{opacity:.95;transform:none;}}
@keyframes vrOut{to{opacity:0;visibility:hidden;}}
/* Тем, кто просил меньше движения, полёт не показываем совсем — только затемнение. */
@media (prefers-reduced-motion: reduce){
  .vr-intro{animation:vrOut .35s ease .25s forwards;}
  .vr-goggles,.vr-grid,.vr-flash,.vr-word,.vr-lens{animation:none;}
  .vr-goggles{opacity:.9;}
  .vr-word{opacity:.95;}
  .vr-grid{opacity:.5;}
}