/* ==========================================================================
   Экран входа/регистрации: живое фото пользователя + рождение солнца-звезды.
   Концепция: дорога к себе ведёт к восходящему солнцу; солнце «рождается» из тьмы,
   даёт глубину (параллакс), звёздную пыль в небе и астро/нумеро-мотивы.
   Логика — js/cosmic-bg.js (параллакс, частицы) и js/intro-sequence.js (драматургия).
   ========================================================================== */

.cosmos {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    display: none; /* включается из cosmic-bg.js только на экране входа */
    pointer-events: none;
    /* тёплый рассветный градиент на случай, если фото не загрузилось */
    background:
        radial-gradient(90% 70% at 50% 22%, rgba(240, 184, 74, 0.22), rgba(240, 184, 74, 0) 55%),
        linear-gradient(180deg, #1a1530 0%, #241a34 45%, #38243e 100%);
}

/* Фото — базовый план, двигается параллаксом (cosmic-bg.js).
   Лёгкий контраст/насыщенность делают компрессированное фото чище и «дороже». */
.cosmos__image {
    position: absolute;
    inset: -6%;
    background-image: url('../img/background.webp');
    background-size: cover;
    background-position: center 34%;
    will-change: transform;
    transform: scale(1.10);
    filter: contrast(1.08) saturate(1.12) brightness(1.02);
}

/* Солнце-звезда: мягкое свечение точно в точке солнца на фото (центр, ~21% сверху) */
.cosmos__sun {
    position: absolute;
    top: 21%;
    left: 50%;
    width: 46vmax;
    height: 46vmax;
    /* центрирование задаёт GSAP через xPercent/yPercent (не CSS translate,
       иначе GSAP раскладывает его в x/y и центрирование удваивается) */
    transform: scale(0.2);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 244, 214, 0.75) 12%,
        rgba(var(--color-primary-rgb), 0.5) 30%,
        rgba(var(--color-primary2-rgb), 0.22) 52%,
        rgba(var(--color-primary-rgb), 0) 72%);
    mix-blend-mode: screen;
    opacity: 0;
    will-change: transform, opacity;
}

/* Лучи от солнца (конический ореол), медленно вращаются */
.cosmos__rays {
    position: absolute;
    top: 21%;
    left: 50%;
    width: 80vmax;
    height: 80vmax;
    transform: scale(0.5); /* центрирование — через GSAP xPercent/yPercent */
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(255, 240, 200, 0) 0deg,
        rgba(var(--color-primary-rgb), 0.10) 10deg,
        rgba(255, 240, 200, 0) 22deg,
        rgba(255, 240, 200, 0) 40deg,
        rgba(var(--color-primary-rgb), 0.08) 50deg,
        rgba(255, 240, 200, 0) 64deg,
        rgba(255, 240, 200, 0) 90deg,
        rgba(var(--color-primary-rgb), 0.09) 100deg,
        rgba(255, 240, 200, 0) 114deg);
    -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 55%);
    mask-image: radial-gradient(circle, #000 8%, transparent 55%);
    mix-blend-mode: screen;
    opacity: 0;
    will-change: transform, opacity;
}

/* Тонирующая вуаль: сажает фото в тему, виньетка по краям + затемнение низа
   для читаемости карточки. */
.cosmos__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(115% 80% at 50% 26%,
            rgba(12, 9, 24, 0) 0%,
            rgba(12, 9, 24, 0.2) 55%,
            rgba(8, 6, 16, 0.72) 100%),
        linear-gradient(180deg,
            rgba(20, 16, 40, 0.12) 0%,
            rgba(28, 18, 44, 0.5) 100%);
}

/* Начальная тьма — гаснет по мере «рождения» солнца (intro-sequence.js) */
.cosmos__dark {
    position: absolute;
    inset: 0;
    background: #05040c;
    opacity: 0.9;
    will-change: opacity;
}

/* Контейнер над фоном */
.container {
    position: relative;
    z-index: 1;
}

/* На экране входа даём карточке больше горизонтали и воздуха */
body.intro-active .container {
    max-width: 1040px;
}

/* ---- Стеклянная карточка: прозрачнее, чтобы фото и солнце просвечивали ---- */
#registrationPage.page--intro {
    position: relative;
    padding: 46px 60px 40px;
    background: rgba(14, 11, 26, 0.34);
    backdrop-filter: blur(15px) saturate(130%);
    -webkit-backdrop-filter: blur(15px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* "from"-состояние задаёт GSAP; класс лишь скрывает до старта скрипта */
.intro-anim {
    opacity: 0;
}

/* ---- Описание: больше пространства, воздуха, читаемости ---- */
.intro-description {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 720px;
    margin: 4px auto 30px;
    font-size: 16.5px;
    line-height: 1.75;
    color: #e7e2f4;
    letter-spacing: 0.1px;
}

.intro-description__sentence {
    display: block;
    margin-bottom: 12px;
}

.intro-description__sentence:last-child {
    margin-bottom: 0;
    margin-top: 18px;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 17px;
}

/* Блок авторизации пошире и по центру */
#introAuthBlock {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

/* ---- Доступность: без анимаций показываем финальное состояние ---- */
@media (prefers-reduced-motion: reduce) {
    .intro-anim,
    .intro-description__sentence {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .cosmos__dark { opacity: 0; }
    .cosmos__sun { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
}

/* ---- Мобильная адаптация ---- */
@media (max-width: 720px) {
    body.intro-active .container { max-width: 100%; }
    #registrationPage.page--intro { padding: 32px 20px 28px; }
    .intro-description { font-size: 15.5px; line-height: 1.7; }
    .cosmos__sun { width: 80vmax; height: 80vmax; }
}