/*
 * Заглушки с бегущим бликом на всём allsmile.by (14.11.2026, владелец:
 * «пока не загрузилось — фон, чик-чик, как в Метрике»).
 *
 * Подключается сервером ко всем страницам (nginx, allsmile/season.conf) —
 * страницы не правим. Классы ставит skel.js:
 *   img.as-ld   — картинка ещё грузится;
 *   .as-skt     — текст «загружаем…» / «—», пока скрипт не принёс данные;
 *   .as-skl     — пустой список (табло, рейсы), пока его не заполнили.
 * Карты: свои заглушки страниц (.v2-map-skeleton и др.) — только внешний вид.
 */
:root {
    --as-sk-a: #e9ecf3;
    --as-sk-b: #f6f7fb;
}
@keyframes asSk { from { background-position: 120% 0; } to { background-position: -120% 0; } }

img.as-ld,
.as-skt,
.as-skl {
    background-color: var(--as-sk-a) !important;
    background-image: linear-gradient(100deg, var(--as-sk-a) 30%, var(--as-sk-b) 50%, var(--as-sk-a) 70%) !important;
    background-size: 220% 100% !important;
    animation: asSk 1.4s linear infinite;
}

/* Текст-заглушка: прячем буквы, оставляем плашку его размера. */
.as-skt {
    color: transparent !important;
    border-radius: 7px;
    display: inline-block;
    min-width: 6.5em;
    min-height: 1em;
    line-height: 1.1;
    user-select: none;
}

.as-skt.as-dash { min-width: 2.2em; }

/* Пустой список: полосы строк. */
.as-skl {
    min-height: 208px;
    border-radius: 14px;
    -webkit-mask: repeating-linear-gradient(#000 0 46px, transparent 46px 58px);
    mask: repeating-linear-gradient(#000 0 46px, transparent 46px 58px);
}

/* Карты, пока грузятся: бледная «сетка улиц», блик и пульсирующая точка. */
.v2-map-skeleton,
.poi-map-skeleton,
.maps-skeleton,
.cams-map-wait {
    background-color: #eef1f6 !important;
    background-image:
        linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%),
        linear-gradient(28deg, transparent 47%, #fff 47% 49.5%, transparent 49.5%),
        linear-gradient(-62deg, transparent 58%, #fff 58% 60%, transparent 60%),
        repeating-linear-gradient(0deg, transparent 0 86px, rgba(255, 255, 255, .85) 86px 90px),
        repeating-linear-gradient(90deg, transparent 0 120px, rgba(255, 255, 255, .85) 120px 124px),
        radial-gradient(circle at 70% 30%, #dfeee2 0 70px, transparent 71px),
        radial-gradient(circle at 22% 72%, #dde9f7 0 90px, transparent 91px) !important;
    background-size: 220% 100%, auto, auto, auto, auto, auto, auto !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat !important;
    animation: asSk 1.6s linear infinite !important;
}
/* У заглушек карт «Заправок» и «Карты» своей раскладки нет — они были
   строкой текста в углу. Растягиваем на всю карту (родитель позиционирован). */
.maps-map > .maps-skeleton,
.poi-ex-map > .poi-map-skeleton,
.poi-pmap > .poi-map-skeleton {
    position: absolute; inset: 0; z-index: 1;
    display: grid; place-content: center; justify-items: center;
    transition: opacity .6s;
}

.v2-map-skeleton > span,
.poi-map-skeleton > span,
.maps-skeleton > span {
    position: relative;
    padding: 7px 14px 7px 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 6px 18px -8px rgba(28, 35, 51, .25);
}
.v2-map-skeleton > span::before,
.poi-map-skeleton > span::before,
.maps-skeleton > span::before {
    content: "";
    position: absolute; left: 12px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
    border-radius: 50%; background: #7b61ff;
    animation: asPin 1.4s ease-out infinite;
}
@keyframes asPin { 0% { box-shadow: 0 0 0 0 rgba(123, 97, 255, .55); } 100% { box-shadow: 0 0 0 12px rgba(123, 97, 255, 0); } }

@media (prefers-reduced-motion: reduce) {
    img.as-ld, .as-skt, .as-skl, .v2-map-skeleton, .poi-map-skeleton, .maps-skeleton, .cams-map-wait,
    .v2-map-skeleton > span::before, .poi-map-skeleton > span::before, .maps-skeleton > span::before { animation: none; }
}