/* ============================================================
   Skeleton Loading — единый переиспользуемый механизм
   ------------------------------------------------------------
   Все общие параметры (цвета, shimmer, easing, длительности,
   crossfade, каскад, поведение reduced-motion) управляются
   ОТСЮДА через CSS-переменные. Конкретные типы плейсхолдеров
   (например, карточка персонажа) задают только свою ФОРМУ и
   РАЗМЕРЫ, переиспользуя общие цвета и движение.

   Ключевые принципы реализации (см. ТЗ):
   • Shimmer рисуется как СОБСТВЕННЫЙ фон элемента (animated
     background-position), а не как отдельный дочерний слой с
     overflow-клиппингом. Это полностью исключает светлые ореолы,
     контуры по краям и «просвечивание второго слоя» на скруглениях.
   • Базовый цвет и пик shimmer — нейтральный тёмно-серый, разница
     между ними минимальна => блик мягкий, без яркого белого.
   • Skeleton появляется СРАЗУ в финальном положении (никаких
     fade-in / scale / slide самого скелета). Анимируется только
     внутренний shimmer и последующий crossfade к контенту.
   ============================================================ */

:root {
    /* --- Палитра --- */
    --rc-skel-base: #131313;     /* базовый цвет skeleton */
    --rc-skel-peak: #1c1c1c;     /* мягкий shimmer-блик (нейтральный серый) */

    /* Градиент блика собран один раз здесь — пик равен --rc-skel-peak,
       края прозрачны и «проявляют» базовый цвет, поэтому это одна
       цельная поверхность без второго слоя. */
    --rc-skel-gradient: linear-gradient(
        100deg,
        rgba(28, 28, 28, 0) 18%,
        rgba(28, 28, 28, 0.45) 38%,
        rgba(28, 28, 28, 1) 50%,
        rgba(28, 28, 28, 0.45) 62%,
        rgba(28, 28, 28, 0) 82%
    );

    /* --- Геометрия --- */
    --rc-skel-radius: 1rem;      /* = Tailwind rounded-2xl (16px) */

    /* --- Движение --- */
    --rc-skel-shimmer-duration: 1.8s;                       /* мягкий спокойный цикл блика */
    --rc-skel-ease: cubic-bezier(0.22, 1, 0.36, 1);         /* единое ощущение движения */
    --rc-skel-crossfade: 320ms;                             /* skeleton -> контент (200–400 мс) */
    --rc-skel-stagger: 50ms;                                /* каскад между карточками (40–60 мс) */
}

/* ------------------------------------------------------------
   Базовая shimmer-поверхность — ЕДИНЫЙ источник цветов и движения.
   ------------------------------------------------------------
   `rc-skeleton`  — универсальная база для ЛЮБОГО плейсхолдера
                    (генератор placeholders() добавляет её всегда);
   `rc-skel`      — режим «реальный элемент как skeleton» (in-place);
   `rc-skeleton-card` — первый конкретный ТИП (форма ниже).

   Новый тип плейсхолдера НЕ требует правок этого блока: достаточно
   добавить класс-модификатор `.rc-skeleton--<type>` только с формой
   и размерами — цвета/shimmer/тайминги он унаследует от `rc-skeleton`.
   ------------------------------------------------------------ */
.rc-skeleton,
.rc-skeleton-card,
.rc-skel {

    background-color: var(--rc-skel-base);
    background-image: var(--rc-skel-gradient);
    background-repeat: no-repeat;
    background-size: 220% 100%;
    background-position: 150% 0;
    animation: rc-skel-shimmer var(--rc-skel-shimmer-duration) var(--rc-skel-ease) infinite;
    /* Нет border / box-shadow / outline — никакой обводки и ореолов. */
}

@keyframes rc-skel-shimmer {
    0%   { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

/* ------------------------------------------------------------
   Тип плейсхолдера: карточка персонажа.
   Повторяет форму реальной карточки (пропорции + скругление),
   а количество колонок / промежутки / адаптив берутся от той же
   сетки, в которую он помещается.
   ------------------------------------------------------------ */
.rc-skeleton-card {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3.5;            /* = aspect-[2/3.5] на мобильных */
    border-radius: var(--rc-skel-radius);
    /* overflow не нужен: shimmer — это собственный фон, он сам
       обрезается по border-radius, без отдельного слоя и AA-артефактов. */
}

@media (min-width: 1024px) {
    .rc-skeleton-card {
        aspect-ratio: 2 / 3;          /* = lg:aspect-[2/3] */
    }
}

/* ------------------------------------------------------------
   КАК ДОБАВИТЬ НОВЫЙ ТИП (галерея / поиск / «Мои ИИ» / список):
   объявить ТОЛЬКО форму и размеры — цвета/shimmer/тайминги придут
   от базового `rc-skeleton` автоматически. Пример (раскомментировать
   и поправить под нужный блок):

   .rc-skeleton--gallery {            // квадратная миниатюра галереи
       width: 100%;
       aspect-ratio: 1 / 1;
       border-radius: var(--rc-skel-radius);
   }
   .rc-skeleton--list {               // строка результата поиска
       width: 100%;
       height: 4.5rem;
       border-radius: 0.75rem;
   }

   Затем: RealchatSkeleton.swap(container, loadFn,
            { typeClass: 'rc-skeleton--gallery', count: 12,
              itemSelector: '.js-gallery-item' });
   либо серверный in-place режим: повесить `rc-skel` на реальные
   элементы и `data-rc-skeleton` на их контейнер.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   In-place режим: реальная карточка временно работает как

   skeleton (её собственный фон = shimmer, внутренний контент
   скрыт), а затем crossfade'ом проявляет фотографию/контент.

   Так skeleton идеально совпадает с размерами, пропорциями,
   скруглениями, колонками и промежутками реальной сетки — это
   и есть сама карточка.
   ------------------------------------------------------------ */
.rc-skel {
    /* Карточка уже имеет position/border-radius/overflow от своих
       utility-классов; здесь добавляем только shimmer-фон (см. выше). */
}

/* Прячем настоящий контент карточки (фото, градиент, бейджи, подписи),
   пока идёт ожидание. Это даёт «цельный плейсхолдер области фото»
   без лишних текстовых полосок. */
.rc-skel > * {
    opacity: 0;
}

/* Crossfade к реальному контенту + лёгкий каскад через --rc-skel-delay. */
.rc-skel.rc-skel-reveal > * {
    opacity: 1;
    transition: opacity var(--rc-skel-crossfade) var(--rc-skel-ease);
    transition-delay: var(--rc-skel-delay, 0ms);
}

/* ------------------------------------------------------------
   prefers-reduced-motion: спокойная смена состояний —
   без shimmer, без каскада, без выраженного движения.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .rc-skeleton,
    .rc-skeleton-card,
    .rc-skel {
        animation: none;
        background-image: none;       /* статичная ровная поверхность, без блика */
    }

    .rc-skel.rc-skel-reveal > * {
        transition: opacity 120ms ease;
        transition-delay: 0ms !important;   /* без каскада */
    }
}