#stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #d7c2a4;
  overflow: hidden;
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--soil) 28%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--soil) 12%, transparent);
}

#stage[data-boot='loading'] {
  background:
    linear-gradient(180deg, #e3d0b4 0%, #cbb48e 100%);
}

#scene-mount {
  position: absolute;
  inset: 0;
}

.scene-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}

#scene-open {
  opacity: 0;
}

#stage[data-mode='trunk'] #scene-open,
#stage[data-mode='case'] #scene-open {
  opacity: 1;
}

#stage[data-mode='trunk'] #scene-idle,
#stage[data-mode='case'] #scene-idle {
  opacity: 0;
}

#stage.is-animating .scene-plate {
  transition: opacity var(--slide) var(--ease);
}

.hotspots button {
  position: absolute;
  z-index: 2;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0.35rem 0.4rem;
  border: 2px solid transparent;
  background: transparent;
  color: var(--paper);
  font: 650 0.78rem/1.1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px #1c1612;
  cursor: pointer;
}

#hotspot-trunk {
  left: 34%;
  top: 30%;
  width: 32%;
  height: 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-color: transparent;
  font-size: 1rem;
  font-weight: 700;
}

#hotspot-clinic,
#hotspot-microscope,
#hotspot-or {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  background: transparent;
}

#hotspot-clinic {
  left: 39%;
  top: 52%;
  width: 9%;
  height: 15%;
}

#hotspot-microscope {
  left: 48%;
  top: 45%;
  width: 7.5%;
  height: 22%;
}

#hotspot-or {
  left: 55.5%;
  top: 47%;
  width: 7.5%;
  height: 20%;
}

.case-picks {
  display: none;
  gap: 0.45rem;
}

.case-picks button {
  flex: 1 1 0;
  min-height: 44px;
  margin: 0;
  padding: 0.45rem 0.4rem;
  border: 2px solid color-mix(in srgb, var(--soil) 35%, var(--haze));
  background: var(--paper);
  color: var(--soil);
  font: 650 0.92rem/1.1 system-ui, sans-serif;
  cursor: pointer;
}

.case-picks button.is-current {
  border-color: var(--fuego);
  box-shadow: 0 0 0 2px var(--fuego);
}

@media (max-width: 899px) {
  .case-picks:not([hidden]) {
    display: flex;
  }

  #hotspot-clinic,
  #hotspot-microscope,
  #hotspot-or {
    color: transparent;
    text-shadow: none;
    background: transparent;
    padding-bottom: 0;
  }
}

#back {
  left: 4%;
  top: 4%;
  width: auto;
  z-index: 3;
  background: var(--paper);
  color: var(--soil);
  border-color: var(--soil);
}

.hotspots button.is-current {
  box-shadow: 0 0 0 3px var(--fuego);
}

.hotspots button.is-dimmed {
  opacity: 0.55;
}

.scene-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#trunk-lid-open {
  display: none;
}

#stage[data-mode='trunk'] #trunk-lid,
#stage[data-mode='case'] #trunk-lid {
  display: none;
}

#stage[data-mode='trunk'] #trunk-lid-open,
#stage[data-mode='case'] #trunk-lid-open {
  display: inline;
}

#cargo {
  opacity: 0;
}

#stage[data-mode='trunk'] #cargo,
#stage[data-mode='case'] #cargo {
  opacity: 1;
}

#stage.is-animating #cargo {
  transition: opacity var(--slide) var(--ease);
}

#case-clinic,
#case-microscope,
#case-or {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

#stage.is-animating #case-clinic,
#stage.is-animating #case-microscope,
#stage.is-animating #case-or {
  transition: transform var(--slide) var(--ease), opacity 220ms var(--ease);
}

#stage[data-mode='case'][data-case='clinic'] #case-clinic,
#stage[data-mode='case'][data-case='microscope'] #case-microscope,
#stage[data-mode='case'][data-case='or'] #case-or {
  transform: translateY(-18px) scale(1.06);
}

#stage [data-dimmed='true'] {
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  #stage.is-animating .scene-plate,
  #stage.is-animating #trunk-lid,
  #stage.is-animating #cargo,
  #stage.is-animating #case-clinic,
  #stage.is-animating #case-microscope,
  #stage.is-animating #case-or {
    transition: none;
  }
}