/*====================================================
MONSCO COFFEE™
WELCOME PAGE
CLEAN RESPONSIVE BUILD
====================================================*/

:root{
    --purple:#4b126e;
    --purple-dark:#2c0b45;
    --gold:#d7a83f;

    --text:#2a2140;
    --muted:#8d8795;

    --border:#e7e3eb;
    --error:#c93636;

    --white:#ffffff;
}


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

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

html,
body{
    width:100%;
    min-height:100%;
}

body{
    overflow-x:hidden;

    font-family:
        "Montserrat",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:var(--text);

    background:var(--white);
}

img{
    display:block;
    max-width:100%;
}

button,
input,
a{
    font:inherit;
}

button{
    border:0;
}

.visually-hidden{
    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;
}


/*====================================================
PAGE
MOBILE FIRST
====================================================*/

.welcome-page{
    width:100%;
    min-height:100svh;

    display:flex;

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

    padding:
        8px
        16px
        12px;

    background:#ffffff;
}


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

IMPORTANT:
On iPhone SE:
375px viewport
- 32px left/right padding
= 343px available width

This container therefore CANNOT overflow.
====================================================*/

.welcome-container{
    width:100%;
    max-width:343px;

    margin:0 auto;

    display:flex;
    flex-direction:column;

    align-items:center;
}


/*====================================================
BRAND
====================================================*/

.brand-section{
    width:100%;

    display:flex;
    flex-direction:column;

    align-items:center;

    margin-bottom:6px;
}


.brand-wordmark{
    width:78%;
    max-width:268px;

    height:auto;
}


.brand-tagline{
    width:60%;
    max-width:206px;

    height:auto;

    margin-top:1px;
}


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

.welcome-form{
    width:100%;

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:6px;
}


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

