/* Animations and transitions, switched off for reduced motion. */
/* ---------- motion: short and quiet, never in the way. All of it is switched off for reduced motion. ---------- */
:root {
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes popIn {
  from {
    opacity: 0;
    translate: 0 -4px;
    scale: 0.98;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
}
@keyframes rowIn {
  from {
    opacity: 0;
    translate: -8px 0;
  }
}
@keyframes riseIn {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}
.menu:not([hidden]),
.pop:not([hidden]) {
  animation: popIn 0.15s var(--ease-out);
  transform-origin: top center;
}
.tip:not([hidden]) {
  animation: fadeIn 0.12s ease-out;
}
.drop:not([hidden]) {
  animation: fadeIn 0.16s ease-out;
}
.stage-msg:not([hidden]) > div {
  animation: riseIn 0.22s var(--ease-out);
}
.panel:not([hidden]),
.mode-panel:not([hidden]) {
  animation: fadeIn 0.18s ease-out;
}
.fempty:not([hidden]) {
  animation: fadeIn 0.2s ease-out;
}
.frow.new {
  animation: rowIn 0.24s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}
.palstrip {
  animation: riseIn 0.26s var(--ease-out);
}
.toast.out {
  opacity: 0;
  translate: 0 6px;
  transition:
    opacity 0.15s ease-in,
    translate 0.15s ease-in;
}
.tab,
.seg label {
  transition:
    background-color 0.16s,
    color 0.16s,
    box-shadow 0.16s;
}
.btn,
.ib,
.tbi,
.zl,
.ddbtn,
.clipname,
.tb-export,
.rng button {
  transition:
    background-color 0.12s,
    color 0.12s,
    box-shadow 0.12s,
    transform 0.1s;
}
.btn:active:not(:disabled),
.ib:active:not(:disabled),
.tbi:active,
.tab:active,
.zl:active,
.rng button:active {
  transform: scale(0.96);
}
.frow {
  transition: background-color 0.12s;
}
.ck svg,
.switch,
.switch::after {
  transition: all 0.15s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}