:root {
            --sk-bg: #1E193C;
            --sk-base: #2a2456;
            --sk-shimmer: #362f6d;
        }

/* Локальный индикатор загрузки фильтров и подкатегорий. */
#item-list.router-partial-loading {
    filter: blur(2px);
    opacity: 0.7;
    pointer-events: none;
    transition: filter 120ms ease, opacity 120ms ease;
}


html.fade-out {
    opacity: 0;
    transition: opacity 0.15s ease;
}

html.fade-out .wrapper {
    animation: fade-scale-out 180ms ease forwards;
}

html.fade-in .wrapper {
    animation: fade-scale-in 220ms ease forwards;
}

/* back navigation */
html.back-transition {
    --direction: reverse;
}

html.initial-load .wrapper {
    animation: initial-enter 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes initial-enter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* изоляция UI */


/* skeleton */
.skeleton {
    padding: 16px;
}

.skeleton-line,
.skeleton-card {
    background: linear-gradient(90deg, #eee, #ddd, #eee);
    animation: shimmer 1.2s infinite;
}

.skeleton-line {
    height: 12px;
    margin-bottom: 10px;
}

.skeleton-card {
    height: 120px;
}

.main-content {
    contain: layout paint;
    will-change: transform;
}

html[data-transition] .wrapper {
    view-transition-name: none !important;
}

html:not([data-transition]) .wrapper {
    view-transition-name: page;
}

.playerbar-wrapper {
    view-transition-name: player;  
}

.bottom-nav-wrapper {
    view-transition-name: nav;
}

.wrapper {
    background-color: var(--sk-bg); /* Из source 4 берем --sk-bg: #1a1635 */
    min-height: 100vh;
    isolation: isolate; 
    position: relative;
    transition: filter 0.4s ease;
}



.wrapper.page-loading-blur {
    filter: blur(8px); /* Умеренный блюр, чтобы не "давило" на глаза */
    pointer-events: none;
    user-select: none;
}


.page-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    background: rgba(26, 22, 53, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.page-loading-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.page-loading-overlay::after {
    content: "Загружаем...";
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 15px 30px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px); /* Матовое стекло только для таблички */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: pulse-text 1.5s infinite ease-in-out;
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.95); }
}

::view-transition-old(player),
::view-transition-new(player),
::view-transition-old(nav),
::view-transition-new(nav) {
    animation: none !important;
}

/*::view-transition-old(page),
::view-transition-new(page) {
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); 
}

::view-transition-old(page) {
    z-index: 1;
    background: var(--sk-bg);
    overflow: hidden;
}

::view-transition-new(page) {
    z-index: 2;
    background: var(--sk-bg);
}

html:not(.back-transition)::view-transition-old(page) {
    animation: slide-out-left 420ms both;
}

html:not(.back-transition)::view-transition-new(page) {
    animation: slide-in-right 420ms both;
}

html.back-transition::view-transition-old(page) {
    animation: slide-out-right 420ms both;
}

html.back-transition::view-transition-new(page) {
    animation: slide-in-left 420ms both;
}
*/


/* ФИКС ПРОЗРАЧНОСТИ ПРИ ПЕРЕХОДЕ */
::view-transition-old(page),
::view-transition-new(page) {
    /* Отключаем стандартный режим, который делает слои "стеклянными" */
    mix-blend-mode: normal !important; 
    /* Даем сплошной фон, чтобы ничего не просвечивало */
    background: var(--sk-bg); 
    fill-mode: both;
}

::view-transition-new(page) {
    z-index: 2; /* Новая страница всегда сверху */
}

::view-transition-old(page) {
    z-index: 1;
}

html:not(.back-transition)::view-transition-old(page) {
    animation: scale-down 400ms both cubic-bezier(0.4, 0, 0.2, 1);
}

html:not(.back-transition)::view-transition-new(page) {
    animation: scale-up-fade 450ms both cubic-bezier(0.4, 0, 0.2, 1);
}

html.back-transition::view-transition-old(page) {
    animation: scale-out-up 400ms both ease-in;
}

html.back-transition::view-transition-new(page) {
    animation: scale-in-down 400ms both ease-out;
}

@keyframes scale-down {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.92); opacity: 0; }
}

