/* ===== Screenshotsaver.online custom styles ===== */

html { scroll-behavior: smooth; }

/* Smooth theme transition */
body, header, aside, .card, .modal-panel {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Screenshot card hover lift */
.shot-card { transition: transform .15s ease, box-shadow .15s ease; }
.shot-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -8px rgba(0,0,0,.18); }

/* Card overlay actions appear on hover (always visible on touch) */
.shot-card .card-actions { opacity: 0; transition: opacity .15s ease; }
.shot-card:hover .card-actions, .shot-card:focus-within .card-actions { opacity: 1; }
@media (hover: none) { .shot-card .card-actions { opacity: 1; } }

/* Lightbox fade */
.fade-in { animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.scale-in { animation: scaleIn .18s ease; }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* Drag-over highlight */
.dropzone.drag-over {
  border-color: rgb(79 70 229) !important;
  background: rgba(79, 70, 229, .06);
}

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

/* Custom scrollbar (subtle) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* Checkerboard behind transparent images in lightbox */
.checkerboard {
  background-image:
    linear-gradient(45deg, rgba(128,128,128,.12) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(128,128,128,.12) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(128,128,128,.12) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(128,128,128,.12) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

/* Line clamp helper */
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }