/*
 * design-system/components/skeleton.css
 * Editorial Calm — Skeleton. ТЗ раздел 4.7.
 *
 * Skeleton РЕЗЕРВИРУЕТ место для финального компонента → нулевой CLS.
 * При prefers-reduced-motion — без shimmer-анимации, статичная плашка.
 *
 * Использование:
 *   <div class="ed-skel ed-skel--text" style="width: 70%"></div>
 *   <div class="ed-skel ed-skel--text" style="width: 90%"></div>
 *   <div class="ed-skel ed-skel--block" style="height: 200px"></div>
 *   <div class="ed-skel ed-skel--circle" style="width:40px;height:40px"></div>
 *
 * ВАЖНО (ТЗ 4.2 + 6.1): не используем "—" как индикатор "грузится".
 * "—" — это empty-state. Loading — это skeleton.
 */

[data-theme="editorial"] .ed-skel {
  display: block;
  background: var(--paper-3);
  border-radius: var(--r-2);
  background-image: linear-gradient(
    90deg,
    var(--paper-3) 0%,
    var(--paper-2) 50%,
    var(--paper-3) 100%
  );
  background-size: 200% 100%;
  animation: ed-skel-shimmer 1500ms ease-in-out infinite;
}

[data-theme="editorial"] .ed-skel--text {
  height: 14px;
  width: 100%;
  margin: 4px 0;
}

[data-theme="editorial"] .ed-skel--block {
  width: 100%;
  height: 100px;
}

[data-theme="editorial"] .ed-skel--circle {
  border-radius: 50%;
}

@keyframes ed-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Reduced-motion: статичная плашка без анимации */
@media (prefers-reduced-motion: reduce) {
  [data-theme="editorial"] .ed-skel {
    animation: none;
    background-image: none;
    background: var(--paper-3);
  }
}