/* ============================================================
   LENSBOOTH SKELETON LOADING SYSTEM
   Matches LensBooth design language:
     – BG: #F4F4F0  Text: #000  Accent: #F12850
     – Font: Satoshi   Radii: --radius-* tokens
   ============================================================ */

/* ── Shimmer keyframe ─────────────────────────────────────── */
@keyframes lb-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* ── Base shimmer mixin (applied to .sk-block children) ────── */
.sk-block {
  display: block;
  border-radius: var(--radius-md, 8px);
  background: rgba(0, 0, 0, 0.07);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.00)   0%,
    rgba(0, 0, 0, 0.06)  35%,
    rgba(255,255,255,0.55) 50%,
    rgba(0, 0, 0, 0.06)  65%,
    rgba(0, 0, 0, 0.00)  100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: lb-shimmer 1.6s ease-in-out infinite;
  /* Prevent click / selection on skeletons */
  pointer-events: none;
  user-select: none;
}

/* ── Variant helpers ──────────────────────────────────────── */

/* Short text line */
.sk-text {
  height: 14px;
  border-radius: var(--radius-full, 9999px);
}

/* Large number / heading */
.sk-text-lg {
  height: 20px;
  border-radius: var(--radius-full, 9999px);
}

/* Circle (avatar, icon) */
.sk-circle {
  border-radius: 50%;
  flex-shrink: 0;
}

/* Pill / badge shape */
.sk-badge {
  border-radius: var(--radius-full, 9999px);
  height: 22px;
}

/* Button bar */
.sk-button {
  border-radius: var(--radius-lg, 10px);
  height: 38px;
}

/* Image / card area */
.sk-img {
  border-radius: var(--radius-xl, 16px);
}


/* ============================================================
   STAT PILLS  (homepage .stat-pill-value)
   ============================================================ */

/* While loading, the stat value el gets class .sk-stat-loading */
.sk-stat-loading {
  display: inline-block;
  width: 80px;
  height: 44px;     /* matches font-size: 46px / line-height:1 */
  border-radius: var(--radius-md, 8px);
  background: rgba(0, 0, 0, 0.07);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.00)   0%,
    rgba(0, 0, 0, 0.06)  35%,
    rgba(255,255,255,0.55) 50%,
    rgba(0, 0, 0, 0.06)  65%,
    rgba(0, 0, 0, 0.00)  100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: lb-shimmer 1.6s ease-in-out infinite;
  vertical-align: middle;
  pointer-events: none;
}

/* Matching label skeleton */
.sk-stat-label {
  width: 100px;
  height: 11px;
  margin: 4px auto 0;
  border-radius: var(--radius-full, 9999px);
  background: rgba(0, 0, 0, 0.07);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.00)   0%,
    rgba(0, 0, 0, 0.06)  35%,
    rgba(255,255,255,0.55) 50%,
    rgba(0, 0, 0, 0.06)  65%,
    rgba(0, 0, 0, 0.00)  100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: lb-shimmer 1.6s ease-in-out infinite;
  pointer-events: none;
}

@media (max-width: 767px) {
  .sk-stat-loading {
    width: 60px;
    height: 32px; /* matches mobile font-size: 28px */
  }
  .sk-stat-label {
    width: 72px;
  }
}


/* ============================================================
   ADMIN STAT CARDS  (.stat-value)
   ============================================================ */
.sk-admin-stat {
  display: inline-block;
  width: 64px;
  height: 36px;
  border-radius: var(--radius-md, 8px);
  background: rgba(0, 0, 0, 0.07);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.00)   0%,
    rgba(0, 0, 0, 0.06)  35%,
    rgba(255,255,255,0.55) 50%,
    rgba(0, 0, 0, 0.06)  65%,
    rgba(0, 0, 0, 0.00)  100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: lb-shimmer 1.6s ease-in-out infinite;
  vertical-align: middle;
  pointer-events: none;
}


/* ============================================================
   COMMUNITY SHOWCASE  (#community-showcase-slot)
   ============================================================ */

