.canvas-node.is-exiting {
  animation: canvas-node-exit var(--node-exit-duration, 230ms) cubic-bezier(0.435, 0, 0.61, 0.425) both;
  transform-origin: center center;
  pointer-events: none;
  will-change: transform, opacity;
}

.canvas-node.is-exiting * {
  pointer-events: none !important;
}

@keyframes canvas-node-exit {
  from { transform: var(--node-position) scale(1); opacity: 1; }
  to { transform: var(--node-position) scale(0.72); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-node.is-exiting { animation: none; opacity: 0; }
}

.canvas-node.is-entering:not(.is-exiting) {
  animation: canvas-node-enter 230ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center center;
  will-change: transform, opacity;
}

@keyframes canvas-node-enter {
  from { transform: var(--node-position) scale(0.72); opacity: 0; }
  to { transform: var(--node-position) scale(1); opacity: 1; }
}

/* Wait until AnchoredPanel has measured the final screen-space position.
   Scaling does not change its natural layout dimensions or anchor calculation. */
.canvas-add-menu[data-placement] {
  animation: canvas-menu-enter 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: left top;
}
.canvas-add-menu[data-placement="above"] { transform-origin: left bottom; }
.canvas-add-menu[data-placement="left"] { transform-origin: right center; }
.canvas-add-menu[data-placement="right"] { transform-origin: left center; }
.canvas-add-menu__script-submenu {
  animation: canvas-menu-enter 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: left top;
}

@keyframes canvas-menu-enter {
  from { transform: scale(0.88); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-node.is-entering:not(.is-exiting),
  .canvas-add-menu[data-placement],
  .canvas-add-menu__script-submenu { animation: none; }
}