/* ═══════════════════════════════════════════
   Skeleton Loading Animations
   Used for Firebase data loading states
   ═══════════════════════════════════════════ */

/* Base shimmer animation */
@keyframes skeletonShimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

@keyframes skeletonPulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

/* Skeleton base class */
.skeleton {
  background: linear-gradient(
    90deg,
    #e8e8e8 25%,
    #f5f5f5 50%,
    #e8e8e8 75%
  );
  background-size: 800px 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
  border-radius: 6px;
}

/* ── Cab Card Skeleton ── */
.skeleton-cab-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.skeleton-cab-image {
  width: 100%;
  height: 220px;
  background: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 50%, #e8e8e8 75%);
  background-size: 800px 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

.skeleton-cab-body {
  padding: 20px;
}

.skeleton-cab-tag {
  width: 70px;
  height: 22px;
  margin-bottom: 12px;
  border-radius: 4px;
}

.skeleton-cab-title {
  width: 65%;
  height: 20px;
  margin-bottom: 18px;
  border-radius: 4px;
}

.skeleton-cab-feature {
  height: 14px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.skeleton-cab-feature:nth-child(1) { width: 45%; }
.skeleton-cab-feature:nth-child(2) { width: 35%; }
.skeleton-cab-feature:nth-child(3) { width: 60%; }
.skeleton-cab-feature:nth-child(4) { width: 55%; }

.skeleton-cab-btn {
  width: 100%;
  height: 42px;
  margin-top: 16px;
  border-radius: 6px;
}

/* ── Blog Card Skeleton ── */
.skeleton-blog-card {
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.skeleton-blog-image {
  width: 100%;
  height: 250px;
  background: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 50%, #e8e8e8 75%);
  background-size: 800px 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
  position: relative;
}

.skeleton-blog-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 55px;
  height: 65px;
  border-radius: 4px;
  background: rgba(200, 200, 200, 0.6);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-blog-body {
  padding: 20px;
  margin: -40px 20px 0 20px;
  background: #fff;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.skeleton-blog-title {
  width: 80%;
  height: 18px;
  margin-bottom: 14px;
  border-radius: 4px;
}

.skeleton-blog-line {
  height: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.skeleton-blog-line:nth-child(2) { width: 100%; }
.skeleton-blog-line:nth-child(3) { width: 90%; }
.skeleton-blog-line:nth-child(4) { width: 60%; }

/* ── Testimony Skeleton ── */
.skeleton-testimony-wrap {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 30px;
  text-align: center;
}

.skeleton-testimony-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}

.skeleton-star {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-testimony-text {
  height: 12px;
  margin: 0 auto 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-testimony-text:nth-child(2) { width: 90%; }
.skeleton-testimony-text:nth-child(3) { width: 80%; }
.skeleton-testimony-text:nth-child(4) { width: 50%; }

.skeleton-testimony-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.skeleton-avatar-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-avatar-name {
  width: 100px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* ── Staggered Animation Delays ── */
.skeleton-cab-card:nth-child(2) .skeleton,
.skeleton-cab-card:nth-child(2) .skeleton-cab-image,
.skeleton-blog-card:nth-child(2) .skeleton,
.skeleton-blog-card:nth-child(2) .skeleton-blog-image {
  animation-delay: 0.2s;
}

.skeleton-cab-card:nth-child(3) .skeleton,
.skeleton-cab-card:nth-child(3) .skeleton-cab-image,
.skeleton-blog-card:nth-child(3) .skeleton,
.skeleton-blog-card:nth-child(3) .skeleton-blog-image {
  animation-delay: 0.4s;
}

/* Fade out transition when content loads */
.skeleton-fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}