/* 並べ替え直後だけ、移動したカードと移動先を視覚的に示す。 */
.bk-anime-frame-list.is-move-feedback .bk-anime-frame-card {
  opacity: 0.42;
  filter: saturate(0.62) brightness(0.94);
  transition: opacity 180ms ease, filter 180ms ease;
}

.bk-anime-frame-list.is-move-feedback .bk-anime-frame-card.is-moved-card {
  position: relative;
  z-index: 1;
  opacity: 1;
  filter: none;
  border-color: #2daae1;
  box-shadow: 0 0 0 4px rgba(45, 170, 225, 0.24), 0 6px 18px rgba(35, 99, 128, 0.2);
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1);
  animation-fill-mode: both;
}

.bk-anime-frame-list.is-move-feedback .bk-anime-frame-card.is-moved-card .bk-anime-frame-card-header {
  background: #278fc0;
}

.bk-anime-frame-card.is-moved-prev {
  animation-name: bk-anime-frame-move-prev;
}

.bk-anime-frame-card.is-moved-next {
  animation-name: bk-anime-frame-move-next;
}

@keyframes bk-anime-frame-move-prev {
  0% { transform: translateX(28px) scale(0.98); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes bk-anime-frame-move-next {
  0% { transform: translateX(-28px) scale(0.98); }
  100% { transform: translateX(0) scale(1); }
}

@media (max-width: 767px) {
  @keyframes bk-anime-frame-move-prev {
    0% { transform: translateY(20px) scale(0.985); }
    100% { transform: translateY(0) scale(1); }
  }

  @keyframes bk-anime-frame-move-next {
    0% { transform: translateY(-20px) scale(0.985); }
    100% { transform: translateY(0) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .bk-anime-frame-list.is-move-feedback .bk-anime-frame-card,
  .bk-anime-frame-list.is-move-feedback .bk-anime-frame-card.is-moved-card {
    transition: none;
    animation: none;
  }
}