/* Появление текста при скролле и скелетоны.
   <h2 data-k-split="lines">…</h2>  <p data-k-split="words">…</p>   (JS: components/reveal.js)
   <div class="k-skeleton k-skeleton--text"></div>  --title  --circle  --card  --on-red */

[data-k-split] .k-w, [data-k-split] .k-l { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-k-split] .k-l { display: block; }
[data-k-split] .k-in { display: inline-block; transform: translateY(105%); opacity: 0;
  transition: transform .9s var(--k-ease-spring), opacity .4s ease; transition-delay: calc(var(--i, 0) * 45ms); }
[data-k-split="lines"] .k-in { transition-delay: calc(var(--i, 0) * 110ms); }
[data-k-split].is-in .k-in { transform: none; opacity: 1; }

/* Скелетоны: сливочные плашки с медленным сатиновым переливом */
.k-skeleton { --sk: rgb(243 221 188 / .7); --sheen: rgb(255 255 255 / .75); position: relative; overflow: hidden; border-radius: var(--k-r-sm);
  background: var(--sk); isolation: isolate; }
.k-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, var(--sheen) 50%, transparent 80%); animation: k-sheen 1.8s cubic-bezier(.45, .05, .4, 1) infinite; }
.k-skeleton--text { height: 14px; border-radius: 7px; margin: 10px 0; }
.k-skeleton--text:nth-of-type(3n) { width: 72%; }
.k-skeleton--title { height: 34px; width: 64%; border-radius: 10px; }
.k-skeleton--circle { width: 56px; height: 56px; border-radius: 50%; }
.k-skeleton--card { height: 180px; border-radius: var(--k-r-card); }
.k-skeleton--on-red { --sk: rgb(255 246 233 / .16); --sheen: rgb(255 246 233 / .22); }
@keyframes k-sheen { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  [data-k-split] .k-in { transform: none; opacity: 1; transition: none; }
  .k-skeleton::after { animation: none; display: none; }
}