/* =========================================================
   OWARA — LOGIN NEON
   ========================================================= */


/* =========================================================
   VARIÁVEIS
   ========================================================= */

   :root {

    --owara-black: #020204;
    --owara-black-soft: #08050d;

    --owara-pink: #ff0a87;
    --owara-pink-light: #ff3ca6;

    --owara-purple: #a000ff;
    --owara-purple-dark: #6800a8;

    --owara-blue: #304cff;
    --owara-blue-light: #4868ff;

    --owara-white: #ffffff;
    --owara-text: #e9e5eb;

    --owara-muted: #85808c;
    --owara-muted-dark: #625b66;

}


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

* {

    box-sizing: border-box;

}


html,
body {

    width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;

}


body {

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    background:
        var(--owara-black);

    color:
        var(--owara-white);

}


/* =========================================================
   BODY LOGIN
   ========================================================= */

.login-body {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(130, 0, 115, .15),
            transparent 28%
        ),

        radial-gradient(
            circle at 15% 70%,
            rgba(255, 0, 128, .08),
            transparent 25%
        ),

        radial-gradient(
            circle at 90% 25%,
            rgba(40, 0, 255, .12),
            transparent 30%
        ),

        #020204;

}


/* =========================================================
   CONTAINER
   ========================================================= */

.login-container {

    position: relative;

    z-index: 10;

}


/* =========================================================
   FUNDO DECORATIVO
   ========================================================= */

.login-background {

    position: fixed;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;

}


/* =========================================================
   PARTÍCULAS
   ========================================================= */

.particles {

    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

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

    box-shadow:

        80px 30px rgba(255,255,255,.25),
        180px 140px rgba(255,255,255,.35),
        320px 70px rgba(255,255,255,.25),
        480px 170px rgba(255,255,255,.30),
        650px 80px rgba(255,255,255,.35),
        800px 220px rgba(255,255,255,.25),
        1000px 100px rgba(255,255,255,.35),
        1150px 260px rgba(255,255,255,.25),
        1300px 130px rgba(255,255,255,.30);

}


.particles-one {

    top: 8%;
    left: 8%;

}


.particles-two {

    top: 35%;
    right: 12%;

    opacity: .5;

}


.particles-three {

    bottom: 15%;
    left: 30%;

    opacity: .35;

}


/* =========================================================
   ONDAS NEON
   ========================================================= */

.neon-wave {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


/* =========================================================
   ONDA ROSA — ESQUERDA INFERIOR
   ========================================================= */

.wave-one {

    width: 900px;
    height: 360px;

    left: -330px;
    bottom: -130px;

    transform:
        rotate(-20deg);

    border-top:
        2px solid
        rgba(255, 0, 130, .75);

    box-shadow:

        0 -15px 0
        rgba(255, 0, 130, .18),

        0 -30px 0
        rgba(255, 0, 130, .12),

        0 -45px 0
        rgba(255, 0, 130, .08);

}


/* =========================================================
   ONDA AZUL — DIREITA SUPERIOR
   ========================================================= */

.wave-two {

    width: 900px;
    height: 360px;

    right: -390px;
    top: -110px;

    transform:
        rotate(30deg);

    border-top:
        3px solid
        rgba(50, 40, 255, .75);

    box-shadow:

        0 18px 0
        rgba(70, 30, 255, .25),

        0 36px 0
        rgba(70, 30, 255, .17),

        0 54px 0
        rgba(70, 30, 255, .10);

}


/* =========================================================
   ONDA EXTRA
   ========================================================= */

.wave-three {

    width: 750px;
    height: 300px;

    right: -500px;
    bottom: -220px;

    transform:
        rotate(-15deg);

    border-top:
        1px solid
        rgba(255, 0, 180, .30);

}


/* =========================================================
   LOGIN ORBIT
   ========================================================= */

.login-orbit {

    position: relative;

    width: 650px;
    height: 650px;

    display: flex;

    align-items: center;
    justify-content: center;

}


/* =========================================================
   BRILHO EXTERIOR
   ========================================================= */

.orbit-glow {

    position: absolute;

    inset: -38px;

    border-radius: 50%;

    background:

        conic-gradient(
            from 0deg,

            var(--owara-pink),

            var(--owara-purple),

            var(--owara-blue),

            var(--owara-pink)
        );

    filter:
        blur(45px);

    opacity: .30;

    animation:
        glowPulse 4s
        ease-in-out
        infinite;

}


/* =========================================================
   ANIMAÇÃO DO BRILHO
   ========================================================= */

@keyframes glowPulse {

    0%,
    100% {

        opacity: .22;

        transform:
            scale(.98);

    }

    50% {

        opacity: .42;

        transform:
            scale(1.03);

    }

}


/* =========================================================
   CÍRCULO PRINCIPAL
   ========================================================= */

.login-circle {

    position: relative;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    padding: 4px;

    background:

        conic-gradient(
            from 210deg,

            var(--owara-pink),

            #ff277c,

            var(--owara-purple),

            var(--owara-blue),

            #263aff,

            var(--owara-pink)
        );

    box-shadow:

        0 0 25px
        rgba(255, 0, 150, .50),

        0 0 65px
        rgba(110, 0, 255, .30),

        inset 0 0 20px
        rgba(255, 255, 255, .06);

}


/* =========================================================
   INTERIOR DO CÍRCULO
   ========================================================= */

.login-circle::before {

    content: "";

    position: absolute;

    inset: 4px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 50% 25%,
            rgba(155, 0, 100, .32),
            transparent 43%
        ),

        radial-gradient(
            circle at 25% 80%,
            rgba(60, 0, 140, .35),
            transparent 45%
        ),

        radial-gradient(
            circle at 85% 65%,
            rgba(20, 30, 150, .18),
            transparent 35%
        ),

        #160b1d;

}


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

