/* ===== Smart PDF Suite — custom styles & animations ===== */

:root {
  --ring: #3478f6;
}

/* Smooth scrolling for quick-jump navigation */
html {
  scroll-behavior: smooth;
}

/* ---- Drop zone ---- */
.dropzone {
  transition: background-color .2s ease, border-color .2s ease, transform .1s ease;
}
.dropzone.dragover {
  background-color: #eef6ff;
  border-color: #3478f6;
  transform: scale(1.005);
}

/* ---- Page / thumbnail card ---- */
.page-card {
  transition: transform .15s ease, box-shadow .15s ease, outline-color .2s ease;
}
.page-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .25);
}
.page-card.selected {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* Highlight ring animation for quick-jump targets */
@keyframes jump-ring {
  0%   { box-shadow: 0 0 0 0 rgba(52, 120, 246, .65); }
  70%  { box-shadow: 0 0 0 14px rgba(52, 120, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 120, 246, 0); }
}
.jump-highlight {
  animation: jump-ring 1.1s ease-out 1;
}

/* Canvas placeholder shimmer while lazy-rendering */
.canvas-skeleton {
  background: linear-gradient(100deg, #e2e8f0 30%, #f1f5f9 50%, #e2e8f0 70%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---- Drag & drop reordering (mode 3) ---- */
.dragging {
  opacity: .4;
  transform: scale(.96);
}
.drag-ghost {
  outline: 2px dashed #3478f6;
  outline-offset: 2px;
}
/* Insert indicator line */
.add-slot {
  transition: background-color .15s ease, width .15s ease;
}
.add-slot.dragover {
  background-color: #3478f6 !important;
}

/* Instax card film look */
.instax {
  background: #fff;
  border-radius: 6px;
  padding: 8px 8px 0 8px;
  box-shadow: 0 2px 10px -4px rgba(15,23,42,.3);
}
.instax .film {
  background: #0f172a;
  border-radius: 3px;
  overflow: hidden;
}

/* Toast */
.toast {
  animation: toast-in .25s ease;
}
@keyframes toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Modal open state */
#download-modal.open #download-modal-card {
  transform: scale(1);
  opacity: 1;
}

/* Hide native scrollbar jumpiness in horizontal jump bar */
.no-scrollbar::-webkit-scrollbar { height: 6px; }
.no-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }