.work .annotation-original,
.work .annotation-final { transition: opacity .75s ease, transform .9s ease; }
.work .annotation-final {
  position: absolute;
  top: 0;
  left: 0;
  width: min(620px, 100%);
  opacity: 0;
  transform: rotate(0deg);
  pointer-events: none;
}
.work.board-complete .annotation-original { opacity: 0; }
.work.board-complete .annotation-final { opacity: 1; }

.work.board-complete .print,
.work.board-complete .print[data-id="amenity"],
.work.board-complete .print[data-id="elevated"],
.work.board-complete .dealer-card {
  width: 17.5%;
  height: 230px;
  transform: rotate(0deg);
  transition: left 1050ms cubic-bezier(.2,.8,.2,1),
              top 1050ms cubic-bezier(.2,.8,.2,1),
              width 1050ms cubic-bezier(.2,.8,.2,1),
              height 1050ms cubic-bezier(.2,.8,.2,1),
              transform 1050ms cubic-bezier(.2,.8,.2,1);
}
.work.board-complete .print.arriving { animation: none; }
.work.board-complete .print img,
.work.board-complete .print[data-id="amenity"] img,
.work.board-complete .print[data-id="elevated"] img { height: 172px; }
.work.board-complete .dealer-face { height: 100%; }
.work.board-complete .tablet-object {
  width: 22%;
  transform: rotate(0deg);
  transition: left 1050ms cubic-bezier(.2,.8,.2,1),
              top 1050ms cubic-bezier(.2,.8,.2,1),
              transform 1050ms cubic-bezier(.2,.8,.2,1);
}
.work.board-complete .number.matched { transform: rotate(0deg); }
/* The organize transitions would otherwise make a dragged piece trail behind the pointer. */
.work.board-complete .print.dragging,
.work.board-complete .tablet-object.dragging { transition: none; }

@media (min-width: 1100px) {
  .work .annotation-final { top: 64px; left: 44.5%; width: min(620px, 42%); }
}
@media (min-width: 641px) and (max-width: 1099px) {
  .work .work-topline { position: relative; }
  .work .annotation-final { left: var(--annotation-indent, 0px); }
}
@media (min-width: 641px) and (max-height: 999px) {
  .work.board-complete .studio-board { height: 1300px; }
  .work.board-complete .print,
  .work.board-complete .print[data-id="amenity"],
  .work.board-complete .print[data-id="elevated"],
  .work.board-complete .dealer-card { width: 21%; }
}
@media (max-width: 640px) {
  .work .work-topline { position: relative; }
  .work .annotation-final { width: 100%; }
  .work .studio-board { transition: height 1050ms cubic-bezier(.2,.8,.2,1); }
  .work:not(.board-complete) .studio-board { height: 268vw; }
  .work.board-complete .studio-board { height: 800px; }
  .work.board-complete .simplify-line {
    margin-top: calc(-117px + 39.15vw - .48em);
  }
  .work .tablet-object,
  .work.board-complete .tablet-object { width: 65.25%; }
  .work.board-complete .print,
  .work.board-complete .print[data-id="amenity"],
  .work.board-complete .print[data-id="elevated"],
  .work.board-complete .dealer-card { width: 46%; height: 210px; }
  .work.board-complete .print img,
  .work.board-complete .print[data-id="amenity"] img,
  .work.board-complete .print[data-id="elevated"] img { height: 145px; }
}
@media (prefers-reduced-motion: reduce) {
  .work .annotation-original,
  .work .annotation-final,
  .work .studio-board,
  .work.board-complete .print,
  .work.board-complete .tablet-object { transition: none; }
}