@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

    --bg-dark: #09090f;
    --bg-card: rgba(14,14,24,.82);

    --white: #ffffff;
    --text: #ececf5;
    --gray: #a4a7b5;

    --input: rgba(255,255,255,.06);
    --border: rgba(255,255,255,.08);

    --purple: #7c4dff;
    --purple-dark: #5a2eff;

    --cyan: #00d9ff;
    --cyan-dark: #00a8cc;

    --glass: rgba(255,255,255,.04);

    --shadow:
    0 20px 60px rgba(0,0,0,.55);

    --transition: .45s cubic-bezier(.4,0,.2,1);
}

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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html{
    scroll-behavior: smooth;
}

body{

    min-height: 100vh;

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

    overflow: hidden;

    padding: 30px;

    position: relative;

    background:
    radial-gradient(circle at top left,
    rgba(124,77,255,.30) 0%,
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(0,217,255,.20) 0%,
    transparent 35%),

    linear-gradient(
        135deg,
        #05050a 0%,
        #0b0f19 50%,
        #09090f 100%
    );
}

/* ========================================
   EFECTOS DE FONDO
======================================== */

body::before,
body::after{

    content: '';

    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(90px);

    z-index: -1;
}

body::before{

    top: -150px;
    left: -120px;

    background: rgba(124,77,255,.18);
}

body::after{

    bottom: -180px;
    right: -100px;

    background: rgba(0,217,255,.14);
}

/* ========================================
   CONTENEDOR PRINCIPAL
======================================== */

.container{

    position: relative;

    width: 1120px;
    max-width: 100%;

    min-height: 720px;

    overflow: hidden;

    border-radius: 38px;

    background: var(--bg-card);

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

    backdrop-filter: blur(18px);

    box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 25px 80px rgba(0,0,0,.70),
    0 0 120px rgba(124,77,255,.14);

    isolation: isolate;
}

.container::before{

    content: '';

    position: absolute;

    inset: 0;

    background:
    linear-gradient(
        120deg,
        rgba(255,255,255,.03),
        transparent 30%,
        transparent 70%,
        rgba(255,255,255,.02)
    );

    pointer-events: none;
}

/* ========================================
   FORMULARIOS
======================================== */

.form-container{

    position: absolute;

    top: 0;

    width: 50%;
    height: 100%;

    transition: var(--transition);
}

.sign-in{

    left: 0;

    z-index: 2;
}

.sign-up{

    left: 0;

    opacity: 0;

    z-index: 1;
}

/* ========================================
   ACTIVAR REGISTRO
======================================== */

.container.active .sign-in{

    transform: translateX(100%);
    opacity: 0;
}

.container.active .sign-up{

    transform: translateX(100%);
    opacity: 1;

    z-index: 5;
}

/* ========================================
   FORMULARIOS
======================================== */

.container form{

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 0 75px;

    background:
    linear-gradient(
        180deg,
        rgba(13,13,24,.94),
        rgba(10,10,18,.92)
    );

    position: relative;
}

.container form::before{

    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );
}

.container h1{

    font-size: 52px;
    font-weight: 800;

    color: var(--white);

    line-height: 1.05;

    margin-bottom: 12px;

    letter-spacing: -.5px;
}

.form-text{

    color: var(--gray);

    font-size: 15px;

    line-height: 1.7;

    margin-bottom: 35px;
}

/* ========================================
   INPUTS
======================================== */

.input-group{

    position: relative;

    width: 100%;

    margin-bottom: 22px;
}

.input-group i{

    position: absolute;

    top: 50%;
    left: 20px;

    transform: translateY(-50%);

    color: #9398ad;

    font-size: 15px;

    transition: .3s ease;
}

.input-group input{

    width: 100%;
    height: 62px;

    border: 1px solid transparent;

    outline: none;

    border-radius: 20px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.03)
    );

    padding: 0 58px;

    color: var(--white);

    font-size: 15px;
    font-weight: 500;

    transition: .35s ease;

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);
}

.input-group input::placeholder{

    color: #8d91a7;
}

.input-group:hover input{

    border-color: rgba(255,255,255,.06);
}

.input-group input:focus{

    border-color: rgba(0,217,255,.45);

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.04)
    );

    box-shadow:
    0 0 0 5px rgba(0,217,255,.07),
    0 0 25px rgba(0,217,255,.12);
}

.input-group input:focus + .btn-toggle,
.input-group input:focus ~ i{

    color: var(--cyan);
}

/* ========================================
   BOTÓN OJO
======================================== */

.btn-toggle{

    position: absolute;

    top: 50%;
    right: 18px;

    transform: translateY(-50%);

    border: none;
    outline: none;

    background: transparent;

    color: #9096aa;

    cursor: pointer;

    transition: .3s ease;
}

.btn-toggle:hover{

    color: var(--cyan);

    transform:
    translateY(-50%)
    scale(1.08);
}

/* ========================================
   FUERZA PASSWORD
======================================== */

.strength-wrapper{

    width: 100%;
    height: 8px;

    overflow: hidden;

    margin-top: -6px;
    margin-bottom: 28px;

    border-radius: 50px;

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

#strength-bar{

    width: 0%;
    height: 100%;

    border-radius: 50px;

    transition: .4s ease;
}

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

.forgot-link,
.visitor-link{

    width: fit-content;

    text-decoration: none;

    color: #d3d8eb;

    font-size: 14px;
    font-weight: 500;

    position: relative;

    transition: .3s ease;
}

.forgot-link{

    margin-top: -2px;
    margin-bottom: 12px;
}

