:root {
  --media-skeleton-base: rgba(139, 139, 133, 0.16);
  --media-skeleton-glint: rgba(255, 255, 255, 0.5);
}

.dom-skeleton-layer {
  position: fixed;
  inset: 0;
  z-index: 18;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  contain: layout paint style;
  visibility: hidden;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.skeleton-dom-active .dom-skeleton-layer {
  opacity: 1;
  visibility: visible;
}

html.skeleton-dom-active.skeleton-leaving .dom-skeleton-layer {
  opacity: 0;
}

.dom-skeleton-block {
  --dom-skeleton-base: rgba(30, 30, 28, 0.105);
  --dom-skeleton-glint: rgba(255, 255, 255, 0.62);
  position: absolute;
  left: var(--dom-skeleton-left);
  top: var(--dom-skeleton-top);
  z-index: 1;
  width: var(--dom-skeleton-width);
  height: var(--dom-skeleton-height);
  border-radius: var(--dom-skeleton-radius, 4px);
  background-color: var(--dom-skeleton-base);
  background-image:
    linear-gradient(
      105deg,
      transparent 26%,
      var(--dom-skeleton-glint) 44%,
      transparent 62%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
  background-position: 100% 0;
  background-size: 240% 100%;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: dom-skeleton-shimmer 1.55s ease-in-out infinite;
  will-change: background-position;
}

.dom-skeleton-block--text,
.dom-skeleton-block--control {
  z-index: 2;
}

html.skeleton-dom-active:not(.skeleton-leaving)
  [data-dom-skeleton-text] {
  color: transparent !important;
  text-decoration-color: transparent !important;
  text-shadow: none !important;
}

html.skeleton-dom-active:not(.skeleton-leaving)
  [data-dom-skeleton-text]::before,
html.skeleton-dom-active:not(.skeleton-leaving)
  [data-dom-skeleton-text]::after {
  color: transparent !important;
}

html.skeleton-dom-active:not(.skeleton-leaving)
  [data-dom-skeleton-media],
html.skeleton-dom-active:not(.skeleton-leaving)
  [data-dom-skeleton-control] {
  opacity: 0 !important;
}

main img[data-skeleton-state="loading"][data-skeleton-visible],
main video[data-skeleton-state="loading"][data-skeleton-visible] {
  background-color: var(--media-skeleton-base);
  background-image:
    linear-gradient(
      105deg,
      transparent 26%,
      var(--media-skeleton-glint) 44%,
      transparent 62%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
  background-position: 100% 0;
  background-size: 240% 100%;
  background-repeat: no-repeat;
  animation: media-skeleton-shimmer 1.55s ease-in-out infinite;
}

main img[data-media-reveal],
main video[data-media-reveal] {
  transform: translate3d(0, 0, 0);
  transition:
    opacity 460ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 620ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

main img[data-media-reveal="loading"],
main video[data-media-reveal="loading"] {
  opacity: 0.001;
  filter: blur(8px) saturate(0.92);
  transform: scale(1.012);
}

main img[data-media-reveal="ready"],
main video[data-media-reveal="ready"],
main img[data-media-reveal="error"],
main video[data-media-reveal="error"] {
  opacity: 1;
  filter: blur(0) saturate(1);
  transform: scale(1);
}

main img[data-skeleton-state="error"],
main video[data-skeleton-state="error"] {
  background: var(--media-skeleton-base);
}

@keyframes dom-skeleton-shimmer {
  to {
    background-position: -140% 0;
  }
}

@keyframes media-skeleton-shimmer {
  to {
    background-position: -140% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dom-skeleton-block,
  main img[data-skeleton-state="loading"][data-skeleton-visible],
  main video[data-skeleton-state="loading"][data-skeleton-visible] {
    animation: none;
  }

  .dom-skeleton-layer {
    transition-duration: 1ms;
  }

  main img[data-media-reveal],
  main video[data-media-reveal] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 767px) {
  .dom-skeleton-block,
  main img[data-skeleton-state="loading"][data-skeleton-visible],
  main video[data-skeleton-state="loading"][data-skeleton-visible] {
    animation: none;
    will-change: auto;
  }

  main img[data-media-reveal],
  main video[data-media-reveal] {
    filter: none;
    transform: none;
    transition: opacity 220ms ease;
  }
}