.xr-immersive-visual {
  isolation: isolate;
  background: #090a0d;
}

.xr-immersive-visual > img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: xr-scene-breathe 9s ease-in-out infinite alternate;
}

.xr-immersive-visual::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,6,9,.5), transparent 24%, transparent 67%, rgba(5,6,9,.78)), radial-gradient(circle at 65% 38%, transparent 25%, rgba(7,7,10,.12) 70%);
}

.xr-immersive-label,
.xr-depth-layer,
.xr-hand-track,
.xr-immersive-status,
.xr-spatial-progress { z-index: 3; }

.xr-immersive-label {
  position: absolute;
  top: 27px;
  left: 28px;
  padding: 9px 12px;
  color: #ececf0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(7,7,10,.58);
  font-size: .48rem;
  font-weight: 850;
  letter-spacing: .15em;
  backdrop-filter: blur(12px);
}

.xr-depth-layer {
  position: absolute;
  border: 1px solid rgba(103,220,233,.48);
  border-radius: 28px;
  pointer-events: none;
  box-shadow: inset 0 0 28px rgba(103,220,233,.06), 0 0 22px rgba(103,220,233,.08);
  animation: xr-layer-float 6.5s ease-in-out infinite alternate;
}

.xr-depth-layer--one { top: 16%; right: 7%; width: 36%; height: 28%; transform: perspective(600px) rotateY(-12deg); }
.xr-depth-layer--two { top: 32%; right: 15%; width: 28%; height: 22%; border-color: rgba(130,103,238,.58); animation-delay: -2.1s; }
.xr-depth-layer--three { right: 5%; bottom: 23%; width: 31%; height: 18%; border-color: rgba(214,44,226,.5); animation-delay: -4.2s; }

.xr-hand-track {
  position: absolute;
  z-index: 4;
  top: 41%;
  right: 14%;
  width: 90px;
  height: 90px;
  pointer-events: none;
}

.xr-hand-track i {
  position: absolute;
  width: 8px;
  aspect-ratio: 1;
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 15px var(--cyan);
  animation: xr-track-pulse 2.3s ease-in-out infinite;
}

.xr-hand-track i:nth-child(1) { top: 9%; left: 48%; }
.xr-hand-track i:nth-child(2) { top: 42%; right: 7%; animation-delay: .5s; }
.xr-hand-track i:nth-child(3) { bottom: 5%; left: 50%; animation-delay: 1s; }
.xr-hand-track i:nth-child(4) { top: 44%; left: 6%; animation-delay: 1.5s; }

.xr-hand-track::after {
  position: absolute;
  inset: 18%;
  content: "";
  border: 1px solid rgba(103,220,233,.55);
  border-radius: 50%;
  animation: xr-reticle 2.3s ease-in-out infinite;
}

.xr-immersive-status {
  position: absolute;
  right: 27px;
  bottom: 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 9px;
  min-width: 190px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 14px;
  background: rgba(7,7,10,.7);
  backdrop-filter: blur(14px);
  animation: xr-status-reveal 4.6s ease-in-out infinite;
}

.xr-immersive-status i {
  grid-row: 1 / 3;
  width: 9px;
  aspect-ratio: 1;
  align-self: center;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 15px var(--cyan);
}

.xr-immersive-status span { font-size: .56rem; font-weight: 850; letter-spacing: .12em; }
.xr-immersive-status small { color: #a9abb5; font-size: .4rem; letter-spacing: .1em; }

.xr-spatial-progress {
  position: absolute;
  right: 27px;
  bottom: 101px;
  left: 27px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

.xr-spatial-progress b {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
  transform-origin: left;
  animation: xr-map-progress 4.6s ease-in-out infinite;
}

@keyframes xr-scene-breathe {
  from { transform: scale(1.01); }
  to { transform: scale(1.045); }
}

@keyframes xr-layer-float {
  from { opacity: .38; translate: -7px 9px; scale: .96; }
  to { opacity: .9; translate: 8px -8px; scale: 1.035; }
}

@keyframes xr-track-pulse {
  0%, 100% { opacity: .28; transform: scale(.72); }
  50% { opacity: 1; transform: scale(1.24); }
}

@keyframes xr-reticle {
  0%, 100% { opacity: .25; transform: scale(.72); }
  50% { opacity: .9; transform: scale(1.15); }
}

@keyframes xr-map-progress {
  0% { transform: scaleX(0); }
  24% { transform: scaleX(.34); }
  68%, 90% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

@keyframes xr-status-reveal {
  0%, 48% { opacity: .4; transform: translateY(7px); }
  64%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: .4; transform: translateY(7px); }
}

@media (max-width: 620px) {
  .xr-immersive-label { top: 18px; left: 18px; }
  .xr-hand-track { top: 42%; right: 9%; width: 68px; height: 68px; }
  .xr-immersive-status { right: 16px; bottom: 16px; }
  .xr-spatial-progress { right: 16px; bottom: 87px; left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .xr-immersive-visual > img,
  .xr-depth-layer,
  .xr-hand-track i,
  .xr-hand-track::after,
  .xr-immersive-status,
  .xr-spatial-progress b { animation: none; }
  .xr-spatial-progress b { transform: scaleX(1); }
}