/*
    Страница входа для неавторизованного пользователя — template/pages/base/login.php

    Вид: вариант D4 стенда «20 вариантов страницы входа» (C:\st-login\login-20.html, раздел D) —
    «линии сред · живой фон»: пять слоёв медленных течений, «дышащее» свечение и колонна
    пузырьков слева (та же анимация, что в варианте D4-45 «Инфузия»). Шапки и подвала нет.

    ЗАГРУЗКА. Файл — одиночный (не бандл): css/builder.php отдаёт его как есть по
    css/st/login.css, в css/st/main.css и css/st/lazy.css он не входит. Подключается только
    на самой странице входа (см. add_action('wp_enqueue_scripts', …) в login.php).
    Скрипты страницы: jquery + st-ajax-login.js (form_id = st_login_form).

    СПЕЦИФИЧНОСТЬ. На странице есть и main.css (его грузит st_enqueue_scripts() даже гостю),
    а в нём общие правила полей входа — .login-username input / .login-submit input (высота 45px,
    чёрная заливка), .eye_icon (opacity 0, top 37px), .login-remember input {position:absolute},
    из style.css: input:focus { background:#e5e5e5 }, html,body { font-size:11px }.
    Поэтому правила формы идут от #st_login_form (или body.st-login-page …) — этого хватает,
    чтобы перебить и легаси-правила, и общие правила темы, не прибегая к !important.
*/

body.st-login-page {
    --d4-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    margin: 0;
    background: #f8f9fa;
    color: #0b0b0c;
    font-size: 14px;
}

/* --- каркас страницы: во весь экран, карточка по центру --------------------------------- */

body.st-login-page .d4 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100svh;
    padding: 34px;
    background: #f8f9fa;
    color: #0b0b0c;
    overflow: hidden;
}

/* --- фон: свечение, течения, пузырьки --------------------------------------------------- */

body.st-login-page .d4-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body.st-login-page .d4-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120vw;
    height: 130vh;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .92), rgba(226, 232, 238, .5) 58%, rgba(248, 249, 250, 0) 80%);
    animation: d4breathe 22s ease-in-out infinite alternate;
}

@keyframes d4breathe {
    from { transform: translate(-50%, -52%) scale(1); opacity: .8; }
    to { transform: translate(-50%, -46%) scale(1.12); opacity: 1; }
}

/* Слой течений: путь периодичен (6 «горбов» по 480 единиц, всего 2880), ширина слоя 200%,
   сдвиг на -50% ширины = ровно один период — шов при зацикливании не виден. */
body.st-login-page .d4-lanes {
    position: absolute;
    inset: 0;
}

body.st-login-page .d4-lane {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    animation-name: d4drift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

body.st-login-page .d4-lane svg {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes d4drift {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Обёртки пузырьков нужны, чтобы проценты left считались от всей области фона,
   а не от нулевого бокса обёртки. */
body.st-login-page .d4-bubbles,
body.st-login-page .d4-col {
    position: absolute;
    inset: 0;
}

body.st-login-page .d4-bubbles span,
body.st-login-page .d4-colb {
    position: absolute;
    bottom: -24px;
    border-radius: 50%;
    background: rgba(11, 11, 12, .16);
    animation-name: d4rise;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

body.st-login-page .d4-bubbles span {
    background: rgba(11, 11, 12, .18);
}

@keyframes d4rise {
    0% { transform: translateY(0); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(-108vh); opacity: 0; }
}

/* --- карточка входа --------------------------------------------------------------------- */

body.st-login-page .d4-card {
    position: relative;
    width: min(420px, 100%);
    padding: 32px 32px 26px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 24px 60px -24px rgba(12, 20, 30, .28), 0 1px 0 rgba(12, 20, 30, .04);
}

body.st-login-page .d4-h1 {
    margin: 0;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
}

/* --- штатная форма wp_login_form (form_id = st_login_form) ------------------------------ */

body.st-login-page #st_login_form {
    margin-top: 24px;
}

body.st-login-page #st_login_form .login-username,
body.st-login-page #st_login_form .login-password {
    position: relative;
    display: block;
    margin: 0 0 16px;
}

/* Подписи полей в разметке есть (их печатает wp_login_form), но визуально вместо них работает
   плейсхолдер — сами label оставляем скринридерам (стандартный sr-only приём, не display:none). */
body.st-login-page #st_login_form .login-username label,
body.st-login-page #st_login_form .login-password label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

body.st-login-page #st_login_form label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--d4-mono);
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6c6c73;
}

body.st-login-page #st_login_form .input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 12px 13px;
    background: #f8f9fa;
    border: 1px solid #dfe3e6;
    border-radius: 6px;
    font-size: 14.5px;
    line-height: 18px;
    color: #0b0b0c;
    outline: none;
    transition: background .15s, border-color .15s;
}

body.st-login-page #st_login_form .input:focus,
body.st-login-page #st_login_form .input:active {
    background: #fff;
    border-color: #0b0b0c;
}

body.st-login-page #st_login_form .input::placeholder {
    color: #a5a5ab;
}

/* «Глаз» (его вставляет st-ajax-login.js): прижимаем к центру поля (высота 44px → 22px),
   line-height: 0 — чтобы высота бокса была ровно по значку, а не по строке шрифта */
body.st-login-page #st_login_form .login-password .eye_icon {
    position: absolute;
    right: 12px;
    top: auto;
    bottom: 12px;
    line-height: 0;
    opacity: .45;
    transition: opacity .15s;
}

body.st-login-page #st_login_form .login-password .eye_icon:hover,
body.st-login-page #st_login_form .login-password:hover .eye_icon {
    opacity: 1;
}

body.st-login-page #st_login_form .eye_icon svg {
    width: 20px;
    height: 20px;
}

body.st-login-page #st_login_form .login-remember {
    position: relative;
    display: block;
    margin: 2px 0 22px;
}

body.st-login-page #st_login_form .login-remember label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #4a4a50;
    cursor: pointer;
}

body.st-login-page #st_login_form .login-remember input {
    position: static;
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #0b0b0c;
    cursor: pointer;
}

body.st-login-page #st_login_form .login-submit {
    margin: 0;
}

body.st-login-page #st_login_form .login-submit input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    padding: 13px;
    border: 0;
    border-radius: 6px;
    background: #0b0b0c;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

body.st-login-page #st_login_form .login-submit input:hover {
    background: #2a2a30;
}

body.st-login-page #st_login_form .login-submit input:disabled {
    opacity: .5;
    cursor: default;
}

/* --- сообщение об ошибке входа и сноска ------------------------------------------------- */

body.st-login-page .d4-msg {
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #b3261e;
}

body.st-login-page .d4-note {
    margin-top: 14px;
    font-family: var(--d4-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-align: right;
    color: #8a8a8f;
}

/* --- адаптив и «меньше движения» -------------------------------------------------------- */

@media (max-width: 820px) {
    body.st-login-page .d4 { padding: 22px 16px; }
    body.st-login-page .d4-card { padding: 26px 20px 22px; }
    body.st-login-page .d4-h1 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    body.st-login-page .d4-glow,
    body.st-login-page .d4-lane,
    body.st-login-page .d4-bubbles span,
    body.st-login-page .d4-colb {
        animation: none;
    }
}