/* ═══════════════════════════════════════════════════════════════════════════
   VETKA · Реюзабельный скелетон-плейсхолдер (по мотивам transitions.dev).
   Тема Vetka, без теней. Применение: пока идёт async-загрузка — показывать
   .vetka-skel с полосами .vetka-skel-line; на готовности реальный контент
   с классом .vetka-skel-reveal плавно проявляется (blur + fade).
   Первый потребитель — booking-модалка (загрузка слотов врача).
   Подключается глобально через project-theme/config.json requireInternal.
   ═══════════════════════════════════════════════════════════════════════════ */

.vetka-skel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vetka-skel-line {
    height: 13px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        var(--surface-3) 0%, var(--line) 40%, var(--surface-3) 80%);
    background-size: 200% 100%;
    animation: vetka-skel-shimmer 1.3s linear infinite;
}
.vetka-skel-line--w40 { width: 40%; }
.vetka-skel-line--w50 { width: 50%; }
.vetka-skel-line--w70 { width: 70%; }
.vetka-skel-line--w90 { width: 90%; }

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

/* Реальный контент после загрузки — мягкое проявление */
.vetka-skel-reveal {
    animation: vetka-skel-reveal var(--motion-base, 200ms) var(--ease, ease) both;
}
@keyframes vetka-skel-reveal {
    from { opacity: 0; filter: blur(5px); transform: translateY(4px); }
    to   { opacity: 1; filter: none;      transform: none; }
}

/* Уважение к prefers-reduced-motion: глушим shimmer/проявление */
@media (prefers-reduced-motion: reduce) {
    .vetka-skel-line { animation: none; }
    .vetka-skel-reveal { animation: none; }
}