/* Native skeletons for genuinely asynchronous media. */
:root {
  --skeleton-surface: rgba(255, 255, 255, 0.055);
  --skeleton-highlight: rgba(255, 255, 255, 0.12);
  --skeleton-speed: 1.8s;
}

img.native-skeleton-media {
  background-color: var(--skeleton-surface);
  background-image: linear-gradient(
    110deg,
    transparent 24%,
    var(--skeleton-highlight) 42%,
    transparent 60%
  );
  background-position: 160% 0;
  background-size: 260% 100%;
  animation: native-skeleton-shimmer var(--skeleton-speed) linear infinite;
}

.lvp-poster.native-skeleton-media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  content: '';
  background:
    linear-gradient(110deg, transparent 24%, var(--skeleton-highlight) 42%, transparent 60%) 160%
      0 / 260% 100%,
    var(--skeleton-surface);
  animation: native-skeleton-shimmer var(--skeleton-speed) linear infinite;
  pointer-events: none;
}

@keyframes native-skeleton-shimmer {
  to {
    background-position: -160% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  img.native-skeleton-media,
  .lvp-poster.native-skeleton-media::after {
    animation: none;
    background-image: none;
  }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  img.native-skeleton-media {
    background-color: transparent;
    background-image: none;
    animation: none;
  }

  .lvp-poster.native-skeleton-media::after {
    display: none;
  }
}