.truncate-2 { 
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; 
  overflow: hidden; 
}

.backdrop { 
  background: rgba(0,0,0,0.6); 
}

.skeleton { 
  background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 37%, #f4f4f5 63%); 
  background-size: 400% 100%; 
  animation: shimmer 1.4s ease infinite; 
}

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

/* Download button styles */
.download-btn {
  transition: all 0.2s ease;
}

.download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Modal download button overlay */
.relative .download-btn {
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2);
}

/* Navigation arrows */
.nav-btn {
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.2s ease;
}

.nav-btn:hover:not(:disabled) {
  transform: scale(1.1);
  background-color: rgba(0,0,0,0.7);
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.nav-btn svg {
  transition: transform 0.2s ease;
}

.nav-btn:hover:not(:disabled) svg {
  transform: scale(1.1);
}

/* Swipe indicators for mobile */
.swipe-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.swipe-hint.show {
  opacity: 1;
}

/* Touch feedback for swipe gestures */
.modal-touch-active {
  transition: transform 0.1s ease;
}

.modal-touch-active.swipe-left {
  transform: translateX(-10px);
}

.modal-touch-active.swipe-right {
  transform: translateX(10px);
}

/* Scroll to top button */
#scrollToTopBtn {
  transition: all 0.3s ease;
  transform: translateY(0);
}

#scrollToTopBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

#scrollToTopBtn:active {
  transform: translateY(0);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}