.is-hot {
  will-change: transform, opacity;
}

.inspector-block { animation: rise var(--dur-base) var(--ease-out); }

.card.is-new,
.clip.is-new {
  animation: rise var(--dur-base) var(--ease-out);
}

.clip.is-leaving {
  animation: clip-out 160ms var(--ease-in) forwards;
}

.clip.is-split-left {
  animation: split-left 220ms var(--ease-out);
}

.clip.is-split-right {
  animation: split-right 220ms var(--ease-out);
}

.clip.is-settling {
  transition: transform 120ms var(--ease-out), width 120ms var(--ease-out);
}

.text-btn:active:not(:disabled) {
  transform: translateY(1px);
  opacity: 0.85;
}

.scrim {
  animation: fade var(--dur-dialog) var(--ease-out);
}

.dialog {
  animation: rise var(--dur-dialog) var(--ease-out);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    var(--shadow-3),
    0 0 48px rgba(212, 120, 74, 0.08);
}

.toast {
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-2), 0 0 24px rgba(0, 0, 0, 0.28);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes play-pulse {
  0%,
  100% {
    box-shadow:
      var(--btn-accent-hilite),
      var(--btn-accent-shade),
      0 0 0 3px rgba(212, 120, 74, 0.12);
  }
  50% {
    box-shadow:
      var(--btn-accent-hilite),
      var(--btn-accent-shade),
      0 0 0 6px rgba(212, 120, 74, 0.2);
  }
}

@keyframes clip-out {
  to { opacity: 0; transform: scaleX(0.98); }
}

@keyframes split-left {
  0% { transform: translateX(0); }
  40% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

@keyframes split-right {
  0% { transform: translateX(0); }
  40% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .app.is-intro .bin,
  .app.is-intro .preview,
  .app.is-intro .inspector,
  .app.is-intro .timeline,
  .app.is-intro .tool-shelf,
  .app.is-intro .brand {
    opacity: 1;
    transform: none;
  }

  .preview.is-playing .play-btn {
    animation: none;
  }

  .card:hover,
  .clip:hover {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .dialog {
    backdrop-filter: none;
    background: #1C1B19;
  }
}