/* ============================================================
   SKELETON (Shimmer) — заглушки загрузки
   ============================================================ */

/* Skeleton Line */
.skeleton-line {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    background: #1a2130;
    border: 1px solid var(--border);
  }
  .skeleton-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    transform: translateX(-100%);
    animation: skeleton-shimmer calc(1.2s * var(--speed, 1)) linear infinite;
  }
  
  /* Skeleton Card */
  .skeleton-card {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px 12px;
  }
  .skeleton-card .ph {
    background: #1a2130;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    min-height: 12px;
  }
  .skeleton-card .avatar {
    width: 44px;
    height: 44px;
    grid-row: 1 / span 2;
    border-radius: 50%;
  }
  .skeleton-card .line { height: 12px; }
  .skeleton-card .w60 { width: 60%; }
  .skeleton-card .w80 { width: 80%; }
  .skeleton-card .ph::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    transform: translateX(-100%);
    animation: skeleton-shimmer calc(1.4s * var(--speed, 1)) linear infinite;
  }
  
  .work-card--skeleton {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    min-height: 140px;
    pointer-events: none;
  }
  
  /* Строка-заглушка для servicesList */
  .service-row--skeleton {
    pointer-events: none;
    opacity: .9;
  }
  
  /* Заглушка-карточка для teamGrid */
  .team-card--skeleton {
    pointer-events: none;
  }
  
  /* Заглушка для calcSteps */
  .calc-step--skeleton {
    pointer-events: none;
  }
  
  /* Уважение к prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .skeleton-line::after,
    .skeleton-card .ph::after {
      animation: none;
      background: rgba(255,255,255,.04);
      transform: none;
    }
  }
  
  @keyframes skeleton-shimmer {
    to { transform: translateX(100%); }
  }