/* ======================================================
   ZAPISKA AUTH — FULLSCREEN WALLPAPER
====================================================== */

:root {
    --auth-hero-image:
        url("/static/images/auth/rotating/login-bg-01.png");
}


html,
body {
    width: 100%;
    height: 100%;
    margin: 0;

    overflow: hidden;
}


body {
    min-height: 100vh;
}


/* FULLSCREEN BACKGROUND */

.auth-brand {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0;

    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;

    overflow: hidden;

    background: #111820 !important;
}


.auth-brand::after {
    content: "";

    position: absolute;
    inset: -3%;

    z-index: 0;

    background-image:
        var(--auth-hero-image);

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform:
        scale(1.07);

    animation:
        authWallpaperMotion
        28s
        ease-in-out
        infinite
        alternate;
}


.auth-brand::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(0, 0, 0, 0.04),
            rgba(0, 0, 0, 0.25) 42%,
            rgba(7, 11, 16, 0.70) 100%
        ),
        linear-gradient(
            90deg,
            rgba(8, 12, 17, 0.70) 0%,
            rgba(8, 12, 17, 0.42) 45%,
            rgba(8, 12, 17, 0.16) 72%,
            rgba(8, 12, 17, 0.24) 100%
        );
}


.auth-brand > * {
    position: relative;
    z-index: 3;
}


@keyframes authWallpaperMotion {
    0% {
        transform:
            scale(1.07)
            translate3d(-0.6%, 0%, 0);
    }

    50% {
        transform:
            scale(1.11)
            translate3d(0.8%, -0.5%, 0);
    }

    100% {
        transform:
            scale(1.08)
            translate3d(0.2%, 0.7%, 0);
    }
}


/* LOGIN PANEL */

.auth-panel,
.auth-form-panel,
.auth-side,
.auth-content-right,
.auth-form-wrap {
    position: fixed !important;

    top: 50% !important;
    right: clamp(28px, 5vw, 90px) !important;

    left: auto !important;

    z-index: 20;

    width: min(460px, calc(100vw - 48px)) !important;
    height: auto !important;
    min-height: 0 !important;

    transform:
        translateY(-50%) !important;

    padding: 38px !important;

    border:
        1px solid rgba(255, 255, 255, 0.62);

    border-radius: 28px;

    background:
        rgba(250, 249, 247, 0.92) !important;

    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);

    backdrop-filter:
        blur(18px)
        saturate(1.08);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(1.08);

    overflow: hidden;
}


/* SUBTLE CHINESE ORNAMENT */

.auth-panel::before,
.auth-form-panel::before,
.auth-side::before,
.auth-content-right::before,
.auth-form-wrap::before {
    content: "";

    position: absolute;

    top: -72px;
    right: -68px;

    width: 190px;
    height: 190px;

    border:
        1px solid rgba(171, 25, 23, 0.10);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            transparent 46%,
            rgba(171, 25, 23, 0.055) 47%,
            rgba(171, 25, 23, 0.055) 49%,
            transparent 50%
        ),
        linear-gradient(
            45deg,
            transparent 46%,
            rgba(171, 25, 23, 0.045) 47%,
            rgba(171, 25, 23, 0.045) 53%,
            transparent 54%
        ),
        linear-gradient(
            -45deg,
            transparent 46%,
            rgba(171, 25, 23, 0.045) 47%,
            rgba(171, 25, 23, 0.045) 53%,
            transparent 54%
        );

    opacity: 0.85;

    transform:
        rotate(20deg);

    pointer-events: none;
}


.auth-panel::after,
.auth-form-panel::after,
.auth-side::after,
.auth-content-right::after,
.auth-form-wrap::after {
    content: "";

    position: absolute;

    left: 38px;
    bottom: 20px;

    width: 72px;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #ab1917 0%,
            rgba(171, 25, 23, 0.08) 100%
        );

    pointer-events: none;
}


.auth-panel > *,
.auth-form-panel > *,
.auth-side > *,
.auth-content-right > *,
.auth-form-wrap > * {
    position: relative;
    z-index: 2;
}


/* LOGO */

.auth-logo__mark {
    width: 58px;
    height: 58px;

    padding: 0;

    overflow: hidden;

    border-radius: 14px;

    background: transparent !important;
    box-shadow: none !important;
}


.auth-logo__mark img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* LEFT BRAND TEXT */

.auth-brand__title {
    max-width: 580px;

    text-shadow:
        0 4px 26px rgba(0, 0, 0, 0.28);
}


.auth-brand__title-accent {
    color: #ef4b50;
}