/* Username card loading state */
.cs-username-card.sk-loading .cs-username-display {
  /* Hide text content */
  color: transparent;
  position: relative;
}
.cs-username-card.sk-loading .cs-username-display::after {
  content: '';
  position: absolute;
  inset: 0;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 120px;
  height: 14px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(0, 0, 0, 0.10);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.00)   0%,
    rgba(0, 0, 0, 0.08)  35%,
    rgba(255,255,255,0.5) 50%,
    rgba(0, 0, 0, 0.08)  65%,
    rgba(0, 0, 0, 0.00)  100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: lb-shimmer 1.6s ease-in-out infinite;
}

/* Loading badge in username card area */
.sk-community-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(0, 0, 0, 0.07);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.00)   0%,
    rgba(0, 0, 0, 0.06)  35%,
    rgba(255,255,255,0.55) 50%,
    rgba(0, 0, 0, 0.06)  65%,
    rgba(0, 0, 0, 0.00)  100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: lb-shimmer 1.6s ease-in-out infinite;
  pointer-events: none;
  width: 80px;
  font-size: 0; /* hide any text */
}


/* ============================================================
   COMMUNITY STRIP IMAGE  (cs-strip-img)
   Fade-in on load; no flash on src swap
   ============================================================ */
.cs-strip-img {
  transition: opacity 0.35s ease;
}
.cs-strip-img.sk-img-loading {
  opacity: 0;
}


/* ============================================================
   MARQUEE POLAROID IMAGES
   Skeleton behind each lazy-loaded polaroid
   ============================================================ */
.mq-polaroid {
  position: relative;
}
.mq-polaroid::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.07);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.00)   0%,
    rgba(0, 0, 0, 0.06)  35%,
    rgba(255,255,255,0.55) 50%,
    rgba(0, 0, 0, 0.06)  65%,
    rgba(0, 0, 0, 0.00)  100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: lb-shimmer 1.6s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
.mq-polaroid img {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.mq-polaroid img.sk-img-loaded {
  opacity: 1;
}
/* Once image is loaded, hide the shimmer pseudo-element */
.mq-polaroid.sk-loaded::before {
  display: none;
}


/* ============================================================
   ADMIN DASHBOARD  - Skeleton Submission Card
   Mirrors real .submission-card layout exactly
   ============================================================ */
.sk-submission-card {
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* Photo strip preview area - 220px tall, same as .card-preview */
.sk-submission-card .sk-card-preview {
  height: 220px;
  background: rgba(0, 0, 0, 0.05);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.00)   0%,
    rgba(0, 0, 0, 0.06)  35%,
    rgba(255,255,255,0.55) 50%,
    rgba(0, 0, 0, 0.06)  65%,
    rgba(0, 0, 0, 0.00)  100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: lb-shimmer 1.6s ease-in-out infinite;
}

/* Card body */
.sk-submission-card .sk-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sk-submission-card .sk-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Name bar - 55% width */
.sk-submission-card .sk-name {
  height: 16px;
  width: 55%;
  border-radius: var(--radius-full, 9999px);
  background: rgba(0, 0, 0, 0.09);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.00)   0%,
    rgba(0, 0, 0, 0.06)  35%,
    rgba(255,255,255,0.55) 50%,
    rgba(0, 0, 0, 0.06)  65%,
    rgba(0, 0, 0, 0.00)  100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: lb-shimmer 1.6s ease-in-out infinite;
}

/* Date bar - 30% width */
.sk-submission-card .sk-date {
  height: 11px;
  width: 30%;
  border-radius: var(--radius-full, 9999px);
  background: rgba(0, 0, 0, 0.06);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.00)   0%,
    rgba(0, 0, 0, 0.05)  35%,
    rgba(255,255,255,0.55) 50%,
    rgba(0, 0, 0, 0.05)  65%,
    rgba(0, 0, 0, 0.00)  100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: lb-shimmer 1.6s ease-in-out infinite;
}

/* Status badge placeholder */
.sk-submission-card .sk-status-badge {
  height: 22px;
  width: 120px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(0, 0, 0, 0.07);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.00)   0%,
    rgba(0, 0, 0, 0.06)  35%,
    rgba(255,255,255,0.55) 50%,
    rgba(0, 0, 0, 0.06)  65%,
    rgba(0, 0, 0, 0.00)  100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: lb-shimmer 1.6s ease-in-out infinite;
}

/* Action buttons row - mirrors .card-actions */
.sk-submission-card .sk-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 20px 18px;
}

