.facility-blueprint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease);
}

.app-shell .facility-blueprint.is-visible {
  display: block !important;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1 !important;
  animation: none;
}

.facility-blueprint img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  filter: saturate(.72) contrast(.82);
  opacity: 0;
  transition: opacity 360ms var(--ease), filter 360ms var(--ease);
}

.facility-blueprint[data-kind="belt"] img {
  clip-path: inset(48% 36% 16% 27% round 14px);
}

.facility-blueprint[data-kind="press"] img {
  clip-path: inset(30% 6% 9% 60% round 18px);
}

.facility-blueprint[data-kind="motor"] img {
  clip-path: inset(47% 27% 14% 34% round 14px);
}

.facility-blueprint[data-kind="batch"] img {
  clip-path: inset(29% 5% 8% 58% round 18px);
}

.facility-blueprint[data-stage="25"] img { opacity: .18; }
.facility-blueprint[data-stage="50"] img { opacity: .32; }
.facility-blueprint[data-stage="75"] img { opacity: .48; }
.facility-blueprint[data-stage="90"] img { opacity: .58; filter: saturate(.84) contrast(.87); }
.facility-blueprint[data-stage="100"] img { opacity: .66; filter: saturate(.9) contrast(.9); }

.facility-build-label {
  position: absolute;
  z-index: 3;
  top: 31%;
  left: 36%;
  max-width: 34%;
  padding: 4px 8px;
  border: 1px dashed rgba(116, 76, 43, .46);
  border-radius: 999px;
  background: rgba(255, 248, 222, .88);
  color: #654426;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 3px 10px rgba(77, 47, 26, .12);
}

.facility-blueprint[data-kind="press"] .facility-build-label {
  top: 34%;
  left: 48%;
  max-width: 28%;
}

.facility-blueprint[data-kind="motor"] .facility-build-label {
  top: 35%;
  left: 37%;
  max-width: 30%;
}

.facility-blueprint[data-kind="batch"] .facility-build-label {
  top: 34%;
  left: 48%;
  max-width: 28%;
}

.facility-blueprint[data-stage="0"] .facility-build-label { opacity: .72; }

@media (max-height: 370px) and (orientation: landscape) {
  .facility-build-label { top: 31%; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .facility-blueprint,
  .facility-blueprint img { transition: none; }
}