/* SIMPLE LOADING STATE STYLES */
/* Only show loading overlays when elements are genuinely empty */

/* Base */
[data-ld] { position: relative; }
[data-ld][data-ld-loaded="1"] { --ld-visible: 0; }
[data-ld]:not([data-ld-loaded="1"]) { --ld-visible: 1; }

/* Only hide when explicitly marked as loaded */
[data-ld][data-ld-loaded="1"]::after {
  display: none !important;
}

@keyframes ld-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Image/thumbnail overlay */
[data-ld="img"]:not([data-ld-loaded="1"])::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gray-100, #f1f5f9) 100%, transparent) 25%,
                                      color-mix(in srgb, var(--gray-200, #e5e7eb) 100%, transparent) 50%,
                                      color-mix(in srgb, var(--gray-100, #f1f5f9) 100%, transparent) 75%);
  background-size: 200% 100%;
  animation: ld-shimmer 2s ease-in-out infinite;
  z-index: 1;
}

/* Ensure inner img paints above background but under overlay until loaded */
[data-ld="img"] img { position: relative; z-index: 0; }
[data-ld="img"][data-ld-loaded="1"]::after { display: none; }

/* Card overlay (full container) */
[data-ld="card"]:not([data-ld-loaded="1"])::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gray-50, #f8fafc) 100%, transparent) 25%,
                                      color-mix(in srgb, var(--gray-200, #e5e7eb) 100%, transparent) 50%,
                                      color-mix(in srgb, var(--gray-50, #f8fafc) 100%, transparent) 75%);
  background-size: 200% 100%; animation: ld-shimmer 2s ease-in-out infinite; z-index: 1;
}
[data-ld="card"][data-ld-loaded="1"]::after { display: none; }

/* Text blocks – estimated lines */
[data-ld="text"] {
  --ld-lines: 3;              /* default lines */
  --ld-line-h: 1.2rem;        /* line height */
  --ld-gap: .45rem;           /* gap between lines */
}
[data-ld="text"][data-lines] { --ld-lines: attr(data-lines number, 3); }

[data-ld="text"]:not([data-ld-loaded="1"]) {
  color: transparent;
  min-height: calc(var(--ld-lines) * var(--ld-line-h) + (var(--ld-lines) - 1) * var(--ld-gap));
}

[data-ld="text"]:not([data-ld-loaded="1"])::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gray-100, #f1f5f9) 100%, transparent) 25%,
                                      color-mix(in srgb, var(--gray-300, #d1d5db) 100%, transparent) 50%,
                                      color-mix(in srgb, var(--gray-100, #f1f5f9) 100%, transparent) 75%);
  background-size: 200% 100%; animation: ld-shimmer 2s ease-in-out infinite; z-index: 1;
}
[data-ld="text"][data-ld-loaded="1"]::after { display: none; }
[data-ld="text"][data-ld-loaded="1"] { color: inherit; }
[data-ld="text"][data-ld-loaded="1"]::after { display: none; }

/* Buttons */
[data-ld="btn"] { --ld-btn-h: 44px; }
[data-ld="btn"]:not([data-ld-loaded="1"]) {
  position: relative; min-height: var(--ld-btn-h); color: transparent; pointer-events: none;
}
[data-ld="btn"]:not([data-ld-loaded="1"])::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gray-200, #e5e7eb) 100%, transparent) 25%,
                                      color-mix(in srgb, var(--gray-300, #d1d5db) 100%, transparent) 50%,
                                      color-mix(in srgb, var(--gray-200, #e5e7eb) 100%, transparent) 75%);
  background-size: 200% 100%; animation: ld-shimmer 2s ease-in-out infinite; z-index: 1;
}
[data-ld="btn"][data-ld-loaded="1"] { color: inherit; }
[data-ld="btn"][data-ld-loaded="1"]::after { display: none; }