/* =============================================================================
   WAITLIST FORM
   ============================================================================= */


/* -----------------------------------------------------------------------------
   SECTION
----------------------------------------------------------------------------- */

.form-section{

    max-width:520px;

    margin:0 auto;

}


/* -----------------------------------------------------------------------------
   FORM
----------------------------------------------------------------------------- */

.form-section form{

    max-width:460px;

    margin:0 auto;

}


/* -----------------------------------------------------------------------------
   FIELD
----------------------------------------------------------------------------- */

.form-field{

    position:relative;

    margin-bottom:1.5rem;

}

.form-field label{

    display:block;

    margin-bottom:.4rem;

    font-size:.68rem;

    font-weight:600;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:var(--ink-faint);

    transition:color var(--speed-fast);

}

.form-field:focus-within label{

    color:var(--gold-deep);

}


/* -----------------------------------------------------------------------------
   INPUT
----------------------------------------------------------------------------- */

.form-field input{

    width:100%;

    padding:.55rem .1rem .7rem;

    border:0;

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

    background:transparent;

    color:var(--ink);

    font-size:1rem;

    outline:none;

    transition:border-color var(--speed-fast);

}

.form-field input::placeholder{

    color:rgba(120,131,148,.75);

    font-weight:300;

}

.form-field input:focus{

    border-bottom-color:var(--gold);

}


/* -----------------------------------------------------------------------------
   UNDERLINE
----------------------------------------------------------------------------- */

.form-field::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    background:var(--gold);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform var(--speed-medium);

}

.form-field:focus-within::after{

    transform:scaleX(1);

}


/* -----------------------------------------------------------------------------
   SUBMIT BUTTON
----------------------------------------------------------------------------- */

.form-submit{

    width:100%;

    margin-top:.5rem;

    padding:1rem 1.5rem;

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

    border-radius:2px;

    background:var(--ink);

    color:var(--paper);

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.2em;

    text-transform:uppercase;

    cursor:pointer;

    position:relative;

    overflow:hidden;

    transition:
        color var(--speed-medium),
        border-color var(--speed-medium);

}


/* -----------------------------------------------------------------------------
   BUTTON ANIMATION
----------------------------------------------------------------------------- */

.form-submit::before{

    content:"";

    position:absolute;

    inset:0;

    background:var(--gold);

    transform:translateY(101%);

    transition:transform .45s cubic-bezier(.16,1,.3,1);

    z-index:-1;

}

.form-submit:hover{

    color:var(--ink);

    border-color:var(--gold);

}

.form-submit:hover::before{

    transform:translateY(0);

}


/* -----------------------------------------------------------------------------
   NOTE
----------------------------------------------------------------------------- */

.form-note{

    margin-top:1rem;

    text-align:center;

    font-size:.68rem;

    line-height:1.6;

    color:var(--ink-faint);

}


/* =============================================================================
   SUCCESS MESSAGE
   ============================================================================= */

.success-message{

    text-align:center;

    padding:2rem 1rem;

    color:var(--ink);

}

.success-message h3{

    margin-bottom:1rem;

    font-size:1.6rem;

}

.success-message p{

    font-size:1rem;

    line-height:1.6;

}


/* -----------------------------------------------------------------------------
   DESKTOP
----------------------------------------------------------------------------- */

@media (min-width:769px){

}


/* -----------------------------------------------------------------------------
   MOBILE
----------------------------------------------------------------------------- */

@media (max-width:768px){

    .form-section{

        width:100%;

    }

}


/* -----------------------------------------------------------------------------
   HONEYPOT
----------------------------------------------------------------------------- */

.hp{

    position:absolute;

    width:1px;

    height:1px;

    margin:-1px;

    padding:0;

    overflow:hidden;

    clip:rect(0 0 0 0);

    clip-path:inset(50%);

    white-space:nowrap;

    border:0;

}