/* VR MODE — кнопка, контейнер, fade, exit, hints */

/* ── VR КНОПКА ── */
#vr-btn {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 9000;
  display: none; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.4rem; border-radius: 40px;
  background: linear-gradient(135deg, rgba(0,229,255,0.12), rgba(124,111,255,0.1));
  border: 1px solid rgba(0,229,255,0.4);
  color: var(--c); font-family: var(--mono); font-size: 0.82rem;
  cursor: pointer; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 24px rgba(0,229,255,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
  animation: vrPulse 3s ease-in-out infinite;
  letter-spacing: 0.05em; white-space: nowrap;
}
#vr-btn:hover {
  box-shadow: 0 0 48px rgba(0,229,255,0.38), 0 0 80px rgba(124,111,255,0.12);
  transform: translateY(-2px);
  border-color: rgba(0,229,255,0.7);
}
#vr-btn:active { transform: translateY(0) scale(0.97); }
#vr-btn svg { flex-shrink: 0; opacity: 0.9; }

@keyframes vrPulse {
  0%,100% { box-shadow: 0 0 24px rgba(0,229,255,0.18); }
  50%     { box-shadow: 0 0 40px rgba(0,229,255,0.32), 0 0 70px rgba(124,111,255,0.1); }
}

#vr-btn { touch-action: manipulation; }

/* ── VR КОНТЕЙНЕР ── */
#vr-container {
  position: fixed; inset: 0; z-index: 10000;
  background: #020208;
}
#vr-container a-scene {
  width: 100% !important; height: 100% !important;
}
#vr-container .a-enter-vr, #vr-container .a-enter-ar { display: none !important; }

/* ── EXIT BUTTON внутри VR ── */
#vr-exit-btn {
  position: fixed; top: 1.5rem; right: 1.5rem; z-index: 10002;
  padding: 0.6rem 1.3rem; border-radius: 30px;
  background: rgba(10,10,20,0.85);
  border: 1px solid rgba(0,229,255,0.5);
  color: #e0e0ff; font-family: 'Inter', sans-serif; font-size: 0.85rem;
  cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s;
  letter-spacing: 0.03em;
}
#vr-exit-btn:hover {
  background: rgba(0,229,255,0.15);
  border-color: #00e5ff;
  box-shadow: 0 0 20px rgba(0,229,255,0.3);
  color: #00e5ff;
}

/* ── HINTS ── */
#vr-hints {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 10002; display: flex; gap: 1.5rem;
  padding: 0.7rem 1.6rem; border-radius: 12px;
  background: rgba(10,10,20,0.8);
  border: 1px solid rgba(0,229,255,0.2);
  color: rgba(200,200,230,0.7); font-family: 'Inter', sans-serif; font-size: 0.75rem;
  letter-spacing: 0.05em;
  transition: opacity 1s ease;
  pointer-events: none;
}
#vr-hints span { white-space: nowrap; }

/* ── FADE OVERLAY ── */
.vr-fade {
  position: fixed; inset: 0; z-index: 10003; background: #020208;
  opacity: 1; transition: opacity 0.5s ease; pointer-events: none;
}

/* ── МОБИЛЬ ── */
@media (max-width: 768px) {
  #vr-btn { bottom: 1.5rem; right: 1rem; font-size: 0.78rem; padding: 0.6rem 1.1rem; }
  #vr-exit-btn { top: 1rem; right: 1rem; font-size: 0.78rem; padding: 0.5rem 1rem; }
  #vr-hints { font-size: 0.68rem; padding: 0.5rem 1rem; gap: 1rem; }
}