/* PigCat Music — product / tool micro-motion
   Hard-edge, accent #0EA5E9. Timing aligns with --pc-t-1..4 when present. */

:root {
  --pc-prod-t1: var(--pc-t-1, 120ms);
  --pc-prod-t2: var(--pc-t-2, 220ms);
  --pc-prod-t3: var(--pc-t-3, 360ms);
  --pc-prod-t4: var(--pc-t-4, 550ms);
}

/* ---------- Dropzone dragover breath ---------- */
@keyframes pc-dz-breathe {
  0%,
  100% {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  50% {
    border-color: rgba(14, 165, 233, 0.55);
    background: rgba(14, 165, 233, 0.08);
  }
}

.wb-dropzone.is-dragover,
.wb-dropzone.dragover.is-dragover {
  border-style: solid;
  animation: pc-dz-breathe var(--pc-prod-t4) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) infinite;
}

/* ---------- File chip enter ---------- */
@keyframes pc-chip-enter {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.file-chip.is-enter,
.file-chip.pc-chip-enter {
  animation: pc-chip-enter var(--pc-prod-t2) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

/* ---------- Progress stages ---------- */
@keyframes pc-stage-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.35);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0);
  }
}

.stage-item {
  transition: color var(--pc-prod-t2) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.stage-item .stage-dot {
  position: relative;
  transition:
    background var(--pc-prod-t2) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
    border-color var(--pc-prod-t2) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.stage-item.is-active .stage-dot,
.stage-item.is-active .stage-mark {
  animation: pc-stage-pulse 1.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) infinite;
}

@keyframes pc-check-pop {
  from {
    opacity: 0;
    transform: rotate(-45deg) scale(0.6);
  }
  to {
    opacity: 1;
    transform: rotate(-45deg) scale(1);
  }
}

.stage-item.is-done .stage-dot::after {
  content: "";
  position: absolute;
  left: 1px;
  top: -1px;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid #000;
  border-bottom: 1.5px solid #000;
  transform: rotate(-45deg);
  opacity: 0;
  animation: pc-check-pop var(--pc-prod-t2) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

.stage-item.is-entering {
  animation: pc-chip-enter var(--pc-prod-t2) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

/* Task panel brief success pulse */
@keyframes pc-panel-success {
  0% {
    border-color: var(--border);
  }
  35% {
    border-color: var(--success, #22c55e);
  }
  100% {
    border-color: var(--border);
  }
}

.task-panel.is-success-pulse {
  animation: pc-panel-success var(--pc-prod-t3) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ---------- Export card success flash ---------- */
@keyframes pc-export-success {
  0% {
    border-color: var(--border);
    background: var(--surface);
  }
  40% {
    border-color: var(--success, #22c55e);
    background: rgba(34, 197, 94, 0.1);
  }
  100% {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
}

.export-card.is-success {
  animation: pc-export-success var(--pc-prod-t3) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.export-history-row.is-fade-in {
  animation: pc-chip-enter var(--pc-prod-t2) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

/* ---------- Review item locate flash ---------- */
@keyframes pc-review-flash {
  0%,
  100% {
    border-color: var(--accent);
  }
  50% {
    border-color: rgba(14, 165, 233, 0.35);
  }
}

.ed-review-item.is-flash,
.review-row.is-flash {
  animation: pc-review-flash 0.35s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) 2;
  border-color: var(--accent);
}

/* ---------- Toast: unify slide from top + fade ---------- */
@keyframes pc-toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

#globalToast,
.toast,
.pc-toast,
.toast.pc-toast {
  top: 24px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  transition: none;
}

#globalToast.show,
.toast.show,
.pc-toast.show,
.toast.pc-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  animation: pc-toast-in var(--pc-prod-t2) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

/* ---------- Form error shake ---------- */
@keyframes pc-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}

.pc-shake {
  animation: pc-shake 400ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

@keyframes pc-input-flash {
  0%,
  100% {
    border-color: var(--danger, #ef4444);
  }
  50% {
    border-color: var(--accent);
  }
}

.pc-input.is-invalid,
.pc-input.pc-input-error.is-invalid {
  border-color: var(--danger, #ef4444);
  animation: pc-input-flash var(--pc-prod-t3) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ---------- Skeleton shimmer ---------- */
@keyframes pc-skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton,
.ed-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(14, 165, 233, 0.1) 45%,
    rgba(255, 255, 255, 0.04) 90%
  );
  background-size: 200% 100%;
  animation: pc-skeleton-shimmer 1.4s linear infinite;
  border-radius: 0;
}

/* ---------- Button press ---------- */
.btn:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-ghost:active:not(:disabled) {
  transform: scale(0.98);
}

#btnPlay.is-press,
.ed-transport .btn.is-press {
  transform: scale(0.94);
  transition: transform var(--pc-prod-t1) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.wb-dropzone.is-dragover,
.stage-item.is-active .stage-mark,
.file-chip.is-enter,
  .file-chip.pc-chip-enter,
  .stage-item.is-active .stage-dot,
  .stage-item.is-done .stage-dot::after,
  .stage-item.is-entering,
  .task-panel.is-success-pulse,
  .export-card.is-success,
  .export-history-row.is-fade-in,
  .ed-review-item.is-flash,
  .review-row.is-flash,
  #globalToast.show,
  .toast.show,
  .pc-toast.show,
  .pc-shake,
  .pc-input.is-invalid,
  .skeleton,
  .ed-skeleton,
  #btnPlay.is-press,
  .ed-transport .btn.is-press {
    animation: none !important;
    transition: none !important;
  }

  .btn:active:not(:disabled),
  .btn-primary:active:not(:disabled),
  .btn-ghost:active:not(:disabled),
  #btnPlay.is-press,
  .ed-transport .btn.is-press {
    transform: none;
  }

  #globalToast.show,
  .toast.show,
  .pc-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}