@import url('../main.css');

.bg 
{

    min-height: 100vh;
    min-height: 100dvh;
    background: url('../../../assets/images/static/bg.jpg') center top / cover no-repeat;

}

.bg__overlay 
{

    display: grid;
    place-items: center;
    min-height: inherit;
    padding: var(--page-pad);
    background: radial-gradient(ellipse at 50% 0%, rgba(214, 50, 113, 0.16), transparent 60%), rgba(2, 2, 2, 0.9);
}

.welcome 
{

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    width: 100%;
    width: 480px;
    padding: clamp(24px, 6vw, 40px);
    background: rgba(7, 7, 10, 0.75);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

}

.logo 
{

    display: flex;
    justify-content: center;

}

.logo img 
{

    display: block;
    object-fit: cover;

}

.login__title 
{

    margin-bottom: 18px;
    color: var(--text);
    font-size: 1.125rem;
    text-align: center;

}

.login__list 
{

    display: grid;
    gap: 10px;

}

.login__method 
{

    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    background: var(--surface-3);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: var(--fs-sm);
    transition: background-color var(--ease), border-color var(--ease);

}

.login__method i 
{

    flex-shrink: 0;
    width: 22px;
    font-size: 1.05rem;
    text-align: center;
    opacity: 0.7;

}

.login__method:hover 
{

    background: var(--surface-2);
    border-color: var(--border);

}

.divider 
{

    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-faint);
    font-size: var(--fs-xs);

}

.divider::before, .divider::after 
{

    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);

}

.explore 
{

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: var(--primary);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: var(--fs-sm);
    transition: background-color var(--ease);

}

.explore i 
{ 
    
    font-size: 11pt;
    opacity: 0.6;

}

.explore:hover { background: var(--primary-dark); }

.welcome .logo { order: 0; }

@media (max-width: 550px) 
{

    .bg__overlay { padding: 0; }

    .welcome 
    {

        width: 100%;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        gap: 22px;

    }
    
}