/*
 * Scene kit base styles. Link before the page's own CSS.
 *
 * .xp-stage     Fixed, full-viewport WebGL layer behind the content. Shows the
 *               poster (data-poster) until the scene is ready, and keeps showing
 *               it when WebGL is unavailable (.xp-fallback).
 * .xp-anchors   Fixed layer for HTML labels pinned to 3D points (kit/anchors.js).
 */

.xp-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--xp-poster, none) center / cover no-repeat, var(--xp-bg, #000);
}

.xp-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.xp-stage.xp-ready canvas {
  opacity: 1;
}

.xp-stage.xp-fallback canvas {
  display: none;
}

.xp-stage.xp-asleep {
  visibility: hidden;
}

.xp-anchors {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.xp-anchor {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  transition: opacity 0.35s ease;
}

.xp-anchor[data-hidden] {
  opacity: 0;
}

.xp-fallback .xp-anchors {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .xp-stage canvas {
    transition: none;
  }
}