:root{
  /* Тон скелетона — не сам --color-surface-alt (на нём его не видно,
     карточки/плашки уже залиты этим цветом), а чуть светлее/темнее его
     же, через color-mix — единый источник цвета с остальным сайтом
     (см. --color-* в theme.css), а не свой параллельный хардкод. */
  --skeleton-base: color-mix(in srgb, var(--color-surface-alt) 85%, white 15%);
  --skeleton-shine: color-mix(in srgb, var(--color-surface-alt) 65%, white 35%);
}
[data-theme="light"]{
  --skeleton-base: color-mix(in srgb, var(--color-surface-alt) 90%, black 10%);
  --skeleton-shine: var(--color-surface-alt);
}
@keyframes skeleton-shimmer{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}
.skeleton-surface,
.works-grid__item:not(.is-media-loaded)::after{
  background-color:var(--skeleton-base);
  background-image:linear-gradient(100deg,transparent 30%,var(--skeleton-shine) 50%,transparent 70%);
  background-size:220% 100%;
  animation:skeleton-shimmer 1.45s linear infinite;
}

/* Каждый слот загружается независимо: медленный iframe продолжает
   показывать скелетон, даже когда остальная страница уже готова. */
.works-grid__item::after{
  content:"";
  position:absolute;
  z-index:10;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
}
.works-grid__item:not(.is-media-loaded)::after{opacity:1}
.works-grid__item>img,
.works-grid__item>.works-grid__embed{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease;
}
.works-grid__item.is-media-loaded>img,
.works-grid__item.is-media-loaded>.works-grid__embed{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .works-grid__item>img,
  .works-grid__item>.works-grid__embed{transform:none;transition:opacity .32s ease}
}

/* Скелетоны оболочки видны только на начальной загрузке страницы. */
.is-page-loading .site-header__avatar img,
.is-page-loading .site-header__logo-mark,
.is-page-loading .site-header__cta>* ,
.is-page-loading .theme-toggle>* ,
.is-page-loading .site-footer__link>*{opacity:0!important}
.is-page-loading .site-header__avatar,
.is-page-loading .site-header__logo,
.is-page-loading .site-header__cta,
.is-page-loading .theme-toggle,
.is-page-loading .site-footer__link{
  color:transparent!important;
  border-color:transparent!important;
  background-color:var(--skeleton-base)!important;
  background-image:linear-gradient(100deg,transparent 30%,var(--skeleton-shine) 50%,transparent 70%)!important;
  background-size:220% 100%!important;
  animation:skeleton-shimmer 1.45s linear infinite!important;
}
.site-header__avatar,
.site-header__logo,
.site-header__cta,
.theme-toggle,
.site-footer__link{transition:background-color .25s ease,color .25s ease,opacity .25s ease}

@media (prefers-reduced-motion:reduce){
  .skeleton-surface,
  .works-grid__item:not(.is-media-loaded)::after,
  .is-page-loading .site-header__avatar,
  .is-page-loading .site-header__logo,
  .is-page-loading .site-header__cta,
  .is-page-loading .theme-toggle,
  .is-page-loading .site-footer__link{animation:none!important}
}