/* A white, quiet volume of air; the artworks supply its color. */
.museum-space {
  --museum-glow: #d5c4ad;
  --museum-glow-secondary: #90aac2;
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #fafaf8;
  color: #323530;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 1.4s ease, transform 2.4s 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: 0;
  background: radial-gradient(ellipse at 50% 45%, #fff 12%, #fff9 38%, transparent 76%);
  pointer-events: none;
}
.museum-space::after {
  content: '';
  position: absolute;
  z-index: 11000;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, #fafaf8bd, transparent 15%, transparent 83%, #fafaf8ed);
}
.museum-planes { position: absolute; inset: 0; 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: #f1f0eb;
  border: 1px solid #ffffffd9;
  box-shadow: 0 2px 5px #46433212, 0 18px 42px -20px #49453232;
  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: #fff;
  box-shadow: 0 3px 10px #46433217, 0 28px 60px -18px #4945324d;
}
.museum-plane:focus-visible img { outline: 3px solid #526f66; outline-offset: 9px; }
.museum-frame-label {
  display: block;
  margin-top: 14px;
  font: 400 calc(10px * var(--museum-inverse-scale, 1))/1.5 'DM Sans', sans-serif;
  letter-spacing: .06em;
  color: #5f625c;
  text-align: center;
  opacity: 0;
  transition: opacity .3s;
  white-space: nowrap;
  pointer-events: none;
}
.museum-plane:hover .museum-frame-label, .museum-plane:focus-visible .museum-frame-label, .museum-plane-focused .museum-frame-label { opacity: .85; }
.museum-plane-focused img { box-shadow: 0 4px 12px #46433216, 0 30px 65px -20px #49453247; }
.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 'DM Sans', sans-serif;
  letter-spacing: .04em;
  text-align: center;
  color: #6d706a;
  width: min(90%, 500px);
  pointer-events: none;
}
.museum-load-state:empty { display: none; }
.museum-image-failed { min-height: 300px; background: #eeece6; border: 1px solid #b5b5a8; }
.museum-image-failed img { visibility: hidden; }
.museum-image-error { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: #55564f; font: 16px/1.5 sans-serif; text-align: center; }
@media (max-width: 600px) {
  .museum-space::after { background: linear-gradient(to bottom, #fafaf8b3, transparent 20%, transparent 78%, #fafaf8eb); }
  .museum-frame-label { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .museum-space, .museum-plane img { transition-duration: .01ms; }
}