@keyframes scale-up-fade {
    from { transform: scale(1.08); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes scale-out-up {
    to { transform: scale(1.1); opacity: 0; }
}

@keyframes scale-in-down {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}


::view-transition-old(tab-content-list),
::view-transition-new(tab-content-list){
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;
}

/* Направление: Влево (нажали правую кнопку) */
[data-transition="slide-left"]::view-transition-old(tab-content-list) {
    animation-name: slide-out-left; /* Твои keyframes из прошлого сообщения */
}
[data-transition="slide-left"]::view-transition-new(tab-content-list) {
    animation-name: slide-in-right;
}

/* Направление: Вправо (нажали левую кнопку) */
[data-transition="slide-right"]::view-transition-old(tab-content-list) {
    animation-name: slide-out-right;
}
[data-transition="slide-right"]::view-transition-new(tab-content-list) {
    animation-name: slide-in-left;
}

/* KEYFRAMES */

@keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out-left {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slide-in-left {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out-right {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

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

@keyframes fade-scale-out {
    to {
        opacity: 0;
        transform: scale(0.98);
    }
}

@keyframes fade-scale-in {
    from {
        opacity: 0;
        transform: scale(1.02);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}



        .skeleton-container {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 25px;
            background-color: var(--sk-bg);
            box-sizing: border-box;
        }

        /* Универсальный анимированный блок */
        .skeleton-block {
            background-color: var(--sk-base);
            background-image: linear-gradient(
                90deg, 
                var(--sk-base) 0%, 
                var(--sk-shimmer) 50%, 
                var(--sk-base) 100%
            );
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite linear;
            border-radius: 12px;
        }

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

        /* Элементы заголовка и поиска */
        .skeleton-header { height: 24px; width: 120px; margin-bottom: 15px; }
        .skeleton-search { height: 48px; border-radius: 24px; width: 100%; }

        /* Баннер */
        .skeleton-banner { height: 110px; border-radius: 18px; width: 100%; }

        /* Заголовки секций */
        .skeleton-title { height: 18px; width: 180px; margin-bottom: 15px; }

        /* Сетка/Ряд */
        .skeleton-row {
            display: flex;
            gap: 12px;
            overflow: hidden;
        }

        /* Карточка аудиосказки */
        .skeleton-card { flex: 0 0 130px; }
        .skeleton-card-media { height: 130px; width: 100%; margin-bottom: 8px; }
        .skeleton-card-text { height: 10px; width: 90%; margin-bottom: 6px; }
        .skeleton-card-text-short { height: 10px; width: 50%; }

        /* Категории */
        .skeleton-category { flex: 1; height: 150px; border-radius: 16px; }

        /* Авторы (круги) */
        .skeleton-author-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .skeleton-author-avatar { width: 70px; height: 70px; border-radius: 50%; }
        .skeleton-author-name { height: 10px; width: 50px; }




/* Снимки страницы не должны интерполировать вертикальное положение и высоту. */
::view-transition-group(page) {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}


/* Смена экранов: data-page-animation="scale" возвращает transition.css. */
html.router-loading-scroll-lock {
    overflow: hidden !important;
    scrollbar-gutter: stable;
    touch-action: none;
}

/* Root снимает видимую область, независимо от высоты и scroll страницы. */
html[data-page-animation="slide"]:not([data-transition]):not(.gs-game-transition) .wrapper {
    view-transition-name: none !important;
}

html[data-page-animation="slide"]:not([data-transition]):not(.gs-game-transition)::view-transition-group(root) {
    animation: none;
    overflow: clip;
}

html[data-page-animation="slide"]:not([data-transition]):not(.gs-game-transition)::view-transition-old(root),
html[data-page-animation="slide"]:not([data-transition]):not(.gs-game-transition)::view-transition-new(root) {
    mix-blend-mode: normal;
    opacity: 1;
    transform-origin: center;
}

/* Вперёд: оба экрана движутся справа налево. */
html[data-page-animation="slide"]:not([data-transition]):not(.gs-game-transition):not(.back-transition)::view-transition-old(root) {
    animation: screen-slide-out-left 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

html[data-page-animation="slide"]:not([data-transition]):not(.gs-game-transition):not(.back-transition)::view-transition-new(root) {
    animation: screen-slide-in-right 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Назад: оба экрана движутся слева направо. */
html[data-page-animation="slide"]:not([data-transition]):not(.gs-game-transition).back-transition::view-transition-old(root) {
    animation: screen-slide-out-right 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

html[data-page-animation="slide"]:not([data-transition]):not(.gs-game-transition).back-transition::view-transition-new(root) {
    animation: screen-slide-in-left 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes screen-slide-out-right {
    from { transform: translateX(0); }
    to { transform: translateX(100vw); }
}

@keyframes screen-slide-in-left {
    from { transform: translateX(-100vw); }
    to { transform: translateX(0); }
}

@keyframes screen-slide-out-left {
    from { transform: translateX(0); }
    to { transform: translateX(-100vw); }
}

@keyframes screen-slide-in-right {
    from { transform: translateX(100vw); }
    to { transform: translateX(0); }
}

/* Шапка остаётся на месте и меняет содержимое мягким затуханием. */
html[data-page-animation="slide"]:not([data-transition]):not(.gs-game-transition) .main-header:not(.header-pet) {
    view-transition-name: screen-header;
}

html[data-page-animation="slide"]::view-transition-group(screen-header) {
    animation: none;
    z-index: 40;
}

html[data-page-animation="slide"]::view-transition-old(screen-header) {
    animation: screen-header-fade-out 180ms ease both;
    mix-blend-mode: normal;
}

html[data-page-animation="slide"]::view-transition-new(screen-header) {
    animation: screen-header-fade-in 180ms ease both;
    mix-blend-mode: normal;
}

@keyframes screen-header-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes screen-header-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-page-animation="slide"]::view-transition-old(root),
    html[data-page-animation="slide"]::view-transition-new(root),
    html[data-page-animation="slide"]::view-transition-old(screen-header),
    html[data-page-animation="slide"]::view-transition-new(screen-header) {
        animation: none !important;
    }
}