.login-content {

    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding:
        65px 105px;

    text-align: center;

}


/* =========================================================
   LOGOTIPO
   ========================================================= */

.login-logo {

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 16px;

}


/* =========================================================
   CÍRCULO DO LOGOTIPO
   ========================================================= */

.logo-ring {

    width: 72px;
    height: 72px;

    padding: 2px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background:

        linear-gradient(
            135deg,

            var(--owara-pink),

            var(--owara-purple),

            var(--owara-blue)
        );

    box-shadow:

        0 0 15px
        rgba(255, 0, 150, .35),

        0 0 30px
        rgba(100, 0, 255, .18);

}


/* =========================================================
   IMAGEM DO LOGOTIPO
   ========================================================= */

   .logo-ring img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;


 

    border-radius: 50%;

    background:
        #110b18;

}


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

.login-title {

    margin-bottom: 20px;

}


.login-title h1 {

    margin: 0;

    color:
        var(--owara-white);

    font-size: 34px;

    line-height: 1.1;

    font-weight: 700;

    letter-spacing:
        -.8px;

}


.login-title p {

    margin:

        5px 0 0;

    color:
        #88818d;

    font-size:
        9px;

}


/* =========================================================
   ALERTA DE ERRO
   ========================================================= */

.login-error {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-bottom: 12px;

    padding: 7px 10px;

    border-radius: 8px;

    background:
        rgba(255, 40, 100, .08);

    border:
        1px solid
        rgba(255, 40, 100, .20);

    color:
        #ff7197;

    font-size:
        8px;

}


/* =========================================================
   FORMULÁRIO
   ========================================================= */

.login-form {

    width: 100%;

}


/* =========================================================
   INPUT NEON
   ========================================================= */

.neon-input {

    position: relative;

    width: 100%;

    height: 46px;

    margin-bottom: 14px;

    padding: 1px;

    border-radius: 25px;

    background:

        linear-gradient(
            90deg,

            rgba(255, 0, 145, .85),

            rgba(112, 0, 255, .80),

            rgba(45, 70, 255, .85)
        );

}


/* =========================================================
   INTERIOR DO INPUT
   ========================================================= */

.neon-input::before {

    content: "";

    position: absolute;

    inset: 1px;

    border-radius: 25px;

    background:
        rgba(17, 7, 24, .96);

}


/* =========================================================
   ÍCONE DO INPUT
   ========================================================= */