.auth-brand__text {
    max-width: 540px;

    color:
        rgba(255, 255, 255, 0.76) !important;

    text-shadow:
        0 3px 16px rgba(0, 0, 0, 0.32);
}


.auth-brand__footer {
    color:
        rgba(255, 255, 255, 0.66) !important;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    html,
    body {
        overflow: auto;
    }


    .auth-brand {
        position: fixed !important;
    }


    .auth-panel,
    .auth-form-panel,
    .auth-side,
    .auth-content-right,
    .auth-form-wrap {
        right: 18px !important;
        left: 18px !important;

        width: auto !important;

        padding: 28px 24px !important;
    }

}


/* ======================================================
   MOBILE AUTH FIX V1
   File: app/static/css/auth-decor.css
====================================================== */

@media (max-width: 760px) {

    html,
    body {
        width: 100%;
        min-height: 100%;
        height: auto;

        overflow-x: hidden;
        overflow-y: auto;
    }


    /*
     * На мобильном сохраняем полноэкранные обои.
     * Старый auth.css скрывает .auth-brand,
     * поэтому переопределяем display.
     */
    .auth-brand {
        display: block !important;

        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;

        padding: 0 !important;

        pointer-events: none;
    }


    /*
     * Сам левый desktop-контент на телефоне не нужен.
     * Оставляем только фотографию.
     */
    .auth-brand__inner,
    .auth-brand__decor {
        display: none !important;
    }


    .auth-brand::after {
        inset: -5%;

        background-position: center center;

        transform: scale(1.08);

        animation-duration: 32s;
    }


    .auth-brand::before {
        background:
            linear-gradient(
                180deg,
                rgba(8, 12, 17, 0.32) 0%,
                rgba(8, 12, 17, 0.46) 42%,
                rgba(8, 12, 17, 0.74) 100%
            );
    }


    /*
     * Правая сторона теперь просто контейнер,
     * через который видны обои.
     */
    .auth-form-side {
        position: relative;
        z-index: 10;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

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

        padding:
            24px
            16px !important;

        background: transparent !important;

        overflow: visible;
    }


    /*
     * Сбрасываем desktop fixed positioning.
     * Это важно для мобильной клавиатуры.
     */
    .auth-form-wrap {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        z-index: 20;

        width: 100% !important;
        max-width: 440px !important;

        height: auto !important;
        min-height: 0 !important;

        margin:
            auto
            0 !important;

        padding:
            26px
            22px
            24px !important;

        transform: none !important;

        border:
            1px solid rgba(255, 255, 255, 0.58);

        border-radius: 24px;

        background:
            rgba(250, 249, 247, 0.92) !important;

        box-shadow:
            0 22px 65px rgba(0, 0, 0, 0.30);

        backdrop-filter:
            blur(16px)
            saturate(1.06);

        -webkit-backdrop-filter:
            blur(16px)
            saturate(1.06);

        overflow: hidden;
    }


    .auth-mobile-logo {
        display: flex !important;

        margin-bottom: 34px;
    }


    .auth-mobile-logo .auth-logo__mark {
        width: 48px;
        height: 48px;
    }


    .auth-mobile-logo .auth-logo__name {
        font-size: 22px;

        color: #181b20;
    }


    .auth-form-header {
        margin-bottom: 28px;
    }


    .auth-form-header__title {
        font-size: 30px;
    }


    .auth-input {
        height: 54px;

        font-size: 16px;
    }


    .auth-submit {
        height: 54px;

        font-size: 15px;
    }


    /*
     * На телефоне декоративный орнамент делаем
     * заметно спокойнее, чтобы не мешал форме.
     */
    .auth-form-wrap::before {
        display: block !important;

        top: -62px;
        right: -72px;

        width: 160px;
        height: 160px;

        opacity: 0.55;
    }


    .auth-form-wrap::after {
        left: 22px;
        bottom: 15px;

        width: 54px;

        opacity: 0.65;
    }

}


/*
 * Низкие экраны:
 * карточку нельзя вертикально центрировать,
 * иначе клавиатура может обрезать верх формы.
 */
@media (max-width: 760px) and (max-height: 700px) {

    .auth-form-side {
        align-items: flex-start !important;

        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }


    .auth-mobile-logo {
        margin-bottom: 22px;
    }


    .auth-form-header {
        margin-bottom: 22px;
    }

}


/* Очень узкие смартфоны */
@media (max-width: 390px) {

    .auth-form-side {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }


    .auth-form-wrap {
        padding:
            23px
            18px
            21px !important;

        border-radius: 21px;
    }


    .auth-form-header__title {
        font-size: 27px;
    }

}