* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


:root {

    --background:#e9e9e7;
    --text:#151515;
    --muted:#777;
    --line:#c9c9c5;

}


body {

    background:var(--background);

    color:var(--text);

    font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

    height:100vh;

    overflow:hidden;

}




.page {

    height:100vh;

    padding:50px 70px;

}




/* HEADER */

header {

    opacity:0;

    animation:
    reveal 2.5s .5s forwards;

}


.logo {

    width:64px;

    height:64px;

    object-fit:contain;

}

.logo {

    cursor:pointer;

}

.company-name {

    margin-top:14px;

    font-size:12px;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:#555;

}




/* LINE */

.line {

    position:absolute;

    top:180px;

    left:70px;

    right:70px;

    height:1px;

    background:var(--line);

    transform:scaleX(0);

    transform-origin:left;

    animation:
    drawLine 3s 1.5s forwards;

}




/* CONTENT */

main {

    height:calc(100vh - 180px);

    display:flex;

    justify-content:flex-end;

    align-items:center;

    padding-right:12%;

    transform:translateY(-70px);

}




.content {

    width:420px;

}




.small {

    font-size:12px;

    letter-spacing:.35em;

    color:var(--muted);

    margin-bottom:35px;

    opacity:0;

    animation:
    slideIn 2s 3s forwards;

}




h1 {

    font-size:86px;

    font-weight:300;

    letter-spacing:-.06em;

    line-height:.9;

    opacity:0;

    transform:translateX(40px);

    animation:
    slideIn 2.2s 3.4s forwards;

}




.description {

    margin-top:35px;

    color:var(--muted);

    font-size:17px;

    line-height:1.5;

    opacity:0;

    animation:
    reveal 2s 4.2s forwards;

}





/* LOGIN */

.login-form {

    margin-top:70px;

}




.field {

    position:relative;

    margin-bottom:42px;

    opacity:0;

    transform:translateY(20px);

    animation:
    fieldReveal 1.8s 4.8s forwards;

}


.field:nth-child(2){

    animation-delay:5.2s;

}




input {

    width:100%;

    height:55px;

    background:none;

    border:none;

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

    outline:none;

    font-size:18px;

    color:var(--text);

    padding-top:20px;

}



input:focus {

    border-bottom-color:#151515;

}





label {

    position:absolute;

    left:0;

    top:22px;

    color:#777;

    font-size:14px;

    letter-spacing:.05em;

    transition:
    all .5s cubic-bezier(.16,1,.3,1);

    pointer-events:none;

}



input:focus + label,
input:not(:placeholder-shown) + label {

    top:0;

    font-size:11px;

    letter-spacing:.18em;

    color:#151515;

}





/* BUTTON */

button {

    position:relative;

    margin-top:15px;

    background:none;

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

    padding:16px 42px;

    font-size:14px;

    letter-spacing:.15em;

    text-transform:uppercase;

    cursor:pointer;

    opacity:0;

    animation:
    reveal 1.8s 5.8s forwards;

    transition:.4s;

}




button:hover {

    background:var(--text);

    color:white;

}




/* VERIFYING STATE */

button.verifying {

    color:#777;

    animation:
    verifyingPulse 1.5s infinite;

}



button.verifying::after {

    content:"";

    position:absolute;

    left:0;

    bottom:-2px;

    height:2px;

    width:100%;

    background:#151515;

    animation:
    verifyingLine 1.8s infinite;

}





/* ERROR MESSAGE */

.error-message {

    margin-top:25px;

    font-size:13px;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:#9b2c2c;

    opacity:0;

    transform:translateY(8px);

    transition:
    opacity 1s ease,
    transform 1s ease;

}



.error-message.show {

    opacity:1;

    transform:translateY(0);

}





/* ANIMATIONS */


@keyframes reveal {

    from {

        opacity:0;

    }

    to {

        opacity:1;

    }

}




@keyframes slideIn {

    from {

        opacity:0;

        transform:translateX(40px);

    }


    to {

        opacity:1;

        transform:translateX(0);

    }

}




@keyframes fieldReveal {

    from {

        opacity:0;

        transform:translateY(20px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}




@keyframes drawLine {

    to {

        transform:scaleX(1);

    }

}




@keyframes verifyingPulse {

    0% {

        opacity:.45;

    }


    50% {

        opacity:1;

    }


    100% {

        opacity:.45;

    }

}




@keyframes verifyingLine {

    0% {

        transform:scaleX(0);

        transform-origin:left;

    }


    50% {

        transform:scaleX(1);

    }


    100% {

        transform:scaleX(0);

        transform-origin:right;

    }

}