/* ============================================================
   components/skeleton.css — .dd-skeleton
   Rounded placeholder blocks with a soft coral→white shimmer.
   Static tint under reduced-motion.
   ============================================================ */

.dd-skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background-color: var(--coral-50);
  background-image: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, var(--coral-200) 70%, transparent) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: ddShimmer 1.4s var(--ease-soft) infinite;
}

.dd-skeleton--text   { height: 0.8em; margin-bottom: 0.6em; border-radius: var(--radius-pill); }
.dd-skeleton--title  { height: 1.5em; width: 60%; margin-bottom: var(--space-4); }
.dd-skeleton--line-2 { width: 85%; }
.dd-skeleton--line-3 { width: 70%; }
.dd-skeleton--circle { border-radius: var(--radius-pill); aspect-ratio: 1; }
.dd-skeleton--card   { height: 180px; border-radius: var(--radius-lg); }

@keyframes ddShimmer {
  from { background-position: 220% 0; }
  to   { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-skeleton {
    animation: none;
    background-image: none;
    background-color: var(--coral-50);
  }
}