/* Motion cells (js/motion-cell.js): a grid cell whose still is swapped
   for a coded animation once it's ready. The stage is drawn at the Figma
   frame's size and scaled to cover the cell. */

.motion-stage {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
  user-select: none;
}

.motion-cell.is-live .motion-stage {
  opacity: 1;
}

/* The still underneath, hidden once the stage has faded in over it */
.motion-cell.is-live > img {
  visibility: hidden;
  transition: visibility 0s 400ms;
}

/* Shown again while an animation sweeps in over it (The Script homepage's
   first pass, js/the-script/homepage.js) */
.motion-cell.is-live.is-under > img {
  visibility: visible;
  transition: none;
}

.motion-stage img,
.motion-stage svg {
  display: block;
}