/* Base container marked by [data-skeleton] while loading */
.uskel {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

/* Active state */
.uskel.uskel--active {
  background: #e9e9e9;
}

/* Shimmer overlay */
.uskel.uskel--active::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  transform: translateX(-100%);
  animation: uskel-shimmer 1.2s infinite;
}

/* Child blocks inside skeletonized containers (cards, lines, thumbs) */
.uskel [data-skel-thumb],
.uskel [data-skel-line] {
  background: #e0e0e0;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.uskel [data-skel-thumb] { aspect-ratio: 16/9; margin-bottom: 10px; }
.uskel [data-skel-line]  { height: 12px; margin: 8px 0; }
.uskel [data-skel-line].w-60 { width: 60%; }
.uskel [data-skel-line].w-80 { width: 80%; }
.uskel [data-skel-line].w-100 { width: 100%; }

@keyframes uskel-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  .uskel.uskel--active::after { animation: none; }
}

/* Utility: avoid layout shift by reserving typical heights */
.uskel.uskel--reserve-hero { min-height: 420px; }
.uskel.uskel--reserve-card { min-height: 220px; }
.uskel.uskel--reserve-grid { min-height: 300px; }

/* When content is ready, we remove the active class; keep smooth fade */
.uskel:not(.uskel--active) {
  transition: background .25s ease, color .25s ease, opacity .25s ease;
}