/* ------------------------------
   RESET
------------------------------ */

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


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


body {
    font-family: Helvetica, Arial, sans-serif;

    background: #000;

    color: #fff;

    overflow: hidden;
}



/* ------------------------------
   LANDING PAGE
------------------------------ */

.landing {
    width: 100vw;

    height: 100vh;

    height: 100dvh;

    position: relative;


    background-image:

        linear-gradient(
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.18)
        ),

        url("Images/background.jpg");


    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}



/* ------------------------------
   LOGO
------------------------------ */

.logo {
    position: absolute;

    top: 28px;

    left: 35px;


    font-size: 13px;

    font-weight: 400;


    letter-spacing: 0.32em;


    white-space: nowrap;


    z-index: 5;
}



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

.scouted {
    position: absolute;


    top: 50%;

    left: 50%;


    transform:
        translate(-50%, -50%);


    width: 90%;


    text-align: center;


    z-index: 2;
}


.scouted h1 {
    font-size:
        clamp(34px, 4.5vw, 65px);


    font-weight: 400;


    letter-spacing: 0.025em;


    line-height: 1.1;


    text-transform: lowercase;


    margin-bottom: 28px;
}


.scouted p {
    font-size: 9px;


    font-weight: 400;


    letter-spacing: 0.12em;


    line-height: 1.6;


    text-transform: lowercase;
}



/* ------------------------------
   APPLY BUTTON
------------------------------ */

.apply-button {
    position: absolute;


    left: 50%;

    bottom: 80px;


    transform:
        translateX(-50%);


    border: none;


    background: #fff;

    color: #000;


    padding: 19px 65px;


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


    font-size: 11px;


    letter-spacing: 0.25em;


    cursor: pointer;


    z-index: 5;


    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.apply-button:hover {

    background: #000;

    color: #fff;
}



/* ------------------------------
   COPYRIGHT
------------------------------ */

.copyright {
    position: absolute;


    left: 35px;

    bottom: 25px;


    font-size: 8px;


    letter-spacing: 0.12em;


    opacity: 0.7;


    z-index: 5;
}



/* ------------------------------
   DARK OVERLAY
------------------------------ */

.overlay {
    position: fixed;


    inset: 0;


    background:
        rgba(0, 0, 0, 0.65);


    opacity: 0;


    visibility: hidden;


    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;


    z-index: 10;
}


.overlay.active {

    opacity: 1;

    visibility: visible;
}



/* ------------------------------
   APPLICATION POPUP
------------------------------ */

.application {
    position: fixed;


    top: 50%;

    left: 50%;


    width:
        min(90vw, 700px);


    max-height: 90dvh;


    transform:
        translate(-50%, -50%)
        scale(0.97);


    padding: 38px 50px;


    background:
        rgba(250, 250, 250, 0.98);


    color: #111;


    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, 0.25);


    opacity: 0;


    visibility: hidden;


    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;


    z-index: 20;
}


.application.active {

    opacity: 1;

    visibility: visible;


    transform:
        translate(-50%, -50%)
        scale(1);
}



/* ------------------------------
   APPLICATION HEADER
------------------------------ */

.application-header {

    display: flex;


    align-items: flex-start;


    justify-content:
        space-between;


    margin-bottom: 38px;
}


.application-logo {

    font-size: 13px;


    font-weight: 400;


    letter-spacing: 0.22em;
}


.close {

    border: none;


    background: none;


    color: #111;


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


    font-size: 25px;


    font-weight: 200;


    line-height: 1;


    cursor: pointer;


    padding: 0;


    transition:
        opacity 0.2s ease;
}


.close:hover {

    opacity: 0.4;
}



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

.form-intro {

    margin-bottom: 30px;
}


.form-intro h2 {

    font-size:
        clamp(30px, 4vw, 48px);


    font-weight: 400;


    letter-spacing: -0.045em;


    line-height: 0.95;


    text-transform: lowercase;


    margin-bottom: 13px;
}


.form-intro p {

    font-size: 10px;


    font-weight: 400;


    letter-spacing: 0.06em;


    color: #777;
}



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

form {

    display: grid;


    grid-template-columns:
        1fr 1fr;


    column-gap: 32px;


    row-gap: 25px;
}



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

.field {

    position: relative;
}


.field label {

    display: block;


    margin-bottom: 7px;


    font-size: 9px;


    font-weight: 400;


    letter-spacing: 0.12em;


    text-transform: uppercase;


    color: #777;
}


.field input {

    width: 100%;


    padding: 7px 0;


    border: none;


    border-bottom:
        1px solid #bbb;


    border-radius: 0;


    outline: none;


    background: transparent;


    color: #111;


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


    font-size: 13px;


    transition:
        border-color 0.25s ease;
}


