/**
 * Custom styling for the optimized knowledge blog
 */

/* Smooth transitions for hover effects */
a, .btn, .card {
  transition: all 0.2s ease-in-out;
}

/* Card hover effects — subtle and refined */
.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.06);
}

/* Fix for sticky elements on mobile */
@media (max-width: 1024px) {
  .sticky-sidebar {
    position: relative !important;
    top: 0 !important;
  }
}

/* Lazy loading animations */
.lazy-load-container {
  min-height: 100px;
}

.loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: hsla(var(--b2) / 0.5);
  border: 1px solid hsla(var(--bc) / 0.08);
  transition: all 0.3s ease;
}

/* Fade in animation for newly loaded content */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out;
}

/* Badge styling */
.badge {
  text-transform: none;
  font-weight: normal;
}

/* Subtle border for cards and separators */
.subtle-border {
  border: 1px solid hsla(var(--bc) / 0.08);
}

/* Lazy loading styles */
.lazy-load-trigger {
  margin: 2rem 0;
  transition: all 0.3s ease;
}

/* Staggered fade-in for lazy-loaded items */
.posts-container > article:nth-child(n+7),
.notes-container > div:nth-child(n+11) {
  animation: fadeIn 0.4s ease forwards;
}

/* Authentication related styles */
.input-disabled {
  cursor: not-allowed !important;
  opacity: 0.7;
}

/* Notification styles */
.alert.fixed {
  z-index: 9999;
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}