.museum-space {
  --museum-glow: #8b87ff;
  --museum-glow-secondary: #5caec9;
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #08090e;
  color: #f1f0f8;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity 1.1s ease, transform 1.9s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
  contain: layout paint;
}

.museum-space-active { opacity: 1; transform: scale(1); pointer-events: auto; }
.museum-space.museum-is-dragging, .museum-is-dragging .museum-plane { cursor: grabbing; }
.museum-atmosphere {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 48% 47%, color-mix(in srgb, var(--museum-glow) 9%, transparent), transparent 50%),
    radial-gradient(ellipse at 76% 28%, color-mix(in srgb, var(--museum-glow-secondary) 5%, transparent), transparent 35%);
  pointer-events: none;
  transition: background 1.4s ease;
}

.museum-space::after {
  content: '';
  position: absolute;
  z-index: 11000;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, #08090e9c, transparent 16%, transparent 72%, #08090ec9 100%);
}

.museum-dust, .museum-planes { position: absolute; inset: 0; }
.museum-dust { pointer-events: none; }
.museum-planes { perspective: none; transform-style: flat; }
.museum-plane {
  position: absolute;
  visibility: hidden;
  left: 0;
  top: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: none;
  transform-origin: center center;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  backface-visibility: hidden;
}

.museum-plane img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  background: #11131d;
  border: 1px solid #fff2;
  box-shadow: 0 0 0 1px #0007, 0 18px 90px #000a;
  opacity: 0;
  transition: opacity 1.1s ease, border-color .3s ease, box-shadow .4s ease;
  pointer-events: none;
}

.museum-image-ready img { opacity: 1; }
.museum-plane:hover img, .museum-plane:focus-visible img {
  border-color: #ffffff94;
  box-shadow: 0 0 0 2px #ffffff16, 0 0 75px color-mix(in srgb, var(--museum-glow) 16%, transparent), 0 18px 90px #000b;
}
.museum-plane:focus-visible img { outline: 3px solid #fff; outline-offset: 7px; }
.museum-frame-label {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-top: 15px;
  font: 400 12px/1.35 ui-monospace, 'SFMono-Regular', Consolas, monospace;
  letter-spacing: .05em;
  color: #cbcbd3;
  opacity: .7;
  transition: opacity .25s;
  white-space: nowrap;
  pointer-events: none;
}
.museum-frame-number { color: #878692; font-size: 10px; letter-spacing: .12em; }
.museum-plane:hover .museum-frame-label, .museum-plane-focused .museum-frame-label { opacity: 1; }
.museum-plane-focused img { box-shadow: 0 0 0 1px #ffffff40, 0 32px 120px #000d; }
.museum-familiar-spark {
  position: absolute;
  right: -17px;
  top: -20px;
  color: #d8d4ff;
  font-size: 28px;
  text-shadow: 0 0 20px #aaa0ff;
  animation: museum-spark-breath 3.5s ease-in-out infinite;
  pointer-events: none;
}
.museum-depth-lines {
  position: absolute;
  left: 26px;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: none;
  opacity: .26;
  z-index: 11001;
}
.museum-depth-lines i { width: 10px; height: 1px; background: #c8c3e9; }
.museum-depth-lines i:nth-child(2) { width: calc(12px + var(--museum-depth, 0) * 18px); }
.museum-load-state {
  position: absolute;
  z-index: 12000;
  bottom: max(21px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  font: 400 11px/1.5 ui-monospace, monospace;
  letter-spacing: .04em;
  text-align: center;
  color: #cbc6d9;
  width: min(90%, 500px);
  pointer-events: none;
}
.museum-load-state:empty { display: none; }
.museum-image-failed { min-height: 300px; background: #13141c; border: 1px solid #ffffff28; }
.museum-image-failed img { visibility: hidden; }
.museum-image-error { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: #ded4de; font: 16px/1.5 sans-serif; text-align: center; }
@keyframes museum-spark-breath { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
@media (max-width: 600px) {
  .museum-space::after { background: linear-gradient(to bottom, #08090e8c, transparent 20%, transparent 65%, #08090ee6 100%); }
  .museum-frame-label { font-size: 15px; margin-top: 17px; }
  .museum-frame-number { font-size: 12px; }
  .museum-depth-lines { left: 13px; opacity: .17; }
}
@media (prefers-reduced-motion: reduce) {
  .museum-space, .museum-plane img { transition-duration: .01ms; }
  .museum-familiar-spark { animation: none; }
}