/* ============================================================================
   Lazy-media skeleton shimmer
   A placeholder that sits over a framed image/video while its bytes arrive, then
   fades out once the asset can paint. Paired with js/lazy-media.js, which injects
   the .media-shimmer node, drives loading via IntersectionObserver, and adds
   .is-media-loaded to the host on load / canplay.

   Reduced motion: the sweep animation is disabled (a flat tint remains), so the
   placeholder is still visible but never moves. Matches the site-wide motion policy.
   ========================================================================== */

/* Host: any framed media box gets relative positioning so the overlay can pin to
   it. position:relative on a normal-flow box doesn't shift its own layout. */
.is-shimmer-host { position: relative; }

.media-shimmer {
  position: absolute;
  inset: 0;
  z-index: 1;                /* above the media, below any frame chrome/borders */
  border-radius: inherit;
  pointer-events: none;
  background-color: var(--card, #f5f0e0);
  background-image: linear-gradient(
    100deg,
    transparent 20%,
    color-mix(in srgb, var(--strong-cream, #ebe6d6) 70%, transparent) 40%,
    color-mix(in srgb, var(--strong-cream, #ebe6d6) 70%, transparent) 60%,
    transparent 80%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: media-shimmer-sweep 1.4s ease-in-out infinite;
  transition: opacity .45s ease;
}

@keyframes media-shimmer-sweep {
  0%   { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

/* Faded out once the media can paint; removed from the DOM after the transition. */
.is-media-loaded .media-shimmer { opacity: 0; }

/* The framed image fades in as it loads, so it replaces the skeleton in place
   rather than snapping in. Gated on .is-shimmer-host (added by JS) so a no-JS
   page still shows images normally; .preview-static is excluded because the
   homepage manages its own touch-device fade. */
.is-shimmer-host > img:not(.preview-static) {
  opacity: 0;
  transition: opacity .45s ease;
}
.is-shimmer-host.is-media-loaded > img:not(.preview-static) {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .media-shimmer { animation: none; }
  .is-shimmer-host > img:not(.preview-static) { transition: none; }
}