/* The moving selection is a single small layer; elephant artwork stays untouched. */
.motion-group-static { position: relative; }
.motion-group-running { isolation: isolate; }
[data-motion-group].motion-group-running > button { position: relative; z-index: 1; }
[data-motion-group].motion-group-running > .motion-selection-target {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transition: none !important;
}
/* Filter chips normally have opaque surfaces; reveal the travelling highlight. */
.filters.motion-group-running > button:not(.active):not(.is-active):not(.selected):not([aria-selected="true"]) {
  background-color: transparent !important;
  background-image: none !important;
}
.motion-selection-pill {
  position: absolute;
  z-index: 0;
  display: block;
  box-sizing: border-box;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-interface-motion="enabled"] .appearance-panel:not([hidden]) {
    animation: interface-panel-enter 200ms cubic-bezier(.2,.8,.2,1);
  }
  html[data-interface-motion="enabled"] .modal {
    animation: interface-panel-enter 220ms cubic-bezier(.2,.8,.2,1);
  }
}
@keyframes interface-panel-enter {
  from { opacity: .3; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
html[data-interface-motion="disabled"] :is(.modal, .appearance-panel) {
  animation: none !important;
  transition: none !important;
}

.system-motion-note { display: none; }
@media (prefers-reduced-motion: reduce) {
  .system-motion-note { display: block; }
}