html {
  --wip-live-duration: 420ms;
  --wip-live-ease: cubic-bezier(.22, .72, .22, 1);
}
body[data-chapter-canvas-refresh] main.ritual-room.unified-work-room {
  --unified-motion: var(--wip-live-duration);
  --unified-easing: var(--wip-live-ease);
}
html.wip-live-motion {
  view-transition-name: none;
  --wip-live-slide: 100% 0;
}
html.wip-live-motion::view-transition { pointer-events: none; }
.ritual-room.wip-results-toggled > .room-content { animation: none; }
html.wip-live-motion :is(.unified-canvas-work .canvas-art-mount, .movie-workspace) {
  view-transition-name: wip-artwork;
}
html.wip-live-motion :is(.results-visible .unified-results-panel, .mb-live-summary,
  .movie-panel.is-live > .movie-live) {
  view-transition-name: wip-proposals;
}
html.wip-live-motion .movie-frame-strip { view-transition-name: wip-history; }
html.wip-live-motion :is(.unified-canvas-work .canvas-v111-layout, .unified-canvas-work .canvas-art-mount,
  .unified-results-panel) { transition: none !important; }
html.wip-live-motion .mb-scene :is(.mb-overview, .mb-controls) {
  transition: left var(--wip-live-duration) var(--wip-live-ease), width var(--wip-live-duration) var(--wip-live-ease);
}

html.wip-live-motion::view-transition-group(*) {
  animation-duration: var(--wip-live-duration);
  animation-timing-function: var(--wip-live-ease);
}
/* The artwork moves as one surface. Keep its ink opaque throughout. */
html.wip-live-motion::view-transition-old(wip-artwork) { animation: none; visibility: hidden; }
html.wip-live-motion::view-transition-new(wip-artwork) { animation: none; mix-blend-mode: normal; }
html.wip-live-motion::view-transition-image-pair(wip-proposals),
html.wip-live-motion::view-transition-image-pair(wip-history) { overflow: clip; }
html.wip-live-motion::view-transition-new(wip-proposals):only-child,
html.wip-live-motion::view-transition-new(wip-history):only-child {
  animation: wip-rail-in var(--wip-live-duration) var(--wip-live-ease) both;
}
html.wip-live-motion::view-transition-old(wip-proposals):only-child,
html.wip-live-motion::view-transition-old(wip-history):only-child {
  animation: wip-rail-out var(--wip-live-duration) var(--wip-live-ease) both;
}
@keyframes wip-rail-in {
  from { translate: var(--wip-live-slide); }
  to { translate: 0 0; }
}
@keyframes wip-rail-out {
  from { translate: 0 0; }
  to { translate: var(--wip-live-slide); }
}
@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 501px) {
  html.wip-live-motion { --wip-live-slide: 0 100%; }
}