/*
 * Тихое восстановление пользовательской сессии.
 *
 * Во время штатного refresh вместо технической страницы
 * показывается только динамическое туманное кольцо.
 * Ошибка восстановления остаётся доступной и явной.
 */


/* =========================================================
   Полноэкранный режим восстановления
   ========================================================= */

.page-restore-session {
    overflow: hidden;
}


.page-restore-session .app-header,
.page-restore-session .app-mobile-menu-overlay,
.page-restore-session .app-mobile-menu,
.page-restore-session .app-global-legal-footer,
.page-restore-session #bottom-nav {
    display: none !important;
}


.page-restore-session .app-container,
.page-restore-session .app-main {
    min-height: 100dvh;
}


.page-restore-session .app-main {
    display: grid;

    width: 100%;

    place-items: center;

    padding: 0 !important;
}


.restore-session-page {
    position: fixed;
    z-index: 1200;

    inset: 0;

    display: grid;

    min-width: 0;
    min-height: 100dvh;

    place-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 48%,
            color-mix(
                in srgb,
                var(--accent) 8%,
                transparent
            ) 0,
            transparent 15rem
        ),
        radial-gradient(
            circle at 50% 50%,
            color-mix(
                in srgb,
                var(--surface) 92%,
                transparent
            ) 0,
            color-mix(
                in srgb,
                var(--background, #101418) 96%,
                transparent
            ) 68%
        ),
        var(--background, #101418);

    isolation: isolate;
}


.restore-session-page [hidden] {
    display: none !important;
}


.restore-session-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    border: 0 !important;

    white-space: nowrap !important;
}


/* =========================================================
   Динамический туман
   ========================================================= */

.restore-session-loading {
    display: grid;

    width: 100%;
    height: 100%;

    place-items: center;
}


.restore-session-mist {
    position: relative;

    width:
        clamp(
            118px,
            22vw,
            178px
        );

    aspect-ratio: 1;

    border-radius: 50%;

    filter:
        drop-shadow(
            0
            0
            20px
            color-mix(
                in srgb,
                var(--text) 9%,
                transparent
            )
        );
}


.restore-session-mist::before,
.restore-session-mist::after,
.restore-session-mist-layer {
    position: absolute;

    inset: 0;

    content: "";

    border-radius: 50%;

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 43%,
            #000 52% 69%,
            transparent 80%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 43%,
            #000 52% 69%,
            transparent 80%
        );
}


.restore-session-mist::before {
    background:
        conic-gradient(
            from 22deg,
            transparent 0 7%,
            color-mix(
                in srgb,
                var(--text) 54%,
                transparent
            ) 11%,
            transparent 18% 28%,
            color-mix(
                in srgb,
                var(--text) 37%,
                transparent
            ) 34%,
            transparent 43% 58%,
            color-mix(
                in srgb,
                var(--text) 50%,
                transparent
            ) 65%,
            transparent 73% 88%,
            color-mix(
                in srgb,
                var(--text) 31%,
                transparent
            ) 94%,
            transparent 100%
        );

    filter: blur(7px);

    opacity: 0.76;

    animation:
        restore-session-mist-clockwise
        5.8s
        linear
        infinite;
}


.restore-session-mist::after {
    inset: 4%;

    background:
        conic-gradient(
            from 196deg,
            transparent 0 10%,
            color-mix(
                in srgb,
                var(--text) 32%,
                transparent
            ) 18%,
            transparent 25% 39%,
            color-mix(
                in srgb,
                var(--text) 48%,
                transparent
            ) 47%,
            transparent 55% 69%,
            color-mix(
                in srgb,
                var(--text) 40%,
                transparent
            ) 77%,
            transparent 85% 100%
        );

    filter: blur(10px);

    opacity: 0.64;

    animation:
        restore-session-mist-counterclockwise
        7.4s
        linear
        infinite;
}


.restore-session-mist-layer {
    filter: blur(12px);
}


.restore-session-mist-layer-one {
    inset: 8%;

    background:
        conic-gradient(
            from 88deg,
            transparent 0 14%,
            color-mix(
                in srgb,
                var(--text) 30%,
                transparent
            ) 22%,
            transparent 31% 55%,
            color-mix(
                in srgb,
                var(--text) 44%,
                transparent
            ) 64%,
            transparent 73% 100%
        );

    opacity: 0.66;

    animation:
        restore-session-mist-drift-one
        4.6s
        ease-in-out
        infinite;
}


.restore-session-mist-layer-two {
    inset: -3%;

    background:
        conic-gradient(
            from 284deg,
            transparent 0 18%,
            color-mix(
                in srgb,
                var(--text) 27%,
                transparent
            ) 25%,
            transparent 34% 61%,
            color-mix(
                in srgb,
                var(--text) 36%,
                transparent
            ) 69%,
            transparent 78% 100%
        );

    opacity: 0.52;

    animation:
        restore-session-mist-drift-two
        6.2s
        ease-in-out
        infinite;
}


