Shimmer/skeleton

/* HTML:
<div class="skel-card" aria-label="Loading" aria-busy="true">
  <div class="skel skel--image"></div>
  <div class="skel skel--title"></div>
  <div class="skel skel--line"></div>
  <div class="skel skel--line-short"></div>
</div> */

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

.skel {
  border-radius: 0.375rem;
  background: oklch(0.22 0.02 260);
  background-image: linear-gradient(
    90deg,
    oklch(0.22 0.02 260) 0%,
    oklch(0.30 0.02 260) 40%,
    oklch(0.22 0.02 260) 80%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

/* Shape modifiers */
.skel--avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
}

.skel--title  { height: 1rem;    width: 60%; }
.skel--line   { height: 0.75rem; }
.skel--line-short { height: 0.75rem; width: 75%; }
.skel--image  { height: 9rem; border-radius: 0.5rem; }

/* Card container */
.skel-card {
  background: oklch(0.19 0.02 260);
  border-radius: 0.75rem;
  border: 1px solid oklch(0.28 0.02 260);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
    background-image: none;
  }
}

You are a senior frontend engineer building loading state UI.

Goal: A skeleton loading placeholder with an animated shimmer gradient that sweeps across placeholder shapes (avatar circle, title bar, text lines, image block). Pure CSS animation, no JavaScript.

Technical constraints:
- The shimmer is a linear-gradient on background-image with background-size: 200% 100%, animated via @keyframes from background-position: -200% center to 200% center.
- Use two oklch() values on the gradient stops — a base tone and a lighter highlight — both at low chroma to stay neutral.
- All shape variants are modifier classes on a shared .skel base — avatar uses border-radius: 50%, lines use fixed heights, image block uses a taller fixed height.
- The card container uses display: flex with flex-direction: column and gap to space skeleton rows.
- Add aria-busy="true" and aria-label="Loading" to the container for screen readers.
- Wrap the animation in @media (prefers-reduced-motion: reduce) and set animation: none with a static fallback color.

Framework variant (pick one):
A) Vanilla HTML + CSS — static markup matching the shape of the real content.
B) React component — accepts a shape prop ('card' | 'list-item' | 'profile') and renders the appropriate skeleton layout; removes itself when a loading prop becomes false.

Edge cases to handle:
- Multiple skeletons on the same page: animation should be synchronised (same duration/timing), not offset per element.
- When content loads: replace skeleton with real content without layout shift — skeleton dimensions must match real content dimensions.
- Dark and light themes: gradient stops should use CSS custom properties so they theme-switch cleanly.
- Reduced motion: skeleton becomes a static muted shape with no animation — still visually differentiates from real content.

Return HTML + CSS.