.neon-input > i {

    position: absolute;

    z-index: 3;

    left: 17px;

    top: 50%;

    transform:
        translateY(-50%);

    color:
        #a59aaa;

    font-size:
        11px;

}


/* =========================================================
   INPUT
   ========================================================= */

.neon-input input {

    position: relative;

    z-index: 4;

    width: 100%;
    height: 100%;

    border: none;
    outline: none;

    background:
        transparent;

    color:
        #ffffff;

    padding:
        0 45px;

    font-family:
        inherit;

    font-size:
        12px;

}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.neon-input input::placeholder {

    color:
        #918794;

    opacity: 1;

}


/* =========================================================
   FOCO INPUT
   ========================================================= */

.neon-input:focus-within {

    box-shadow:

        0 0 10px
        rgba(255, 0, 150, .20),

        0 0 20px
        rgba(100, 0, 255, .12);

}


/* =========================================================
   BOTÃO MOSTRAR PASSWORD
   ========================================================= */

.password-toggle {

    position: absolute;

    z-index: 5;

    right: 16px;

    top: 50%;

    transform:
        translateY(-50%);

    border: none;

    outline: none;

    background:
        transparent;

    color:
        #958b9a;

    font-size:
        10px;

    cursor: pointer;

    padding: 3px;

}


.password-toggle:hover {

    color:
        #ffffff;

}


/* =========================================================
   OPÇÕES DO LOGIN
   ========================================================= */

.login-options {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin:
        2px 0 18px;

    color:
        #817986;

    font-size:
        9px;

}


/* =========================================================
   REMEMBER ME
   ========================================================= */

.remember-me {

    display: flex;

    align-items: center;

    gap: 6px;

    cursor: pointer;

    margin: 0;

}


/* =========================================================
   CHECKBOX
   ========================================================= */

.remember-me input {

    appearance: none;

    width: 10px;
    height: 10px;

    margin: 0;

    border:
        1px solid
        #715f74;

    border-radius: 3px;

    background:
        transparent;

    cursor: pointer;

}


.remember-me input:checked {

    border-color:
        var(--owara-pink);

    background:

        linear-gradient(
            135deg,

            var(--owara-pink),

            var(--owara-purple)
        );

}


/* =========================================================
   FORGOT PASSWORD
   ========================================================= */

.forgot-password {

    color:
        #d74dca;

    font-size:
        9px;

    text-decoration:
        none;

    transition:
        .2s ease;

}


.forgot-password:hover {

    color:
        #ff67d4;

}


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