.field input:focus {

    border-bottom-color: #111;
}


.field input::placeholder {

    color: #aaa;

    opacity: 1;
}



/* ------------------------------
   REMOVE NUMBER ARROWS
------------------------------ */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;
}


input[type="number"] {

    -moz-appearance: textfield;
}



/* ------------------------------
   ERROR MESSAGE
------------------------------ */

.error-message {

    display: none;


    margin-top: 7px;


    font-size: 8px;


    font-weight: 400;


    letter-spacing: 0.08em;


    color: #111;


    text-transform: lowercase;
}


.field.error input {

    border-bottom-color: #111;


    animation:
        littleShake 0.35s ease;
}


.field.error .error-message {

    display: block;


    animation:
        appear 0.3s ease;
}



/* ------------------------------
   ERROR ANIMATION
------------------------------ */

@keyframes littleShake {

    0% {
        transform: translateX(0);
    }


    25% {
        transform: translateX(-4px);
    }


    50% {
        transform: translateX(3px);
    }


    75% {
        transform: translateX(-2px);
    }


    100% {
        transform: translateX(0);
    }

}


@keyframes appear {

    from {

        opacity: 0;

        transform:
            translateY(-3px);

    }


    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}



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

.submit-button {

    grid-column:
        1 / -1;


    width: 100%;


    margin-top: 10px;


    padding: 16px;


    border: none;


    background: #111;


    color: #fff;


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


    font-size: 10px;


    letter-spacing: 0.22em;


    cursor: pointer;


    transition:
        opacity 0.25s ease;
}


.submit-button:hover {

    opacity: 0.7;
}



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

@media (max-width: 600px) {


    .logo {

        top: 22px;

        left: 22px;


        font-size: 11px;


        letter-spacing: 0.28em;

    }


    .scouted {

        width: 92%;

    }


    .scouted h1 {

        font-size: 42px;


        letter-spacing: 0.015em;


        margin-bottom: 22px;

    }


    .scouted p {

        font-size: 8px;


        letter-spacing: 0.1em;

    }


    .apply-button {

        bottom: 65px;


        padding:
            20px 55px;

    }


    .copyright {

        left: 22px;


        bottom: 18px;


        font-size: 7px;

    }



    /* MOBILE APPLICATION */

    .application {

        width: 92vw;


        max-height: 88dvh;


        overflow-y: auto;


        padding:
            30px 25px;

    }


    .application-header {

        margin-bottom: 30px;

    }


    .application-logo {

        font-size: 11px;


        letter-spacing: 0.18em;

    }


    .form-intro {

        margin-bottom: 28px;

    }


    .form-intro h2 {

        font-size: 34px;


        line-height: 0.98;

    }


    .form-intro p {

        font-size: 9px;

    }



    /* ONE COLUMN ON MOBILE */

    form {

        grid-template-columns:
            1fr;


        row-gap: 20px;

    }


    .submit-button {

        grid-column:
            auto;

    }

}

/* ------------------------------
   THANK YOU SCREEN
------------------------------ */

.thank-you-screen {
    position: fixed;

    inset: 0;

    background: #fff;

    color: #111;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 100;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}


.thank-you-screen.active {

    opacity: 1;

    visibility: visible;

    pointer-events: all;

}


.thank-you-content {

    display: flex;

    flex-direction: column;

    align-items: center;
}


.thank-you-logo {

    position: absolute;

    top: 28px;

    left: 35px;

    font-size: 13px;

    letter-spacing: 0.32em;

}


.thank-you-content h1 {

    font-size:
        clamp(38px, 5vw, 65px);

    font-weight: 400;

    letter-spacing: -0.04em;

    margin-bottom: 15px;

}


.thank-you-content p {

    font-size: 10px;

    letter-spacing: 0.12em;

}



/* ------------------------------
   SUBMISSION ERROR
------------------------------ */

.submission-error {

    position: fixed;

    left: 50%;

    bottom: 35px;

    transform:
        translateX(-50%);

    padding: 12px 20px;

    background: #111;

    color: #fff;

    font-size: 9px;

    letter-spacing: 0.08em;

    text-transform: lowercase;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 200;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.submission-error.active {

    opacity: 1;

    visibility: visible;

}



/* ------------------------------
   MOBILE THANK YOU
------------------------------ */

@media (max-width: 600px) {

    .thank-you-logo {

        top: 22px;

        left: 22px;

        font-size: 11px;

        letter-spacing: 0.28em;

    }


    .thank-you-content h1 {

        font-size: 42px;

    }


    .thank-you-content p {

        font-size: 8px;

    }

}