/* Reveal the photographic fallback only after a renderer failure. */
.room-layer[data-actor-state="loading"] :is(.portrait, .seat-shadow) {
  visibility: hidden;
}

.room-layer.has-3d-actor .portrait {
  aspect-ratio: 1 / var(--avatar-depth, 1);
  transform: translate(var(--avatar-offset, -50%), var(--avatar-rise, -95%));
}
.room-layer[data-room="lagoon"] { --avatar-offset: -57%; }
.room-layer[data-room="terrace"] { --avatar-offset: -59%; }
.room-layer[data-room="ember"] { --avatar-offset: -42%; }
.room-layer[data-room="starlight"] { --avatar-offset: -46%; }
.room-layer[data-room="palms"] { --avatar-offset: -45%; }
.room-layer[data-room="orchid"] { --avatar-offset: -41%; }
.room-layer .actor-motion {
  left: calc(0% - var(--avatar-left-pad, 0%));
  width: calc(100% + var(--avatar-left-pad, 0%) + var(--avatar-right-pad, 0%));
}
.has-3d-actor .actor-motion { filter: none; }
.has-3d-actor :is(.desk-laptop, .desk-phone, .desk-phone-held, .desk-water) { display: none; }
.room-layer[data-light="low"] { --color-screen-light: #687184; }
.room-layer[data-light="low"]:not(.has-3d-actor) .desk-laptop img { filter: brightness(.54); }
.hair-control { position: relative; }
.hair-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 2;
  min-width: 184px;
  padding: 6px;
  border-radius: 14px;
}
.hair-menu button {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  white-space: nowrap;
}
.hair-menu button:hover,
.hair-menu button[aria-pressed="true"] {
  border-color: var(--color-outline);
  background: var(--color-sheen);
  color: var(--color-accent);
}

/* Start on the clean backdrop and reserve the photographed chair for fallback. */
.skyline-seat-photo,
.has-skyline-seat .foreground,
.room-layer[data-room="skyline"][data-actor-state="loading"] :is(.room-photo:not(.skyline-seat-photo), .foreground) {
  display: none;
}
.room-layer[data-room="skyline"][data-actor-state="loading"] .skyline-seat-photo,
.has-skyline-seat .skyline-seat-photo {
  display: block;
}