.login-button {

    position: relative;

    width: 100%;

    height: 46px;

    border: none;

    border-radius: 25px;

    background:

        linear-gradient(
            90deg,

            #ff087c,

            #b000ff,

            #314fff
        );

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    box-shadow:

        0 8px 25px
        rgba(177, 0, 255, .30);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


/* =========================================================
   ÍCONE DO BOTÃO
   ========================================================= */

.login-button i {

    position: absolute;

    right: 18px;

    font-size:
        11px;

}


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

.login-button:hover {

    transform:
        translateY(-2px);

    box-shadow:

        0 10px 30px
        rgba(255, 0, 150, .40);

}


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

.login-button:active {

    transform:
        translateY(0);

}


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

.login-divider {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    margin:
        20px 0 12px;

    color:
        #675f6c;

    font-size:
        7px;

}


.login-divider::before,
.login-divider::after {

    content: "";

    flex: 1;

    height: 1px;

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

}


/* =========================================================
   LOGIN SOCIAL
   ========================================================= */

.social-login {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}


/* =========================================================
   BOTÕES SOCIAIS
   ========================================================= */

.social-button {

    width: 32px;
    height: 32px;

    border-radius: 50%;

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

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

    color:
        #b7acbb;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size:
        10px;

    cursor:
        pointer;

    transition:
        .25s ease;

}


.social-button:hover {

    border-color:
        var(--owara-pink);

    color:
        #ffffff;

    box-shadow:

        0 0 12px
        rgba(255, 0, 150, .25);

    transform:
        translateY(-2px);

}


/* =========================================================
   REGISTO
   ========================================================= */

.register-text {

    margin-top:
        15px;

    color:
        #716875;

    font-size:
        8px;

}


.register-text a {

    color:
        #ed43bd;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        .2s ease;

}


.register-text a:hover {

    color:
        #ff67d4;

}


/* =========================================================
   VOLTAR AO SITE
   ========================================================= */

.back-site {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top:
        9px;

    color:
        #625b66;

    font-size:
        8px;

    text-decoration:
        none;

    transition:
        .2s ease;

}


.back-site:hover {

    color:
        #ffffff;

}


/* =========================================================
   HOVER LOGO
   ========================================================= */

.logo-ring {

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.logo-ring:hover {

    transform:
        scale(1.05);

    box-shadow:

        0 0 20px
        rgba(255, 0, 150, .45),

        0 0 40px
        rgba(100, 0, 255, .25);

}


/* =========================================================
   RESPONSIVO — TABLET
   ========================================================= */

@media (max-width: 768px) {

    .login-orbit {

        width: 560px;
        height: 560px;

    }


    .login-circle {

        width: 520px;
        height: 520px;

    }


    .login-content {

        padding:
            55px 90px;

    }


    .login-title h1 {

        font-size:
            30px;

    }


    .logo-ring {

        width: 64px;
        height: 64px;

    }


    .logo-ring img {

        width: 58px;
        height: 58px;

    }

}


/* =========================================================
   RESPONSIVO — TELEMÓVEL
   ========================================================= */

@media (max-width: 576px) {

    body {

        overflow:
            hidden;

    }


    .login-orbit {

        width: 390px;
        height: 390px;

    }


    .login-circle {

        width: 365px;
        height: 365px;

    }


    .login-content {

        padding:
            38px 55px;

    }


    .login-logo {

        margin-bottom:
            10px;

    }


    .logo-ring {

        width: 48px;
        height: 48px;

    }


    .logo-ring img {

        width: 43px;
        height: 43px;

        padding:
            6px;

    }


    .login-title {

        margin-bottom:
            12px;

    }


    .login-title h1 {

        font-size:
            24px;

    }


    .login-title p {

        font-size:
            7px;

    }


    .neon-input {

        height:
            35px;

        margin-bottom:
            10px;

    }


    .neon-input input {

        font-size:
            9px;

        padding:
            0 35px;

    }


    .neon-input > i {

        left:
            13px;

        font-size:
            8px;

    }


    .password-toggle {

        right:
            11px;

        font-size:
            8px;

    }


    .login-options {

        font-size:
            7px;

        margin-bottom:
            12px;

    }


    .forgot-password {

        font-size:
            7px;

    }


    .login-button {

        height:
            35px;

        font-size:
            9px;

    }


    .login-button i {

        right:
            13px;

        font-size:
            8px;

    }


    .login-divider {

        margin:
            13px 0 9px;

        font-size:
            6px;

    }


    .social-button {

        width:
            25px;

        height:
            25px;

        font-size:
            8px;

    }


    .register-text {

        margin-top:
            10px;

        font-size:
            6px;

    }


    .back-site {

        font-size:
            6px;

    }

}


/* =========================================================
   RESPONSIVO — TELEMÓVEL PEQUENO
   ========================================================= */

@media (max-width: 390px) {

    .login-orbit {

        width: 340px;
        height: 340px;

    }


    .login-circle {

        width: 320px;
        height: 320px;

    }


    .login-content {

        padding:
            32px 45px;

    }


    .login-title h1 {

        font-size:
            21px;

    }


    .logo-ring {

        width:
            42px;

        height:
            42px;

    }


    .logo-ring img {

        width:
            37px;

        height:
            37px;

    }


    .neon-input {

        height:
            32px;

    }


    .login-button {

        height:
            32px;

    }

}


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

.login-button:focus-visible,
.social-button:focus-visible,
.password-toggle:focus-visible,
.forgot-password:focus-visible,
.back-site:focus-visible {

    outline:
        2px solid
        var(--owara-pink);

    outline-offset:
        3px;

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    .orbit-glow {

        animation:
            none;

    }


    .login-button,
    .social-button,
    .logo-ring {

        transition:
            none;

    }

}