@layer motion {
  .button, .map-node { transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
  .button:not(:disabled):active { transform: translateY(1px); }
  .quota-fill { transition: width 900ms cubic-bezier(.2, .7, .2, 1), background-color 450ms ease; }
  .mascot { transition: left 700ms cubic-bezier(.3, .05, .2, 1), top 700ms cubic-bezier(.3, .05, .2, 1); }
  .mascot-art { animation: breathe 3.7s ease-in-out infinite; transform-origin: 50% 88%; }
  .mascot.is-moving .mascot-art { animation: scurry 280ms ease-in-out infinite; }
  .mascot.is-celebrating .mascot-art { animation: happy 700ms ease-in-out 2, breathe 3.7s 1.4s ease-in-out infinite; }
  .carried-cache { position: absolute; right: 21px; bottom: 24px; width: 39px; height: 30px; transform: rotate(-8deg) scale(0); opacity: 0; transition: opacity 220ms ease, transform 220ms ease; }
  .carried-cache svg { width: 100%; height: 100%; }
  .mascot.is-carrying .carried-cache { opacity: 1; transform: rotate(-8deg) scale(1); }
  .mascot-bubble { animation: bubble-appear 280ms ease-out both; }
  .node-art { transition: opacity 450ms ease; }
  .spinner { animation: spin 1.1s linear infinite; }
  .dialog[open] { animation: dialog-appear 180ms ease-out; }
  @keyframes breathe { 0%, 100% { transform: rotate(-1deg) scaleY(1); } 50% { transform: rotate(1deg) scaleY(.975); } }
  @keyframes scurry { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
  @keyframes happy { 0%, 100% { transform: translateY(0) rotate(-2deg); } 40% { transform: translateY(-13px) rotate(4deg); } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes bubble-appear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes dialog-appear { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}
