@layer motion {
  :where(.button, .add-menu-item, .nav-item, .tool, .zoom-tools button, .tiny-btn, .spec-link) {
    transition:
      color var(--balaur-duration-focus) var(--balaur-ease-standard),
      background-color var(--balaur-duration-focus) var(--balaur-ease-standard),
      border-color var(--balaur-duration-focus) var(--balaur-ease-standard),
      transform var(--balaur-duration-press) var(--balaur-ease-standard);
  }

  :where(.button, .add-menu-item, .tool):active {
    transform: translateY(var(--balaur-distance-press));
  }

  .app-shell {
    transition: grid-template-columns var(--balaur-duration-panel) var(--balaur-ease-standard);
  }

  .topbar {
    transition: grid-template-columns var(--balaur-duration-panel) var(--balaur-ease-standard);
  }

  .sidebar,
  .inspector {
    transition:
      transform var(--balaur-duration-panel) var(--balaur-ease-enter),
      visibility var(--balaur-duration-instant) var(--balaur-ease-linear);
  }

  /* Desktop swaps the inspector into the library slot via display, so give the
     swap a short directional reveal; narrow widths keep the drawer slide
     driven by the transform transition above. */
  @media (min-width: 851px) {
    .app-shell.inspector-open .inspector {
      animation: inspector-reveal var(--balaur-duration-panel) var(--balaur-ease-enter);
    }
  }

  .familiar-control {
    transition:
      right var(--balaur-duration-panel) var(--balaur-ease-standard),
      color var(--balaur-duration-focus) var(--balaur-ease-standard),
      border-color var(--balaur-duration-focus) var(--balaur-ease-standard),
      transform var(--balaur-duration-press) var(--balaur-ease-standard);
  }

  .ai-panel {
    transition:
      opacity var(--balaur-duration-panel) var(--balaur-ease-standard),
      transform var(--balaur-duration-panel) var(--balaur-ease-enter);
  }

  .add-menu-panel {
    transition:
      opacity var(--balaur-duration-panel) var(--balaur-ease-standard),
      transform var(--balaur-duration-panel) var(--balaur-ease-enter);
  }

  .canvas-node {
    transition:
      border-color var(--balaur-duration-focus) var(--balaur-ease-standard),
      opacity var(--balaur-duration-focus) var(--balaur-ease-standard);
  }
  .connection-handles {
    transition: opacity var(--balaur-duration-focus) var(--balaur-ease-standard);
  }
  .connection-preview path {
    animation: connection-flow var(--balaur-duration-flow) var(--balaur-ease-linear) infinite;
  }
  .canvas-node.ai-card.running .node-accent {
    animation: ai-run var(--balaur-duration-process) var(--balaur-ease-linear) infinite;
  }
  .selection-entering .selection-bearing {
    animation: balaur-bearing-enter var(--balaur-duration-selection) var(--balaur-ease-enter) both;
  }
  .toast {
    transition:
      opacity var(--balaur-duration-focus) var(--balaur-ease-standard),
      transform var(--balaur-duration-focus) var(--balaur-ease-enter);
  }

  .canvas { view-transition-name: balaur-canvas; }
  ::view-transition-old(balaur-canvas),
  ::view-transition-new(balaur-canvas) {
    animation-duration: var(--balaur-duration-travel);
    animation-timing-function: var(--balaur-ease-standard);
  }
  body[data-canvas-navigation="in"]::view-transition-old(balaur-canvas) { animation-name: portal-out; }
  body[data-canvas-navigation="in"]::view-transition-new(balaur-canvas) { animation-name: portal-in; }
  body[data-canvas-navigation="out"]::view-transition-old(balaur-canvas) {
    animation-name: portal-in;
    animation-direction: reverse;
  }
  body[data-canvas-navigation="out"]::view-transition-new(balaur-canvas) {
    animation-name: portal-out;
    animation-direction: reverse;
  }

  .settings-dialog {
    transition:
      opacity var(--balaur-duration-panel) var(--balaur-ease-enter),
      transform var(--balaur-duration-panel) var(--balaur-ease-enter);
  }
  .ai-message.loading p::after {
    animation: thinking var(--balaur-duration-flow) var(--balaur-ease-linear) infinite;
  }

  @starting-style {
    .ai-panel[aria-hidden="false"],
    dialog[open] {
      opacity: 0;
      transform: translateY(var(--balaur-distance-panel));
    }
    .add-menu-panel:not([hidden]) {
      opacity: 0;
      transform: translateY(var(--balaur-distance-panel));
    }
  }

  .spec-link span {
    transition: transform var(--balaur-duration-focus) var(--balaur-ease-standard);
  }
  .spec-link:hover span { transform: translate(2px, -2px); }
  /* The dot only breathes while the index is actually building; once a settled
     status is reported the .is-indexing class is dropped and the dot rests. */
  .storage-state.is-indexing i {
    animation: status-breathe var(--balaur-duration-process) var(--balaur-ease-standard) infinite;
  }

  @keyframes connection-flow { to { stroke-dashoffset: -10; } }
  @keyframes status-breathe { 50% { opacity: .35; } }
  @keyframes inspector-reveal {
    from { opacity: 0; transform: translateX(calc(-1 * var(--balaur-distance-panel))); }
    to { opacity: 1; transform: none; }
  }
  @keyframes ai-run { to { background-position: -200% 0; } }
  @keyframes thinking { to { background-position: 6px 0; } }
  @keyframes balaur-bearing-enter {
    from { opacity: 0; transform: scale(.97); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes portal-out {
    to { opacity: 0; transform: scale(calc(1 + var(--balaur-scale-travel))); filter: blur(var(--balaur-distance-blur)); }
  }
  @keyframes portal-in {
    from { opacity: 0; transform: scale(calc(1 - var(--balaur-scale-travel))); filter: blur(var(--balaur-distance-blur)); }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --balaur-duration-press: 0ms;
      --balaur-duration-focus: 0ms;
      --balaur-duration-selection: 0ms;
      --balaur-duration-panel: 0ms;
      --balaur-duration-travel: 0ms;
      --balaur-duration-flow: 0ms;
      --balaur-duration-process: 0ms;
      --balaur-distance-press: 0px;
      --balaur-distance-panel: 0px;
      --balaur-distance-blur: 0px;
      --balaur-scale-travel: 0;
    }

    *, *::before, *::after {
      scroll-behavior: auto !important;
      animation-duration: 0s !important;
      animation-delay: 0s !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation-duration: 0s !important;
    }

    :where(.connection-preview path, .ai-card.running .node-accent, .ai-message.loading p::after, .storage-state.is-indexing i) {
      animation: none;
    }
    /* Decorative hover motion collapses to a still state, not an instant jump. */
    .nav-item:hover, #newCanvas:hover, #newGroup:hover, .spec-link:hover span { transform: none; }
  }
}