/* ==========================================================================
   login.css — экран входа: экран-«вахтёр» (Да / Нет) + форма логина
   Разметка в login.html, поведение в login.js
   ========================================================================== */

/* --- Палитра и общие токены --- */
:root {
    --rose-text:  #5a2a33;
    --rose-deep:  #a23c56;
    --rose-mid:   #d95d7a;
    --rose-soft:  #ff9db4;
    --card-bg:    rgba(255, 255, 255, 0.55);
    --card-brd:   rgba(255, 255, 255, 0.75);
    --ease:       cubic-bezier(0.22, 0.68, 0.28, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    font-family: "Segoe UI", Tahoma, sans-serif;
    color: var(--rose-text);
    overflow: hidden;
    position: relative;
    /* насыщеннее по краям (сверху и снизу), светлее в середине — мягкая виньетка */
    background: linear-gradient(160deg,
        #d5749a 0%, #e79fb8 24%, #f3c0cf 50%, #e896ae 76%, #cd6a8e 100%);
    background-size: 200% 220%;
    animation: drift 24s ease-in-out infinite;
}

@keyframes drift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==========================================================================
   Фон: мягкие световые пятна (bokeh)
   ========================================================================== */
.bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.6;
}
.glow.g1 {
    width: 46vmax; height: 46vmax; left: -14vmax; top: -16vmax;
    background: radial-gradient(circle, #ffd5e2, transparent 70%);
    animation: floaty 26s ease-in-out infinite;
}
.glow.g2 {
    width: 38vmax; height: 38vmax; right: -12vmax; bottom: -14vmax;
    background: radial-gradient(circle, #ff9ebb, transparent 70%);
    animation: floaty 30s ease-in-out infinite reverse;
}
.glow.g3 {
    width: 26vmax; height: 26vmax; left: 30vw; bottom: -10vmax;
    background: radial-gradient(circle, #ffe0c2, transparent 70%);
    animation: floaty 34s ease-in-out infinite;
}

@keyframes floaty {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(4vmax, -3vmax) scale(1.12); }
}

/* ==========================================================================
   «Небо»: падающие лепестки, сердца, котики, звёзды.
     .flake — падение по вертикали
     .sway  — плавное покачивание вбок (БЕЗ вращения — силуэт остаётся узнаваемым)
   Форма внутри крутится сама, только если ей это идёт (лепесток, звезда).
   Сердце и котики всегда «стоят» ровно.
   Базовый размер частицы — в переменной --s на .flake.
   ========================================================================== */
.sky {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.flake {
    position: absolute;
    top: -14vh;
    will-change: transform;
    animation: fall linear infinite;
}

.flake .sway {
    display: block;
    animation: sway ease-in-out infinite alternate;
}

/* фигура внутри — всегда блок, иначе width/height у <span> не сработают */
.flake .sway > span {
    display: block;
}

/* Слои глубины — дальние мельче, бледнее и чуть размыты (эффект параллакса) */
.flake.far  { opacity: 0.5;  filter: blur(0.7px); }
.flake.mid  { opacity: 0.82; }
.flake.near { opacity: 0.97; }

@keyframes fall {
    0%   { transform: translateY(-14vh); }
    100% { transform: translateY(118vh); }
}
@keyframes sway {
    from { transform: translateX(-2.4vw); }
    to   { transform: translateX(2.4vw); }
}

/* мягкое кувыркание лепестка */
@keyframes flutter {
    0%   { transform: rotate(0)      scale(var(--s, 1)); }
    50%  { transform: rotate(180deg) scale(calc(var(--s, 1) * 1.06)); }
    100% { transform: rotate(360deg) scale(var(--s, 1)); }
}
/* медленный оборот звезды */
@keyframes star-turn {
    to { transform: rotate(360deg) scale(var(--s, 1)); }
}
@keyframes twinkle {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* Лепесток сакуры — светлый, с тенью, чтобы читался на розовом фоне */
.petal {
    width: 15px; height: 15px;
    background: linear-gradient(150deg, #ffffff 0%, #ffd0e0 45%, #ff9dc0 100%);
    border-radius: 100% 0 100% 0;
    box-shadow: 0 1px 3px rgba(150, 50, 80, 0.20), inset 0 0 3px rgba(255, 255, 255, 0.85);
    transform: scale(var(--s, 1));
    animation: flutter 7s linear infinite;
}
.petal.v2 {
    width: 17px; height: 13px;
    border-radius: 100% 6px 100% 6px;
    background: linear-gradient(150deg, #fff2f6 0%, #ffc2d5 55%, #ff96b6 100%);
}

/* Сердце — всегда ровное (rotate 45° — это конструкция фигуры, не анимация) */
.heart {
    position: relative;
    width: 12px; height: 12px;
    background: #ff5f97;
    transform: rotate(45deg) scale(var(--s, 1));
    filter: drop-shadow(0 1px 2px rgba(150, 40, 80, 0.30));
}
.heart::before,
.heart::after {
    content: "";
    position: absolute;
    width: 12px; height: 12px;
    background: inherit;
    border-radius: 50%;
}
.heart::before { left: -6px; }
.heart::after  { top: -6px; }

/* Котик / лапка — эмодзи, всегда ровно */
.emoji {
    font-size: 20px;
    line-height: 1;
    transform: scale(var(--s, 1));
    filter: drop-shadow(0 2px 3px rgba(160, 60, 90, 0.28));
}

/* Звёздочка — настоящая пятиконечная (clip-path), мерцает и медленно вращается */
.star {
    width: 15px; height: 15px;
    background: radial-gradient(circle at 50% 42%, #ffffff, #ffdcea 60%, #ff9ecb);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transform: scale(var(--s, 1));
    filter: drop-shadow(0 0 3px rgba(255, 205, 228, 0.9));
    animation: star-turn 16s linear infinite, twinkle 2.6s ease-in-out infinite;
}

/* ==========================================================================
   Карточка
   ========================================================================== */
.card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    padding: 2.75rem 2.25rem;
    text-align: center;
    background: var(--card-bg);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid var(--card-brd);
    border-radius: 28px;
    box-shadow:
        0 30px 70px rgba(150, 50, 80, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    animation:
        card-in 0.9s var(--ease) both,
        halo 5s ease-in-out infinite 0.9s,
        card-float 7s ease-in-out infinite 0.9s;
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes card-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes halo {
    0%, 100% {
        box-shadow:
            0 30px 70px rgba(150, 50, 80, 0.30),
            0 0 0 0 rgba(255, 140, 175, 0),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    50% {
        box-shadow:
            0 30px 70px rgba(150, 50, 80, 0.30),
            0 0 42px 6px rgba(255, 140, 175, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
}

/* ==========================================================================
   Заголовок
   ========================================================================== */
h1 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 1.6rem;
    letter-spacing: 0.01em;
}

.wink {
    display: inline-block;
    animation: wink 3s ease-in-out infinite;
}
@keyframes wink {
    0%, 86%, 100% { transform: rotate(0); }
    90% { transform: rotate(16deg); }
    95% { transform: rotate(-8deg); }
}

/* ==========================================================================
   Кнопки экрана-вахтёра
   ========================================================================== */
.row {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    font: inherit;
    font-weight: 700;
    padding: 0.8rem 1.8rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.34s var(--ease), box-shadow 0.18s ease, filter 0.18s ease;
}

.btn-yes {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--rose-soft), #e0537a);
    box-shadow: 0 12px 28px rgba(217, 93, 122, 0.5);
    animation: yes-pulse 1.9s ease-in-out infinite;
}
.btn-yes:hover { transform: translateY(-3px) scale(1.06); filter: brightness(1.05); }

/* бегущий блик по кнопке «Да» */
.btn-yes::after {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    animation: sheen 3.6s ease-in-out infinite;
}
@keyframes sheen {
    0%, 62% { left: -60%; }
    100%    { left: 130%; }
}
@keyframes yes-pulse {
    0%, 100% { box-shadow: 0 12px 28px rgba(217, 93, 122, 0.5), 0 0 0 0 rgba(224, 83, 122, 0.45); }
    50%      { box-shadow: 0 12px 28px rgba(217, 93, 122, 0.5), 0 0 0 12px rgba(224, 83, 122, 0); }
}

.btn-no {
    position: relative;
    z-index: 3;
    color: var(--rose-deep);
    background: rgba(255, 255, 255, 0.85);
    will-change: transform;
}

/* ==========================================================================
   Умоляющая строчка
   ========================================================================== */
.plea {
    margin-top: 1.4rem;
    min-height: 1.4rem;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--rose-deep);
}
.plea.show { animation: plea-in 0.4s ease both; }
@keyframes plea-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Переход «вахтёр → форма логина»
   ========================================================================== */
#gate, #login { transition: opacity 0.45s ease, transform 0.45s ease; }
#gate.fade-out { opacity: 0; transform: translateY(-10px); pointer-events: none; }
#login { display: none; }
#login.fade-in-start { opacity: 0; transform: translateY(10px); }

/* ==========================================================================
   Форма логина
   ========================================================================== */
#login label {
    display: block;
    text-align: left;
    font-size: 0.85rem;
    margin: 0.9rem 0 0.3rem;
}

#login input {
    width: 100%;
    font: inherit;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(160, 60, 86, 0.25);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
}
#login input:focus {
    outline: none;
    border-color: var(--rose-mid);
    box-shadow: 0 0 0 3px rgba(217, 93, 122, 0.15);
}

#login button {
    width: 100%;
    margin-top: 1.4rem;
    font: inherit;
    font-weight: 700;
    padding: 0.8rem 1.8rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--rose-soft), #e0537a);
    box-shadow: 0 10px 24px rgba(217, 93, 122, 0.45);
    transition: transform 0.18s ease, filter 0.18s ease;
}
#login button:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* ==========================================================================
   Сообщения (ошибка входа / выход)
   ========================================================================== */
.msg {
    margin-top: 1.1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.35;
    font-style: italic;
    white-space: pre-line;   /* \n в тексте сообщения => перенос строки */
    display: none;
}
.msg.error { display: block; background: rgba(217, 93, 122, 0.15); color: var(--rose-deep); }
.msg.ok    { display: block; background: rgba(120, 190, 130, 0.20); color: #2f7a45; }

/* ==========================================================================
   Если в системе отключены анимации — спокойная версия:
   частицы всё равно падают (медленно, без вращения/дыхания),
   но резких пульсаций, тряски и бликов нет.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    body { animation-duration: 60s; }
    .glow,
    .wink,
    .btn-yes,
    .btn-yes::after,
    .card { animation: none; }
    .flake .sway,
    .petal { animation: none; }
    .star { animation: none; opacity: 0.75; }
}