.input-field{
    width:100%;

    height:46px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:
        0
        14px;

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

    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 4px 12px
        rgba(46,18,69,.05);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.input-field:focus-within{
    border-color:#9c78b7;

    box-shadow:
        0 0 0 3px
        rgba(75,18,110,.07);
}


/* ICON */

.input-icon{
    width:20px;
    height:20px;

    flex:
        0
        0
        20px;

    display:flex;

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

    color:#77568e;
}


.input-icon svg{
    width:20px;
    height:20px;
}


/* TEXT INPUT */

.input-field input{
    flex:1;

    min-width:0;

    height:100%;

    border:0;
    outline:0;

    background:transparent;

    color:var(--text);

    font-size:14px;

    font-weight:500;
}


.input-field input::placeholder{
    color:#a39aaa;
}


/*====================================================
FORM MESSAGE
====================================================*/

.form-message{
    width:100%;

    color:var(--error);

    font-size:11px;

    font-weight:600;

    line-height:1.2;

    text-align:center;
}


.form-message:empty{
    display:none;
}


/*====================================================
MOCO MONSTER
====================================================*/

.mascot-section{
    width:100%;

    display:flex;

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


.moco-monster{
    width:150px;

    max-width:44%;

    height:auto;
}


/*====================================================
ORDER BUTTON
====================================================*/

.order-button{
    width:74%;

    max-width:255px;

    margin:0;

    padding:0;

    display:flex;

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

    background:transparent;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        transform .18s ease;
}


.order-button img{
    width:100%;

    height:auto;
}


.order-button:hover{
    transform:translateY(-2px);
}


.order-button:active{
    transform:scale(.98);
}


/*====================================================
DOWNLOAD
====================================================*/

.download-section{
    width:100%;

    margin-top:4px;

    display:flex;
    flex-direction:column;

    align-items:center;

    text-align:center;
}


.download-section h2{
    width:100%;

    color:var(--text);

    font-size:13px;

    font-weight:700;

    line-height:1.2;

    text-align:center;
}


.download-section p{
    width:100%;

    margin-top:2px;

    color:var(--muted);

    font-size:10px;

    font-weight:500;

    line-height:1.2;

    text-align:center;
}


/*====================================================
STORE BADGES
====================================================*/

.store-links{
    width:100%;

    margin-top:5px;

    display:flex;

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

    gap:8px;

    flex-wrap:nowrap;
}


.store-link{
    width:124px;

    max-width:40%;

    display:flex;

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


.store-link img{
    width:100%;

    height:30px;

    object-fit:contain;
}


/*====================================================
LOADING
====================================================*/

.loading-screen{
    position:fixed;

    inset:0;

    z-index:9999;

    display:none;

    flex-direction:column;

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

    gap:16px;

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


.loading-screen.active{
    display:flex;
}


.loading-spinner{
    width:46px;
    height:46px;

    border:
        4px solid
        rgba(75,18,110,.14);

    border-top-color:
        var(--purple);

    border-radius:50%;

    animation:
        loading-spin
        .75s
        linear
        infinite;
}


.loading-screen p{
    color:var(--purple-dark);

    font-size:14px;

    font-weight:700;
}


@keyframes loading-spin{

    to{
        transform:rotate(360deg);
    }

}


/*====================================================
ALL PHONES
iPhone SE through Pro Max + Android phones
====================================================*/

@media (max-width:600px){

    .welcome-page{
        width:100%;
        min-height:100svh;

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

        padding:
            max(10px, env(safe-area-inset-top))
            16px
            max(10px, env(safe-area-inset-bottom));

        overflow-x:hidden;
    }


    .welcome-container{
        width:100%;
        max-width:390px;

        margin:auto;

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


    .brand-section{
        width:100%;

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

        margin-bottom:6px;
    }


    .brand-wordmark{
        width:min(80%,305px);
        height:auto;

        margin-inline:auto;
    }


    .brand-tagline{
        width:min(62%,238px);
        height:auto;

        margin:
            2px
            auto
            0;
    }


    .welcome-form{
        width:100%;

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

        gap:6px;
    }


    .input-field{
        width:100%;
        max-width:100%;

        height:48px;

        margin-inline:auto;

        padding:
            0
            14px;
    }


    .input-field input{
        width:100%;
        min-width:0;

        font-size:14px;
    }


    .mascot-section{
        width:100%;

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

        margin:0;
    }


    .moco-monster{
        width:min(46vw,175px);
        height:auto;

        margin-inline:auto;
    }


    .order-button{
        width:min(76%,285px);

        margin:
            0
            auto;

        padding:0;
    }


    .order-button img{
        width:100%;
        height:auto;
    }


    .download-section{
        width:100%;

        margin-top:4px;

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

        text-align:center;
    }


    .download-section h2{
        width:100%;

        font-size:14px;

        text-align:center;
    }


    .download-section p{
        width:100%;

        margin-top:2px;

        font-size:10px;

        text-align:center;
    }


    .store-links{
        width:100%;

        margin-top:5px;

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

        gap:8px;

        flex-wrap:nowrap;
    }


    .store-link{
        width:min(36vw,135px);
    }


    .store-link img{
        width:100%;
        height:32px;

        object-fit:contain;
    }

}


/*====================================================
SHORT PHONES
iPhone SE / smaller-height screens

If the complete interface is taller than the phone,
do NOT force vertical center because that would cut
the top and bottom. Allow scrolling naturally.
====================================================*/

@media (max-width:600px) and (max-height:720px){

    .welcome-page{
        align-items:flex-start;

        padding-top:
            max(6px, env(safe-area-inset-top));

        padding-bottom:
            max(8px, env(safe-area-inset-bottom));
    }


    .welcome-container{
        margin:
            0
            auto;
    }


    .brand-wordmark{
        width:min(74%,270px);
    }


    .brand-tagline{
        width:min(56%,205px);
    }


    .brand-section{
        margin-bottom:4px;
    }


    .welcome-form{
        gap:4px;
    }


    .input-field{
        height:44px;
    }


    .moco-monster{
        width:min(39vw,145px);
    }


    .order-button{
        width:min(68%,245px);
    }


    .download-section{
        margin-top:2px;
    }


    .download-section h2{
        font-size:12px;
    }


    .download-section p{
        font-size:9px;
    }


    .store-links{
        margin-top:3px;
    }


    .store-link img{
        height:28px;
    }

}

/*====================================================
TABLETS
====================================================*/

@media (min-width:601px) and (max-width:1100px){

    .welcome-page{
    width:100%;
    min-height:100svh;

    display:flex;

    justify-content:center;   /* left ↔ right */
    align-items:center;       /* top ↕ bottom */

    padding:
        max(20px, env(safe-area-inset-top))
        20px
        max(20px, env(safe-area-inset-bottom));
}


    .welcome-container{
    width:100%;
    max-width:430px;

    margin:auto;

    display:flex;
    flex-direction:column;

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


    .brand-wordmark{
        width:82%;

        max-width:340px;
    }


    .brand-tagline{
        width:64%;

        max-width:260px;
    }


    .input-field{
        height:54px;
    }


    .moco-monster{
        width:205px;

        max-width:50%;
    }


    .order-button{
        width:78%;

        max-width:315px;
    }


    .download-section h2{
        font-size:15px;
    }


    .download-section p{
        font-size:12px;
    }


    .store-link{
        width:145px;
    }


    .store-link img{
        height:38px;
    }

}


/*====================================================
DESKTOP
====================================================*/

@media (min-width:1101px){

    .welcome-page{
        padding:
            18px
            20px
            22px;
    }


    .welcome-container{
        max-width:420px;
    }


    .brand-wordmark{
        width:82%;

        max-width:320px;
    }


    .brand-tagline{
        width:64%;

        max-width:250px;
    }


    .input-field{
        height:52px;
    }


    .moco-monster{
        width:190px;

        max-width:52%;
    }


    .order-button{
        width:78%;

        max-width:300px;
    }


    .download-section h2{
        font-size:15px;
    }


    .download-section p{
        font-size:11px;
    }


    .store-link{
        width:138px;
    }


    .store-link img{
        height:38px;
    }

}


/*====================================================
SHORT LAPTOP HEIGHT
====================================================*/

@media (min-width:601px) and (max-height:900px){

    .welcome-page{
        padding:
            8px
            18px
            12px;
    }


    .brand-section{
        margin-bottom:5px;
    }


    .welcome-form{
        gap:5px;
    }


    .input-field{
        height:48px;
    }


    .moco-monster{
        width:178px;
    }


    .order-button{
        max-width:288px;
    }


    .download-section{
        margin-top:3px;
    }


    .store-links{
        margin-top:4px;
    }


    .store-link img{
        height:34px;
    }

}


/*====================================================
ACCESSIBILITY
====================================================*/

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;
    }

}