:root{
  --sk-bg: rgba(0,0,0,.08) !important;
  --sk-hi: rgba(221, 221, 221, 0.673) !important;
  --sk-radius: 12px;
  --sk-speed: 1.15s;
}
@media (prefers-color-scheme: dark){
  :root{
    --sk-bg: rgba(255,255,255,.10);
    --sk-hi: rgba(255,255,255,.18);
  }
}
@media (prefers-reduced-motion: reduce){
  :root{ --sk-speed: 0s; }
}

/* включено только пока html.is-loading */
html.is-loading body{
  /* не даём кликать по “пустоте” */
  pointer-events: none;
}

/* shimmer-слой (общий миксин через background-image) */
html.is-loading :where(
  h1,h2,h3,h4,h5,h6,
  p,li,dt,dd,
  a,span,em,strong,small,code,
  button,.button,
  input,textarea,select,
  blockquote,
  .wp-block,
  .entry-content > *,
  article,section,aside,header,footer,nav,
  figure,figcaption
){
  /* сохраняем размеры/поток, просто прячем “чернила” */
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  

  /* не ломаем фоны там, где они уже есть: накладываем “скелетон” поверх */
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--sk-hi) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(0deg, var(--sk-bg), var(--sk-bg));
  background-size: 220% 100%, 100% 100%;
  background-position: -120% 0, 0 0;
  background-repeat: no-repeat;
  border-radius: var(--sk-radius);

  /* важное: чтобы элементы не схлопывались до 0 высоты */
  min-height: 0.75em;
  animation: sk-move var(--sk-speed) infinite linear;
}

/* строки текста выглядят лучше, если сделать “пилюли” */
html.is-loading :where(p,li,dt,dd,span,a,small,em,strong){
  border-radius: 999px;
}

/* Заголовки чуть повыше */
html.is-loading :where(h1){ min-height: 1.15em; }
html.is-loading :where(h2){ min-height: 1.05em; }
html.is-loading :where(h3,h4,h5,h6){ min-height: 0.95em; }

/* Картинки/видео/iframe — прячем содержимое, оставляем блок с shimmer */
html.is-loading :where(img,svg,video,iframe){
  opacity: 0 !important;
}

/* Но их контейнеры делаем “скелетоном” (часто это figure/a/div вокруг) */
html.is-loading :where(figure, .wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-gallery, .gallery, .wp-post-image){
  position: relative;
  overflow: hidden;
  border-radius: var(--sk-radius);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--sk-hi) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(0deg, var(--sk-bg), var(--sk-bg));
  background-size: 220% 100%, 100% 100%;
  background-position: -120% 0, 0 0;
  background-repeat: no-repeat;
  animation: sk-move var(--sk-speed) infinite linear;
}

/* Формы: прячем плейсхолдеры/текст */
html.is-loading :where(input,textarea,select){
  caret-color: transparent !important;
}

/* Не ломаем меню/иконки полностью — уберём shimmer с очень маленьких элементов */
html.is-loading :where(i, .icon, .dashicons, .menu-toggle svg){
  background-image: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* исключения: технические штуки */
html.is-loading :where(script,style,meta,link){ animation: none !important; background: none !important; }

@keyframes sk-move{
  100%{ background-position: 120% 0, 0 0; }
}