/* ── Global motion ── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  body, .sidebar, .card, .stat-card, .btn, .form-control, .form-select,
  .sidebar-link, .topbar, .score-preview, .question-block {
    transition-property: background, border-color, color, box-shadow, transform, opacity;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--ease-out);
  }
}

/* ── View transitions ── */
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes viewExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
@keyframes contentReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; max-height: 0; transform: translateY(-8px); }
  to   { opacity: 1; max-height: 2000px; transform: translateY(0); }
}
@keyframes pulseOnce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes scorePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); color: var(--accent-hover); }
  100% { transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes cubeSpin {
  from { transform: rotateX(-20deg) rotateY(0deg); }
  to   { transform: rotateX(-20deg) rotateY(360deg); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.view.active { animation: viewEnter 0.4s var(--ease-out) both; }
.view-exiting { animation: viewExit 0.25s var(--ease-in) both; pointer-events: none; }

.content-reveal { animation: contentReveal 0.45s var(--ease-out) both; }
.animate-fade-in { animation: fadeIn 0.4s var(--ease-out) both; }
.slide-down { animation: slideDown 0.4s var(--ease-out) both; overflow: hidden; }

.stagger-item {
  opacity: 0;
  animation: staggerIn 0.45s var(--ease-out) forwards;
}

.score-pop { animation: scorePop 0.45s var(--ease-out); }
.answer-pulse { animation: pulseOnce 0.35s var(--ease-out); }

.data-cube.sidebar {
  animation: cubeSpin 8s linear infinite;
}

/* ── Interactive feedback ── */
.btn:active:not(:disabled) { transform: scale(0.97); }
.sidebar-link:active { transform: scale(0.98); }

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 20px var(--accent-glow);
  transform: translateY(-1px);
}
.btn.loading { pointer-events: none; opacity: 0.8; }
.btn.loading .btn-label { opacity: 0; }
.btn .btn-spinner {
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
.btn.loading .btn-spinner { display: block; }

.stat-card {
  transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.card {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.card:hover { box-shadow: var(--shadow-sm); }

tr { transition: background 0.2s ease; }
tr.clickable:hover td { background: var(--accent-muted); }

.question-block {
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.question-block.answered { border-color: rgba(255, 94, 0, 0.25); }

.answer-btns button {
  transition: all 0.2s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.answer-btns button:active { transform: scale(0.95); }
.answer-btns button.selected-yes,
.answer-btns button.selected-no,
.answer-btns button.selected-na {
  transform: scale(1.02);
  box-shadow: var(--shadow-sm);
}

.score-preview {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.score-preview:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── Sidebar active indicator ── */
.sidebar-link {
  position: relative;
  overflow: hidden;
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  animation: fadeIn 0.3s ease;
}

/* ── Mobile overlay ── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}
.sidebar-backdrop.visible {
  display: block;
  opacity: 1;
}

@media (max-width: 768px) {
  .sidebar {
    transition: transform 0.35s var(--ease-out);
    box-shadow: var(--shadow-md);
  }
}

/* ── Loading skeleton ── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-input) 25%, var(--bg-card-hover) 50%, var(--bg-input) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
  height: 1rem;
}

/* ── Toast ── */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: 0.875rem;
  min-width: 260px;
  max-width: 380px;
  animation: toastIn 0.4s var(--ease-out) both;
}
.toast.toast-exit { animation: toastOut 0.3s var(--ease-in) both; }
.toast-success { border-left: 3px solid var(--success); }
.toast-error   { border-left: 3px solid var(--danger); }
.toast-info    { border-left: 3px solid var(--accent); }
.toast i { font-size: 1rem; flex-shrink: 0; }
.toast-success i { color: var(--success); }
.toast-error i   { color: var(--danger); }
.toast-info i    { color: var(--accent); }

/* ── Alert slide in ── */
.alert { animation: fadeIn 0.35s var(--ease-out); }

/* ── Theme transition ── */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease !important;
}

/* ── Topbar title fade ── */
.topbar-title { transition: opacity 0.25s ease; }
.topbar-title.updating { opacity: 0.4; }

/* ── Empty state bounce ── */
.empty-state-icon {
  animation: fadeIn 0.5s var(--ease-out) 0.1s both;
}
.empty-state-title { animation: fadeIn 0.5s var(--ease-out) 0.2s both; }
.empty-state-text  { animation: fadeIn 0.5s var(--ease-out) 0.3s both; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .data-cube.sidebar { animation: none; }
}