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

*{
    box-sizing:border-box;
}

body{
    margin:0;
    min-height:100vh;

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

    padding:50px 20px 60px;

    background:#F3F0EA;
    color:#2D1B18;

    font-family:'Outfit',sans-serif;

    overflow-x:hidden;
    overflow-y:auto;

    opacity:0;
    animation:bodyFade 1.2s ease-out forwards;
}

.container{
    width:100%;
    max-width:900px;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

/* ---------------- IMAGE ---------------- */

.chocolate-image-container{

    margin-bottom:2rem;

    opacity:0;
    transform:translateY(-15px);

    animation:imgEntrance 2.2s cubic-bezier(.16,1,.3,1) forwards .1s;
}

.chocolate-img{

    width:min(320px,80vw);
    height:auto;

    display:block;

    animation:float 6s ease-in-out infinite;
}

/* ---------------- HEADING ---------------- */

h1{

    max-width:850px;

    font-size:2.45rem;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:.08em;

    line-height:1.3;

    margin:0;

    position:relative;

    opacity:0;
    transform:translateY(15px);

    animation:textEntrance 2s cubic-bezier(.16,1,.3,1) forwards .4s;
}

h1::after{

    content:'';

    display:block;

    width:0;

    height:2px;

    background:#2D1B18;

    margin:1.8rem auto 0;

    animation:drawLine 2s cubic-bezier(.16,1,.3,1) forwards 1.3s;
}

.subtitle{

    margin-top:2rem;

    font-size:1rem;

    text-transform:uppercase;

    letter-spacing:.28em;

    opacity:0;

    animation:subtitleEntrance 1.8s ease forwards 1.7s;
}

/* ---------------- WAITLIST CARD ---------------- */

.waitlist{

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

    margin-top:3.5rem;

    padding:32px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(45,27,24,.08);

    border-radius:24px;

    box-shadow:
    0 18px 40px rgba(45,27,24,.08);

    opacity:0;
    transform:translateY(20px);

    animation:subtitleEntrance 1.5s ease forwards 2s;
}

.waitlist h3{

    margin:0;

    font-size:1.45rem;

    font-weight:600;
}

.waitlist-text{

    margin-top:10px;

    color:rgba(45,27,24,.70);

    line-height:1.7;
}

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

.waitlist-form{

    margin-top:24px;

    display:flex;
    flex-direction:column;

    gap:16px;
}

.waitlist-form input{

    width:100%;

    border:1px solid rgba(45,27,24,.12);

    background:white;

    border-radius:18px;

    padding:17px 20px;

    font-size:15px;

    font-family:inherit;

    outline:none;

    transition:.3s;
}

.waitlist-form input::placeholder{

    color:rgba(45,27,24,.45);
}

.waitlist-form input:focus{

    border-color:#2D1B18;

    box-shadow:
    0 0 0 5px rgba(45,27,24,.08),
    0 10px 25px rgba(0,0,0,.05);
}

.waitlist-form button{

    margin-top:4px;

    border:none;

    background:#2D1B18;

    color:white;

    border-radius:18px;

    padding:17px;

    font-size:16px;

    font-weight:600;

    font-family:inherit;

    cursor:pointer;

    transition:.3s;
}

.waitlist-form button:hover{

    transform:translateY(-3px);

    box-shadow:0 14px 28px rgba(45,27,24,.22);
}

.waitlist-form button:disabled{

    opacity:.7;
    cursor:not-allowed;
}

/* ---------------- TEXT ---------------- */

.privacy-text{

    display:block;

    margin-top:16px;

    font-size:.82rem;

    color:rgba(45,27,24,.55);
}

#message{

    min-height:22px;

    margin-top:14px;

    font-size:.92rem;

    animation:fadeUp .4s ease;
}

#message.success{

    color:#198754;
}

#message.error{

    color:#dc3545;
}

/* ---------------- ANIMATIONS ---------------- */

@keyframes bodyFade{

    to{
        opacity:1;
    }
}

@keyframes imgEntrance{

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes textEntrance{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes drawLine{

    to{
        width:70px;
    }
}

@keyframes subtitleEntrance{

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

@media(max-width:768px){

    body{

        padding:30px 18px 50px;
    }

    .chocolate-img{

        width:220px;
    }

    h1{

        font-size:1.9rem;

        line-height:1.35;

        letter-spacing:.05em;
    }

    .subtitle{

        margin-top:1.5rem;

        letter-spacing:.18em;
    }

    .waitlist{

        padding:24px;
        margin-top:2.5rem;
    }

    .waitlist h3{

        font-size:1.3rem;
    }
}