/* ── Keyframes ──────────────────────────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(20px) scale(0.95); }
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.94) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes dropdown-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slide-in-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes slide-out-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes slide-out-right {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

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

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--accent-soft); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

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

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

/* ── Utility animation classes ──────────────────────────────────────────────── */
.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-pulse {
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-blink {
  animation: blink 1s step-start infinite;
}

/* ── Transition utilities ───────────────────────────────────────────────────── */
.transition-fast  { transition: all 150ms ease; }
.transition-base  { transition: all 200ms ease; }
.transition-slow  { transition: all 280ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.transition-theme { transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; }

/* ── Loading spinner ────────────────────────────────────────────────────────── */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

.spinner-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* ── Page loading overlay ───────────────────────────────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  background: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 250ms ease;
}
#page-loader.hidden {
  opacity: 0;
  pointer-events: none;
}