.restore-session-mist-layer-three {
    inset: 13%;

    background:
        conic-gradient(
            from 154deg,
            transparent 0 12%,
            color-mix(
                in srgb,
                var(--accent) 28%,
                var(--text)
            ) 21%,
            transparent 29% 57%,
            color-mix(
                in srgb,
                var(--text) 32%,
                transparent
            ) 68%,
            transparent 78% 100%
        );

    opacity: 0.32;

    animation:
        restore-session-mist-clockwise
        9.3s
        linear
        infinite;
}


.restore-session-mist-core {
    position: absolute;

    inset: 24%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--text) 10%,
                transparent
            ) 0,
            color-mix(
                in srgb,
                var(--accent) 7%,
                transparent
            ) 34%,
            transparent 72%
        );

    filter: blur(11px);

    opacity: 0.52;

    animation:
        restore-session-mist-breathe
        3.4s
        ease-in-out
        infinite;
}


@keyframes restore-session-mist-clockwise {
    to {
        transform: rotate(360deg);
    }
}


@keyframes restore-session-mist-counterclockwise {
    to {
        transform: rotate(-360deg);
    }
}


@keyframes restore-session-mist-drift-one {
    0%,
    100% {
        transform:
            rotate(-9deg)
            scale(0.96);

        opacity: 0.48;
    }

    50% {
        transform:
            rotate(22deg)
            scale(1.08);

        opacity: 0.78;
    }
}


@keyframes restore-session-mist-drift-two {
    0%,
    100% {
        transform:
            rotate(15deg)
            scale(1.04);

        opacity: 0.38;
    }

    50% {
        transform:
            rotate(-18deg)
            scale(0.94);

        opacity: 0.62;
    }
}


@keyframes restore-session-mist-breathe {
    0%,
    100% {
        transform: scale(0.88);
        opacity: 0.28;
    }

    50% {
        transform: scale(1.12);
        opacity: 0.58;
    }
}


/* =========================================================
   Состояние ошибки
   ========================================================= */

.restore-session-error {
    display: flex;

    width:
        min(
            calc(100% - 28px),
            470px
        );

    min-width: 0;
    min-height: 310px;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 12px;

    padding:
        30px
        26px;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 50% 0,
            color-mix(
                in srgb,
                var(--danger) 8%,
                transparent
            ),
            transparent 20rem
        ),
        color-mix(
            in srgb,
            var(--surface) 96%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--danger) 34%,
            var(--border)
        );

    border-radius: var(--radius);

    box-shadow:
        0
        18px
        48px
        rgba(0, 0, 0, 0.28);

    text-align: center;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


.restore-session-error-icon {
    display: inline-flex;

    width: 62px;
    height: 62px;

    flex:
        0
        0
        62px;

    align-items: center;
    justify-content: center;

    margin-bottom: 4px;

    color:
        var(
            --danger-contrast,
            #ffffff
        );

    background: var(--danger);

    border-radius: 18px;

    box-shadow:
        0
        12px
        26px
        color-mix(
            in srgb,
            var(--danger) 20%,
            transparent
        );

    font-size: 1.7rem;
    font-weight: 850;
    line-height: 1;
}


.restore-session-error h2 {
    margin: 0;

    color:
        color-mix(
            in srgb,
            var(--danger) 84%,
            var(--text)
        );

    font-size:
        clamp(
            1.2rem,
            5vw,
            1.5rem
        );

    line-height: 1.3;
}


.restore-session-error p {
    max-width: 390px;

    margin: 0;

    color: var(--muted);

    font-size: 0.86rem;
    line-height: 1.5;

    overflow-wrap: anywhere;
}


.restore-session-error .btn {
    display: inline-flex;

    width:
        min(
            100%,
            280px
        );

    min-height: 48px;

    align-items: center;
    justify-content: center;

    margin-top: 7px;

    box-sizing: border-box;

    text-align: center;
    text-decoration: none;
}


/* =========================================================
   Мобильные устройства
   ========================================================= */

@media (max-width: 599px) {
    .restore-session-mist {
        width:
            clamp(
                112px,
                34vw,
                150px
            );
    }


    .restore-session-error {
        min-height: 290px;

        padding:
            26px
            18px;

        border-radius: 17px;
    }
}


/* =========================================================
   Уменьшение анимации
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {
    .restore-session-mist::before,
    .restore-session-mist::after,
    .restore-session-mist-layer,
    .restore-session-mist-core {
        animation: none;
    }


    .restore-session-mist::before,
    .restore-session-mist::after,
    .restore-session-mist-layer {
        opacity: 0.58;
    }


    .restore-session-mist-core {
        opacity: 0.36;
    }
}


/* =========================================================
   Печать
   ========================================================= */

@media print {
    .restore-session-page {
        position: static;

        min-height: 0;

        background: transparent;
    }


    .restore-session-loading {
        min-height: 120px;
    }


    .restore-session-mist {
        display: none;
    }


    .restore-session-sr-only {
        position: static !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;

        overflow: visible !important;

        clip: auto !important;
        clip-path: none !important;

        white-space: normal !important;
    }
}