/* =====================================================
   VYNCE - LOGIN / CADASTRO
===================================================== */

:root{

    --purple-950:#1d1036;
    --purple-900:#261442;
    --purple-800:#35185e;
    --purple-700:#4d2386;
    --purple-600:#6f35b9;
    --purple-500:#8b4de3;

    --paper:#ffffff;

    --text:#17151d;
    --muted:#76717e;

    --border:#dedbe5;
    --border-strong:#cfc9da;

    --error:#b13b45;
    --success:#2f6f4e;

}


/* =====================================================
   RESET
===================================================== */

*{
    box-sizing:border-box;
}

html,
body{

    margin:0;

    width:100%;

    min-height:100%;

}

body{

    min-height:100vh;

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    background:var(--paper);

    color:var(--text);

}


/* =====================================================
   LAYOUT
===================================================== */

.auth-shell{

    min-height:100vh;

    display:grid;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(520px,.92fr);

}


/* =====================================================
   PAINEL ROXO
===================================================== */

.visual-panel{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    padding:
        34px
        40px;

    color:white;

    background:

        radial-gradient(
            circle at 84% 20%,
            rgba(255,255,255,.16),
            transparent 30%
        ),

        radial-gradient(
            circle at 18% 78%,
            rgba(184,120,255,.20),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            var(--purple-950) 0%,
            var(--purple-900) 35%,
            var(--purple-800) 70%,
            var(--purple-700) 100%
        );

}


.visual-panel::before,
.visual-panel::after{

    content:"";

    position:absolute;

    border-radius:
        48% 52% 42% 58%;

    border:
        1px solid
        rgba(255,255,255,.08);

    pointer-events:none;

}


.visual-panel::before{

    width:720px;

    height:720px;

    right:-330px;

    top:-260px;

    transform:
        rotate(22deg);

}


.visual-panel::after{

    width:620px;

    height:620px;

    left:-340px;

    bottom:-330px;

    transform:
        rotate(-18deg);

}


/* =====================================================
   VYNCE NO TOPO
===================================================== */

.visual-brand{

    position:relative;

    z-index:2;

    font-size:1.35rem;

    font-weight:800;

    letter-spacing:.03em;

}


/* =====================================================
   TEXTO PRINCIPAL
===================================================== */

.visual-copy{

    position:relative;

    z-index:2;

    max-width:620px;

    margin-top:
        min(24vh,230px);

}


.eyebrow{

    display:inline-flex;

    align-items:center;

    min-height:32px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:999px;

    background:
        rgba(255,255,255,.06);

    color:
        rgba(255,255,255,.86);

    font-size:.76rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.visual-copy h2{

    margin:
        22px 0 18px;

    max-width:620px;

    font-size:
        clamp(
            2.6rem,
            5vw,
            5.2rem
        );

    line-height:.98;

    letter-spacing:-.055em;

    font-weight:780;

}


.visual-copy h2 span{

    color:#c8a7ff;

}


.visual-copy p{

    max-width:560px;

    margin:0;

    color:
        rgba(255,255,255,.74);

    font-size:1rem;

    line-height:1.7;

}


/* =====================================================
   RODAPÉ ROXO
===================================================== */

.visual-footer{

    position:absolute;

    left:40px;

    right:40px;

    bottom:34px;

    z-index:2;

    display:flex;

    justify-content:
        space-between;

    gap:20px;

    color:
        rgba(255,255,255,.45);

    font-size:.75rem;

}


/* =====================================================
   ANIMAÇÃO FUNDO
===================================================== */

.visual-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(2px);

    opacity:.65;

    pointer-events:none;

    animation:
        orbFloat
        12s
        ease-in-out
        infinite
        alternate;

}


.orb-a{

    width:430px;

    height:430px;

    right:-120px;

    top:100px;

    background:

        radial-gradient(
            circle at 35% 35%,
            rgba(255,255,255,.32),
            rgba(155,92,230,.18) 35%,
            transparent 72%
        );

}


.orb-b{

    width:350px;

    height:350px;

    left:-140px;

    bottom:90px;

    background:

        radial-gradient(
            circle at 60% 40%,
            rgba(185,128,255,.26),
            transparent 68%
        );

    animation-delay:1.4s;

}


@keyframes orbFloat{

    from{

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    to{

        transform:
            translate3d(
                22px,
                -18px,
                0
            )
            scale(1.05);

    }

}


/* =====================================================
   PAINEL BRANCO
===================================================== */

.auth-panel{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
        56px 42px;

    background:#ffffff;

}


.auth-topbar{

    position:absolute;

    top:26px;

    left:34px;

    right:34px;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

}


.mini-brand{

    display:none;

    color:
        var(--purple-800);

    font-size:1.15rem;

    font-weight:800;

}


.home-link{

    margin-left:auto;

    color:
        var(--muted);

    text-decoration:none;

    font-size:.82rem;

    font-weight:650;

}


.home-link:hover{

    color:
        var(--purple-700);

}


/* =====================================================
   CONTEÚDO
===================================================== */

.auth-card{

    width:100%;

    max-width:430px;

}


/* =====================================================
   LOGO VYNCE
===================================================== */

.brand-mark{

    width:54px;

    height:54px;

    margin:
        0 auto 24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid
        var(--border);

    border-radius:14px;

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #f3eff8
        );

    box-shadow:

        0 10px 28px
        rgba(73,36,120,.10);

    overflow:hidden;

}


.brand-mark img{
    width:99%;
    height:99%;
    object-fit:contain;
    display:block;
}