.visitor-link{

    margin-top: 20px;
}

.forgot-link::after,
.visitor-link::after{

    content: '';

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 0%;
    height: 2px;

    border-radius: 10px;

    background: var(--cyan);

    transition: .3s ease;
}

.forgot-link:hover,
.visitor-link:hover{

    color: var(--cyan);
}

.forgot-link:hover::after,
.visitor-link:hover::after{

    width: 100%;
}

/* ========================================
   BOTÓN PRINCIPAL
======================================== */

.btn-primary{

    width: 100%;
    height: 62px;

    border: none;

    border-radius: 20px;

    margin-top: 22px;

    cursor: pointer;

    color: var(--white);

    font-size: 15px;
    font-weight: 700;

    letter-spacing: .6px;

    position: relative;

    overflow: hidden;

    background:
    linear-gradient(
        135deg,
        var(--purple) 0%,
        #6f45ff 30%,
        var(--cyan) 100%
    );

    transition: .35s ease;

    box-shadow:
    0 15px 35px rgba(124,77,255,.28);
}

.btn-primary::before{

    content: '';

    position: absolute;

    top: 0;
    left: -120%;

    width: 100%;
    height: 100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.30),
        transparent
    );

    transition: .7s ease;
}

.btn-primary:hover::before{

    left: 120%;
}

.btn-primary:hover{

    transform: translateY(-4px);

    box-shadow:
    0 18px 40px rgba(124,77,255,.30),
    0 10px 30px rgba(0,217,255,.18);
}

.btn-primary:active{

    transform: scale(.98);
}

/* ========================================
   PANEL DERECHO
======================================== */

.toggle-container{

    position: absolute;

    top: 0;
    left: 50%;

    width: 50%;
    height: 100%;

    overflow: hidden;

    border-radius: 140px 0 0 140px;

    transition: var(--transition);

    z-index: 1000;
}

.container.active .toggle-container{

    transform: translateX(-100%);

    border-radius: 0 140px 140px 0;
}

.toggle{

    position: relative;

    left: -100%;

    width: 200%;
    height: 100%;

    transition: var(--transition);

    background:
    linear-gradient(
        145deg,
        #5a2eff 0%,
        #7040ff 30%,
        #7c4dff 60%,
        #00bfff 100%
    );
}

.toggle::before{

    content: '';

    position: absolute;

    inset: 0;

    background:
    radial-gradient(
        circle at top,
        rgba(255,255,255,.16),
        transparent 35%
    );

    pointer-events: none;
}

.container.active .toggle{

    transform: translateX(50%);
}

/* ========================================
   PANEL INTERNO
======================================== */

.toggle-panel{

    position: absolute;

    width: 50%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    padding: 80px;

    color: #ffffff;
}

.toggle-panel h1{

    font-size: 58px;

    font-weight: 800;

    line-height: 1.05;

    margin-bottom: 18px;
}

.toggle-panel p{

    font-size: 16px;

    line-height: 1.9;

    max-width: 420px;

    opacity: .96;

    margin-bottom: 38px;
}

/* ========================================
   BOTÓN SECUNDARIO
======================================== */

.btn-outline{

    width: 240px;
    height: 58px;

    border-radius: 18px;

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

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

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    backdrop-filter: blur(10px);

    transition: .35s ease;

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);
}

.btn-outline:hover{

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

    transform: translateY(-4px);

    box-shadow:
    0 15px 30px rgba(0,0,0,.18);
}

/* ========================================
   ANIMACIONES
======================================== */

.toggle-left{

    transform: translateX(-200%);
}

.container.active .toggle-left{

    transform: translateX(0);
}

.toggle-right{

    right: 0;
}

.container.active .toggle-right{

    transform: translateX(200%);
}

/* ========================================
   ALERTAS
======================================== */

.alert{

    position: fixed;

    top: 28px;
    right: 28px;

    padding: 16px 24px;

    border-radius: 16px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    z-index: 9999;

    backdrop-filter: blur(14px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.30);

    animation: fadeIn .4s ease;
}

.alert.success{

    background:
    linear-gradient(
        135deg,
        #00c853,
        #009624
    );
}

.alert.error{

    background:
    linear-gradient(
        135deg,
        #ff1744,
        #d50000
    );
}

@keyframes fadeIn{

    from{

        opacity: 0;

        transform:
        translateY(-12px)
        scale(.95);
    }

    to{

        opacity: 1;

        transform:
        translateY(0)
        scale(1);
    }
}

/* ========================================
   RESPONSIVE
======================================== */

@media(max-width: 980px){

    body{

        padding: 0;
    }

    .container{

        width: 100%;

        min-height: 100vh;

        border-radius: 0;
    }

    .toggle-container{

        display: none;
    }

    .form-container{

        width: 100%;
    }

    .container form{

        padding: 50px 32px;
    }

    .container h1{

        font-size: 42px;
    }

    .sign-in,
    .sign-up{

        width: 100%;
    }

    .container.active .sign-up{

        transform: translateX(0);
    }

    .container.active .sign-in{

        transform: translateX(-100%);
    }
}

@media(max-width: 480px){

    .container form{

        padding: 35px 22px;
    }

    .container h1{

        font-size: 34px;
    }

    .form-text{

        font-size: 14px;
    }

    .input-group input{

        height: 58px;

        font-size: 14px;
    }

    .btn-primary{

        height: 58px;
    }

    .alert{

        left: 15px;
        right: 15px;

        top: 15px;

        width: auto;
    }
}