.sk-submission-card .sk-btn {
  height: 38px;
  border-radius: var(--radius-lg, 10px);
  background: rgba(0, 0, 0, 0.06);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.00)   0%,
    rgba(0, 0, 0, 0.05)  35%,
    rgba(255,255,255,0.55) 50%,
    rgba(0, 0, 0, 0.05)  65%,
    rgba(0, 0, 0, 0.00)  100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: lb-shimmer 1.6s ease-in-out infinite;
}

/* Stagger animation delays per card */
.sk-submission-card:nth-child(2) .sk-card-preview,
.sk-submission-card:nth-child(2) .sk-name,
.sk-submission-card:nth-child(2) .sk-date,
.sk-submission-card:nth-child(2) .sk-status-badge,
.sk-submission-card:nth-child(2) .sk-btn { animation-delay: 0.1s; }

.sk-submission-card:nth-child(3) .sk-card-preview,
.sk-submission-card:nth-child(3) .sk-name,
.sk-submission-card:nth-child(3) .sk-date,
.sk-submission-card:nth-child(3) .sk-status-badge,
.sk-submission-card:nth-child(3) .sk-btn { animation-delay: 0.2s; }

.sk-submission-card:nth-child(4) .sk-card-preview,
.sk-submission-card:nth-child(4) .sk-name,
.sk-submission-card:nth-child(4) .sk-date,
.sk-submission-card:nth-child(4) .sk-status-badge,
.sk-submission-card:nth-child(4) .sk-btn { animation-delay: 0.05s; }

.sk-submission-card:nth-child(5) .sk-card-preview,
.sk-submission-card:nth-child(5) .sk-name,
.sk-submission-card:nth-child(5) .sk-date,
.sk-submission-card:nth-child(5) .sk-status-badge,
.sk-submission-card:nth-child(5) .sk-btn { animation-delay: 0.15s; }

.sk-submission-card:nth-child(6) .sk-card-preview,
.sk-submission-card:nth-child(6) .sk-name,
.sk-submission-card:nth-child(6) .sk-date,
.sk-submission-card:nth-child(6) .sk-status-badge,
.sk-submission-card:nth-child(6) .sk-btn { animation-delay: 0.25s; }


/* ============================================================
   ADMIN REAL CARD  - .card-preview shimmer background
   Shows while the lazy img loads (img starts at opacity:0 and
   transitions to 1 on load, revealing the content beneath)
   ============================================================ */
.card-preview {
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.00)   0%,
    rgba(0, 0, 0, 0.05)  35%,
    rgba(255,255,255,0.55) 50%,
    rgba(0, 0, 0, 0.05)  65%,
    rgba(0, 0, 0, 0.00)  100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: lb-shimmer 1.6s ease-in-out infinite;
}
/* Stop shimmer once image is visible */
.card-preview:has(img[style*="opacity:1"]),
.card-preview:has(img[style*="opacity: 1"]),
.card-preview:has(img.sk-img-loaded),
.card-preview:has(.card-preview-placeholder) {
  animation: none;
  background-image: none;
  background: #f0ede8;
}
/* Fallback for browsers without :has */
.card-preview--loaded {
  animation: none !important;
  background-image: none !important;
  background: #f0ede8 !important;
}

@media (prefers-reduced-motion: reduce) {
  .card-preview {
    animation: none !important;
    background-image: none !important;
  }
}



@media (prefers-reduced-motion: reduce) {
  .sk-block,
  .sk-stat-loading,
  .sk-stat-label,
  .sk-admin-stat,
  .sk-community-badge,
  .mq-polaroid::before,
  .sk-submission-card .sk-card-preview,
  .sk-submission-card .sk-name,
  .sk-submission-card .sk-date,
  .sk-submission-card .sk-status-badge,
  .sk-submission-card .sk-btn,
  .cs-strip-img,
  .mq-polaroid img {
    animation: none !important;
    transition: none !important;
    background-image: none !important;
  }

  .cs-username-card.sk-loading .cs-username-display::after {
    animation: none !important;
    background-image: none !important;
  }

  /* Make polaroid images immediately visible under reduced-motion */
  .mq-polaroid img {
    opacity: 1 !important;
  }
  .cs-strip-img.sk-img-loading {
    opacity: 1 !important;
  }
}