/* Skeleton Loading Animation */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.skeleton {
  background: #f0f0f0;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.skeleton-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease-out;
}

.skeleton-logo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 2rem;
}

.skeleton-line {
  height: 12px;
  margin: 10px 0;
  border-radius: 4px;
}

.skeleton-line.short {
  width: 60%;
}

.skeleton-line.medium {
  width: 80%;
}

.skeleton-line.long {
  width: 100%;
}

/* Hide scrollbar during loading */
body.loading {
  overflow: hidden;
}

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

/* Prevent FOUC (Flash of Unstyled Content) */
body {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}