/* Size the stage to the actual canvas so the live thread meets its baked continuation. */
.colony__sequence-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.colony__sequence { position:relative; opacity:0; }
.colony__sequence[data-ready="true"] { opacity:1; }
.colony__motion-object:has(.colony__sequence[data-ready="true"]) .colony__sequence-poster { visibility:hidden; }
.colony__motion-object::before {
  bottom: calc(100% - 3px);
  left: 50%;
  width: clamp(1px, .12vw, 2px);
  transform: translateX(-50%);
  background: linear-gradient(90deg, #e3e2df, #a7a6a3 55%, #deddd9);
}
@media (min-width: 1101px) {
  .colony__motion-track { top: 0; }
  .colony__motion-stage {
    top: clamp(90px, 18svh, 160px);
    width: min(100%, calc(68svh * 640 / 880), calc(650px * 640 / 880));
    aspect-ratio: 640 / 880;
    height: auto;
    margin-inline: auto;
  }
}
@media (max-width: 1100px) {
  .colony__motion-track { top: 80px; }
  .colony__motion-stage { width: calc(300px * 640 / 880); }
}
@media (max-width: 700px) {
  .colony__motion-stage { width: calc(260px * 640 / 880); }
}