/* ==========================================
   SHIMMER SKELETON ANIMATIONS & UTILITIES
   ========================================== */

/* The base skeleton shimmer effect */
.skeleton {
  background: linear-gradient(
    90deg,
    #E2E8F0 25%,
    #F1F5F9 37%,
    #E2E8F0 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 8px;
  display: block;
}

/* Continuous sliding shimmer animation */
@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ==========================================
   COMPONENT-SPECIFIC SKELETON SIZES
   ========================================== */

/* Top Navigation Bar Placeholder */
.skeleton-nav {
  height: 70px;
  width: 100%;
  border-radius: 0 0 16px 16px;
}

/* Bottom Footer Placeholder */
.skeleton-footer {
  height: 320px;
  width: 100%;
  border-radius: 20px 20px 0 0;
}

/* Generic Content Cards Placeholder */
.skeleton-card {
  height: 260px;
  width: 100%;
  border-radius: 16px;
}

/* Heading / Title Line Placeholder */
.skeleton-title {
  height: 32px;
  width: 60%;
  margin-bottom: 16px;
}

/* Paragraph Text Line Placeholder */
.skeleton-text {
  height: 16px;
  width: 100%;
  margin-bottom: 10px;
}

/* Circular Avatar / Icon Placeholder */
.skeleton-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}