.canvas-node-enter {
  animation: canvas-node-enter 610ms linear both;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.canvas-node-resize {
  transition: width 380ms cubic-bezier(.16, 1, .3, 1);
}

.canvas-node-resize .media-card {
  transition: aspect-ratio 380ms cubic-bezier(.16, 1, .3, 1);
}

@keyframes canvas-node-enter {
  0% {
    opacity: .28;
    transform: translate3d(0, 8px, 0) scale(var(--canvas-node-enter-x), var(--canvas-node-enter-y));
  }
  8%, 24.59% {
    opacity: 1;
    transform: translate3d(0, 8px, 0) scale(var(--canvas-node-enter-x), var(--canvas-node-enter-y));
  }
  24.59% {
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-node-enter { animation: none; }
  .canvas-node-resize, .canvas-node-resize .media-card { transition: none; }
}