/* Board controls and template navigation stay still during selection. */
@media screen and (prefers-reduced-motion: no-preference) {
  body[data-screen=home] :is(.home-top, .home-top .brand, .home-content h1, .start-section > *,
    .template-strip > .template-card, .recent-section, .board-row, .nav-row.current svg) {
    animation: none;
  }
  body[data-screen=board] :is(#canvas, #editor, .board-bar, .people-bar, .creation-dock, .controls,
    .assistant-dock, .draw-tools, .object-context, .object-enter, .creation .selected svg,
    .draw-tools .selected svg, .board-bar .starred svg) {
    animation: none;
  }
  body[data-screen=board] :is(.square, .primary, .menu-row, .note-swatch, .preset, .zoom-value):active {
    scale: none;
  }
  .popover:not([data-closing]) {animation: panel-fade-in 120ms ease-out}
  .popover[data-closing] {animation: panel-fade-out 100ms ease-in both}
  .popover .menu-row, .popover .menu-row svg {animation: none}
  .popover .menu-row:hover svg {translate: none}
  body[data-screen=board] .drawer {animation: side-panel-in 180ms cubic-bezier(.2, 0, 0, 1)}
  body[data-screen=board] .assistant-panel {animation-duration: 180ms}
  dialog.template-dialog, dialog.template-dialog::backdrop {animation: none; transition: none}
}
@keyframes panel-fade-in {from {opacity: .2}}
@keyframes panel-fade-out {to {opacity: 0}}
@keyframes side-panel-in {from {opacity: 0; translate: 12px 0}}