/* 列表动画 */
.row.item {
  transform: translateX(calc(var(--slide-normal) * -1));
  opacity: 0;
  animation: slide-in-right var(--duration-normal) var(--ease-out) forwards;
  transition: all var(--duration-normal) var(--ease-out);
  border: 2px solid transparent;
  position: relative;
}

.row.item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
}

.row.item:hover {
  transform: translateX(var(--slide-small));
  background: var(--bg-1);
}

.row.item:hover::before {
  opacity: 0.05;
}

.row.item.selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  transform: scale(1.01);
}

.row.item.removed {
  animation: slide-out-left var(--duration-normal) var(--ease-in-out) forwards;
  transform: scale(0.95);
  opacity: 0;
}

/* 行动画延迟 */
.row.item:nth-child(1)  { animation-delay: calc(1 * 50ms); }
.row.item:nth-child(2)  { animation-delay: calc(2 * 50ms); }
.row.item:nth-child(3)  { animation-delay: calc(3 * 50ms); }
.row.item:nth-child(4)  { animation-delay: calc(4 * 50ms); }
.row.item:nth-child(5)  { animation-delay: calc(5 * 50ms); }
.row.item:nth-child(6)  { animation-delay: calc(6 * 50ms); }
.row.item:nth-child(7)  { animation-delay: calc(7 * 50ms); }
.row.item:nth-child(8)  { animation-delay: calc(8 * 50ms); }
.row.item:nth-child(9)  { animation-delay: calc(9 * 50ms); }
.row.item:nth-child(10) { animation-delay: calc(10 * 50ms); }
.row.item:nth-child(11) { animation-delay: calc(11 * 50ms); }
.row.item:nth-child(12) { animation-delay: calc(12 * 50ms); }
.row.item:nth-child(13) { animation-delay: calc(13 * 50ms); }
.row.item:nth-child(14) { animation-delay: calc(14 * 50ms); }
.row.item:nth-child(15) { animation-delay: calc(15 * 50ms); }
.row.item:nth-child(16) { animation-delay: calc(16 * 50ms); }
.row.item:nth-child(17) { animation-delay: calc(17 * 50ms); }
.row.item:nth-child(18) { animation-delay: calc(18 * 50ms); }
.row.item:nth-child(19) { animation-delay: calc(19 * 50ms); }
.row.item:nth-child(20) { animation-delay: calc(20 * 50ms); }

/* 进入动画 */
@keyframes slide-in-right {
  from {
    transform: translateX(calc(var(--slide-normal) * -1));
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 删除动画 */
@keyframes slide-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(calc(var(--slide-large) * -1));
    opacity: 0;
  }
}

/* 图标动画 */
.row.item .icon {
  transition: all var(--duration-normal) var(--ease-bounce);
}

.row.item:hover .icon {
  transform: scale(1.1) rotate(5deg);
}

/* 选中状态过渡 */
.row.item .checkbox {
  transition: all var(--duration-normal) var(--ease-bounce);
}

.row.item.selected .checkbox {
  transform: scale(1.1);
}

/* 播放状态动画 */
.row.item.playing {
  animation: pulse 2s var(--ease-in-out) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* 进度条动画 */
.progress-bar {
  position: relative;
  overflow: hidden;
}

.progress-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transform: translateX(-100%);
  animation: progress-shine 2s ease-in-out infinite;
}

.progress-bar .progress-fill {
  position: relative;
  transition: width var(--duration-normal) var(--ease-out);
  will-change: width;
  background: linear-gradient(
    90deg,
    var(--primary),
    var(--primary-hover)
  );
}

@keyframes progress-shine {
  to {
    transform: translateX(100%);
  }
}

/* 加载中状态 */
.loading-container {
  display: inline-flex;
  align-items: center;
  gap: var(--slide-small);
}

.loading-spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.loading-dots::after {
  content: '...';
  animation: dots 1.5s steps(4) infinite;
  width: 1.2em;
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

/* 模态框动画 - 增强版 */
@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(var(--slide-normal));
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modal-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(var(--slide-normal));
  }
}

.modalMask,
.announceMask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  transition: all var(--duration-normal) var(--ease-out);
  backdrop-filter: blur(0);
  opacity: 0;
  visibility: hidden;
}

.modalMask[aria-hidden="false"],
.announceMask[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(8px);
}

/* 模态框内容动画 */
.modal,
.announceBox {
  opacity: 0;
  transform: scale(0.95) translateY(var(--slide-normal));
  transition: transform var(--duration-normal) var(--ease-bounce),
              opacity var(--duration-normal) var(--ease-out);
  will-change: transform, opacity;
}

.modalMask[aria-hidden="false"] .modal,
.announceMask[aria-hidden="false"] .announceBox {
  opacity: 1;
  transform: scale(1) translateY(0);
  animation: modal-in var(--duration-normal) var(--ease-bounce) forwards;
}

/* 模态框关闭动画 */
.modalMask[aria-hidden="true"] .modal,
.announceMask[aria-hidden="true"] .announceBox {
  opacity: 0;
  transform: scale(0.95) translateY(var(--slide-normal));
  animation: modal-out var(--duration-normal) var(--ease-in-out) forwards;
}

/* 批量操作区域动画 */
.batch-actions {
  transform: translateY(var(--slide-normal));
  opacity: 0;
  animation: slide-up var(--duration-normal) var(--ease-bounce) forwards;
}

@keyframes slide-up {
  from {
    transform: translateY(var(--slide-normal));
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 播放器特殊动画 */
@keyframes player-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes player-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

.modal[aria-label="播放器"] {
  transform: translateY(100%);
  transition: transform var(--duration-normal) var(--ease-bounce);
  will-change: transform, opacity;
}

.modalMask[aria-hidden="false"] .modal[aria-label="播放器"] {
  transform: translateY(0);
  animation: player-in var(--duration-normal) var(--ease-bounce);
}

.modalMask[aria-hidden="true"] .modal[aria-label="播放器"] {
  animation: player-out var(--duration-normal) var(--ease-in-out);
}

/* 封面旋转动画 */
.disc {
  transition: transform var(--duration-normal) var(--ease-bounce);
}

.disc.playing {
  animation: disc-rotate 20s linear infinite;
}

@keyframes disc-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 通用hover效果 */
.hoverable {
  transition: all var(--duration-normal) var(--ease-out);
}

.hoverable:hover {
  transform: translateY(calc(var(--slide-small) * -1));
}

/* 状态反馈动画 */
@keyframes success-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.success-animation {
  animation: success-scale 0.5s var(--ease-bounce);
  color: var(--success);
}

.error-animation {
  animation: shake 0.4s var(--ease-in-out);
  color: var(--danger);
}

/* 气泡提示动画 */
.tooltip {
  position: relative;
  opacity: 0;
  transform: translateY(var(--slide-small));
  transition: all var(--duration-normal) var(--ease-bounce);
}

.tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

/* 波纹效果 */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: currentColor;
  opacity: 0;
  transform: scale(0);
  animation: ripple-effect 0.6s var(--ease-out);
}

@keyframes ripple-effect {
  0% {
    transform: scale(0);
    opacity: 0.3;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* 加载动画 */
.loading {
  position: relative;
  animation: rotate 1s var(--ease-in-out) infinite;
}

.loading::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: rotate 1s linear infinite reverse;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}