/* =====================================================
   TÍTULO
===================================================== */

#titleBlock{

    margin-bottom:28px;

}


#formTitle{

    margin:
        0 0 8px;

    text-align:center;

    color:
        var(--text);

    font-size:1.9rem;

    line-height:1.1;

    font-weight:760;

    letter-spacing:-.035em;

}


.subtitle{

    margin:0;

    text-align:center;

    color:
        var(--muted);

    font-size:.9rem;

    line-height:1.5;

}


/* =====================================================
   FORMULÁRIOS
===================================================== */

form{

    display:none;

    flex-direction:column;

    gap:18px;

}


form.active{

    display:flex;

}


/* =====================================================
   CAMPOS
===================================================== */

.field{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:7px;

}


.field label{

    color:#4f4a56;

    font-size:.78rem;

    font-weight:700;

}


.field input{

    width:100%;

    height:49px;

    padding:
        0 14px;

    border:
        1px solid
        var(--border);

    border-radius:10px;

    outline:none;

    background:#ffffff;

    color:
        var(--text);

    font-size:.93rem;

    transition:

        border-color .18s ease,
        box-shadow .18s ease;

}


.field input::placeholder{

    color:#aaa5b0;

}


.field input:hover{

    border-color:
        var(--border-strong);

}


.field input:focus{

    border-color:
        var(--purple-600);

    box-shadow:

        0 0 0 3px
        rgba(111,53,185,.12);

}


/* =====================================================
   MOSTRAR SENHA
===================================================== */

.password-wrap{

    position:relative;

}


.password-wrap input{

    padding-right:76px;

}


.password-toggle{

    position:absolute;

    top:50%;

    right:12px;

    transform:
        translateY(-50%);

    border:0;

    padding:
        4px 0;

    background:
        transparent;

    color:
        var(--purple-700);

    font-size:.72rem;

    font-weight:750;

    cursor:pointer;

}


.password-toggle:hover{

    color:
        var(--purple-500);

}


/* =====================================================
   BOTÃO
===================================================== */

.btn{

    width:100%;

    height:50px;

    margin-top:2px;

    border:none;

    border-radius:10px;

    background:

        linear-gradient(
            135deg,
            var(--purple-700),
            var(--purple-600)
        );

    color:white;

    font-size:.94rem;

    font-weight:750;

    cursor:pointer;

    box-shadow:

        0 10px 24px
        rgba(77,35,134,.20);

    transition:

        transform .18s ease,
        box-shadow .18s ease;

}


.btn:hover{

    transform:
        translateY(-1px);

    box-shadow:

        0 14px 28px
        rgba(77,35,134,.26);

}


.btn:active{

    transform:
        translateY(0);

}


.btn:disabled{

    cursor:not-allowed;

    opacity:.68;

    transform:none;

}


/* =====================================================
   DIVISOR
===================================================== */

.divider{

    display:grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:center;

    gap:12px;

    margin:
        24px 0 18px;

}


.divider span{

    height:1px;

    background:
        var(--border);

}


.divider small{

    color:#a09aa8;

    font-size:.68rem;

    font-weight:700;

}


/* =====================================================
   LINKS
===================================================== */

.switch-line{

    margin:0;

    text-align:center;

    color:
        var(--muted);

    font-size:.84rem;

    line-height:1.5;

}


.switch-line +
.switch-line{

    margin-top:8px;

}


.switch-line button{

    padding:0;

    border:none;

    background:none;

    color:
        var(--purple-700);

    font-size:inherit;

    font-weight:760;

    cursor:pointer;

}


.switch-line button:hover{

    text-decoration:underline;

}


/* =====================================================
   MENSAGENS
===================================================== */

.message{

    display:none;

    margin-top:16px;

    padding:
        11px 12px;

    border:
        1px solid transparent;

    border-radius:10px;

    text-align:left;

    font-size:.8rem;

    line-height:1.45;

}


.message.show{

    display:block;

}


.message.error{

    color:
        var(--error);

    background:#fff4f5;

    border-color:#f0c6ca;

}


.message.success{

    color:
        var(--success);

    background:#f2fbf6;

    border-color:#c7e8d4;

}


/* =====================================================
   TERMOS
===================================================== */

.legal{

    margin:
        24px auto 0;

    max-width:360px;

    text-align:center;

    color:#9993a0;

    font-size:.7rem;

    line-height:1.55;

}


.legal a{

    color:#766d80;

}


.legal a:hover{

    color:
        var(--purple-700);

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1050px){

    .auth-shell{

        grid-template-columns:1fr;

    }


    .visual-panel{

        display:none;

    }


    .auth-panel{

        min-height:100vh;

        padding:
            70px 24px 42px;

    }


    .mini-brand{

        display:block;

    }


    .auth-card{

        max-width:440px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:520px){

    .auth-panel{

        padding:
            72px 20px 34px;

        align-items:flex-start;

    }


    .auth-topbar{

        top:22px;

        left:20px;

        right:20px;

    }


    .auth-card{

        max-width:none;

    }


    #formTitle{

        font-size:1.7rem;

    }


    .brand-mark{

        width:50px;

        height:50px;

    }

}


/* =====================================================
   ACESSIBILIDADE
===================================================== */

button:focus-visible,
input:focus-visible,
a:focus-visible{

    outline:

        2px solid
        var(--purple-500);

    outline-offset:3px;

}


@media(
    prefers-reduced-motion:reduce
){

    *{

        animation:none !important;

        transition:none !important;

    }

}