/* The real property, planning tool, and analysis tool unfold as separate planes. */
.workbench {
  perspective: 1300px;
  perspective-origin: 50% 40%;
  isolation: isolate;
}
.motion-ready .workbench {display: grid; grid-template-columns: minmax(0, 1fr);}
.workbench .tool-panel {
  grid-area: 1 / 1;
  align-self: start;
  backface-visibility: hidden;
}
.workbench .tool-panel[hidden] {display: none;}
.workbench .tool-panel[hidden].is-departing {
  display: block;
  pointer-events: none;
  z-index: 1;
}
.workbench-grid,
.workbench-property,
.workbench-connectors,
.workbench-stamp {pointer-events: none;}
.workbench .workbench-connectors svg {stroke-width: 2; opacity: .7;}
.workbench .tool-panel {box-shadow: 0 24px 70px #050b2b80, 0 0 0 1px #a0c4ee35;}
.workbench .workbench-stamp {z-index: 1; top: -10px;}
.tool-tabs button {position: relative; isolation: isolate;}
.tool-tabs button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #88d6f61e, transparent);
  border-left: 3px solid var(--yellow);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms ease;
}
.tool-tabs button[aria-selected=true]::before {transform: scaleX(1);}
.tool-tabs button[aria-selected=true] {padding-left: 16px;}
.tool-tabs button > span:last-child {transition: transform 350ms ease;}
.tool-tabs button[aria-selected=true] > span:last-child {transform: rotate(45deg);}

@media (min-width: 1101px) and (min-height: 950px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .tools-stage {
    min-height: 0;
    padding-block: 70px 110px;
  }
  .motion-ready .workbench {min-height: 595px;}
  .motion-ready .workbench::before {
    content: '';
    position: absolute;
    inset: 150px 20px 10px 50px;
    background: linear-gradient(140deg, #08aded44, #88d6f60c);
    border: 1px solid #88d6f659;
    border-radius: 7px;
    transform-origin: 50% 100%;
    transform: translate3d(calc(55px - var(--open) * 75px), calc(65px - var(--open) * 30px), -60px)
      rotateX(calc(28deg - var(--open) * 15deg)) rotateZ(calc(8deg - var(--open) * 17deg));
    pointer-events: none;
  }
  .motion-ready .workbench-grid {
    inset: -25px -15px -30px;
    background-size: 35px 35px;
    background-image: linear-gradient(#88d6f62b 1px, transparent 1px), linear-gradient(90deg, #88d6f62b 1px, transparent 1px);
    transform: translate3d(calc(30px - var(--open) * 55px), calc(80px - var(--open) * 90px), -100px)
      rotateX(calc(55deg - var(--open) * 25deg)) rotateZ(calc(-24deg + var(--open) * 18deg)) scale(1.2);
  }
  .motion-ready .workbench-property {
    top: 15px;
    left: 25px;
    width: 59%;
    opacity: 1;
    transform: translate3d(calc(var(--open) * -65px), calc(30px - var(--open) * 80px), -60px)
      rotateY(calc(16deg - var(--open) * 12deg)) rotateZ(calc(-4deg - var(--open) * 11deg));
    box-shadow: 0 22px 45px #060e3890;
  }
  .motion-ready .workbench-property img {height: 185px;}
  .motion-ready .workbench .tool-panel {
    margin: 100px 0 0 25px;
    transform-origin: 50% 75%;
    transform: translate3d(calc(48px - var(--open) * 65px), calc(95px - var(--open) * 125px), calc(var(--open) * 30px))
      rotateX(calc(12deg - var(--open) * 12deg)) rotateY(calc(-12deg + var(--open) * 12deg))
      rotateZ(calc(6deg - var(--open) * 7deg)) scale(calc(.91 + var(--open) * .09));
  }
  .motion-ready .workbench-connectors {
    transform: translate(calc(var(--open) * -30px), calc(var(--open) * -30px));
  }
  .motion-ready .workbench-connectors svg {
    stroke-dasharray: 10 8;
    stroke-dashoffset: calc(var(--open) * -160px);
  }
  .motion-ready .workbench-stamp {
    right: 15px;
    top: -15px;
    transform: translate3d(calc(var(--open) * 8px), calc(var(--open) * -30px), 45px)
      rotate(calc(9deg - var(--open) * 13deg));
  }
}

@media (max-width: 1100px), (max-height: 949px) {
  .workbench .tool-panel {transform: none;}
  .workbench .workbench-property {transform: rotate(-7deg);}
}
@media (prefers-reduced-motion: reduce) {
  .workbench .tool-panel,
  .workbench .workbench-property,
  .workbench .workbench-stamp,
  .workbench .workbench-grid,
  .workbench .workbench-connectors {transform: none;}
  .tool-tabs button::before,
  .tool-tabs button > span:last-child {transition: none;}
}