@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary: #e63946;
  --secondary: #f1faee;
  --accent: #a8dadc;
  --dark: #1d3557;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: #f8f9fa;
  color: #333;
  -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: var(--primary); 
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #c1121f; 
}

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
  background: rgba(29, 53, 87, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hover Zoom Animation */
.hover-zoom {
  transition: transform 0.4s ease;
}
.hover-zoom:hover {
  transform: scale(1.05);
}

/* Fade in animation */
.fade-in {
  animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Lightbox Styles */
#lightbox {
  transition: opacity 0.3s ease;
}
#lightbox.hidden {
  display: none !important;
  opacity: 0;
}
#lightbox:not(.hidden) {
  display: flex !important;
  opacity: 1;
}

/* Loading Skeleton */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}
@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}