/* =========================================================
   WINDERVALE — APPLICATION STATUS
   ========================================================= */


/* ---------------------------------------------------------
   FONTS
   --------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,500;1,600&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap');



/* ---------------------------------------------------------
   ROOT
   --------------------------------------------------------- */

:root {

    --pink: #d7a9ad;
    --pink-light: #dfb8bb;
    --pink-dark: #c99399;

    --ink: #0b0909;
    --ink-soft: #171313;

    --paper: #d7a9ad;

    --line: rgba(11, 9, 9, 0.55);

    --display:
        "Bebas Neue",
        Impact,
        sans-serif;

    --mono:
        "DM Mono",
        monospace;

    --body:
        "Space Grotesk",
        sans-serif;

    --serif:
        "Cormorant Garamond",
        Georgia,
        serif;

}



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

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background:
        radial-gradient(
            ellipse at 20% 30%,
            rgba(255,255,255,.16),
            transparent 40%
        ),
        radial-gradient(
            ellipse at 80% 70%,
            rgba(90,40,45,.08),
            transparent 45%
        ),
        var(--paper);

    color: var(--ink);

    font-family: var(--body);

    min-height: 100vh;

    overflow-x: hidden;

}



/* ---------------------------------------------------------
   PAPER GRAIN
   --------------------------------------------------------- */

.paper-grain {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 999;

    opacity: .22;

    mix-blend-mode: multiply;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

}



/* ---------------------------------------------------------
   NAV
   --------------------------------------------------------- */

.status-nav {

    height: 88px;

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

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    align-items: center;

    padding: 0 46px;

    position: relative;

    z-index: 2;

}


.status-brand {

    color: var(--ink);

    text-decoration: none;

    font-family: var(--body);

    font-weight: 700;

    font-size: 15px;

    letter-spacing: -0.04em;

}


.status-nav-center {

    text-align: center;

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .13em;

}


.status-back {

    justify-self: end;

    color: var(--ink);

    text-decoration: none;

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .04em;

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

    padding-bottom: 5px;

}



/* ---------------------------------------------------------
   MAIN GRID
   --------------------------------------------------------- */

.status-main {

    min-height: calc(100vh - 160px);

    display: grid;

    grid-template-columns: 43% 57%;

    position: relative;

    z-index: 1;

}



/* ---------------------------------------------------------
   LEFT
   --------------------------------------------------------- */

.status-check {

    position: relative;

    padding: 65px 8vw 80px 46px;

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

    overflow: hidden;

}


.status-mini-mark {

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .12em;

    margin-bottom: 35px;

}



/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.status-kicker {

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .12em;

    margin-bottom: 17px;

}


.status-hero h1 {

    margin: 0;

    font-family: var(--display);

    font-size: clamp(
        100px,
        12vw,
        190px
    );

    line-height: .73;

    letter-spacing: -.025em;

    font-weight: 400;

}


.status-hero h1 span {

    display: block;

    font-family: var(--serif);

    font-style: italic;

    font-weight: 500;

    font-size: .30em;

    line-height: .8;

    margin-left: 4px;

    margin-top: 15px;

    letter-spacing: -.02em;

}



/* ---------------------------------------------------------
   ORBIT
   --------------------------------------------------------- */

.orbit-one {

    position: absolute;

    top: 115px;

    right: 12%;

    width: 145px;

    height: 62px;

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

    border-radius: 50%;

    transform: rotate(-13deg);

}


.orbit-one i {

    position: absolute;

    right: -5px;

    top: -9px;

    font-style: normal;

    font-size: 19px;

}


.orbit-one span {

    position: absolute;

    width: 7px;

    height: 7px;

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

    border-radius: 50%;

    left: 24px;

    bottom: 3px;

}



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

.status-form-intro {

    margin-top: 75px;

    max-width: 430px;

}


.status-form-intro h2 {

    margin: 0 0 14px;

    font-family: var(--mono);

    font-size: 12px;

    letter-spacing: .08em;

}


.status-form-intro p {

    margin: 0;

    max-width: 400px;

    font-family: var(--mono);

    font-size: 11px;

    line-height: 1.75;

}



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

.status-form {

    margin-top: 38px;

    max-width: 500px;

}


.status-form label {

    display: block;

    position: relative;

    margin-bottom: 24px;

}


.status-form label > span {

    display: block;

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .09em;

    margin-bottom: 8px;

}


.status-form label small {

    position: absolute;

    right: 0;

    top: -2px;

    width: 17px;

    height: 17px;

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

    border-radius: 50%;

    display: grid;

    place-items: center;

    font-family: var(--mono);

    font-size: 9px;

}


.status-form input {

    width: 100%;

    height: 59px;

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

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

    color: var(--ink);

    padding: 0 17px;

    outline: none;

    font-family: var(--mono);

    font-size: 13px;

    letter-spacing: .02em;

    border-radius: 0;

}


.status-form input::placeholder {

    color: rgba(11,9,9,.42);

}


.status-form input:focus {

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

    box-shadow:
        5px 5px 0 rgba(11,9,9,.12);

}



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

.status-submit {

    width: 100%;

    height: 61px;

    margin-top: 8px;

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

    background: var(--ink);

    color: var(--pink-light);

    cursor: pointer;

    font-family: var(--mono);

    font-size: 12px;

    font-weight: 500;

    letter-spacing: .05em;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.status-submit span {

    margin-left: 8px;

    font-size: 18px;

}


.status-submit:hover {

    transform: translate(-4px, -4px);

    box-shadow:
        7px 7px 0 rgba(11,9,9,.25);

}


.status-submit:disabled {

    opacity: .55;

    cursor: wait;

    transform: none;

    box-shadow: none;

}



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

.status-error {

    display: none;

    margin-top: 16px;

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

    padding: 14px;

    font-family: var(--mono);

    font-size: 10px;

    line-height: 1.5;

    background: rgba(11,9,9,.06);

}


.status-error.visible {

    display: block;

}



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

.status-note {

    max-width: 420px;

    margin-top: 65px;

}


.note-line {

    width: 100%;

    height: 1px;

    background: var(--line);

    margin-bottom: 17px;

}


.status-note > span {

    font-family: var(--mono);

    font-size: 9px;

    letter-spacing: .1em;

}


.status-note p {

    font-family: var(--mono);

    font-size: 10px;

    line-height: 1.7;

    max-width: 340px;

    margin-top: 9px;

}



/* ---------------------------------------------------------
   PAPER SCRAP
   --------------------------------------------------------- */

.paper-scrap {

    position: relative;

    margin-top: 45px;

    width: 245px;

    min-height: 84px;

    background: var(--ink);

    color: var(--pink-light);

    padding: 17px 21px;

    transform: rotate(-3deg);

    box-shadow:
        12px 8px 0 rgba(11,9,9,.08);

}


.paper-scrap span {

    display: block;

    font-family: var(--mono);

    font-size: 9px;

    line-height: 1.2;

}


.paper-scrap strong {

    display: block;

    margin-top: 5px;

    font-family: var(--display);

    font-size: 29px;

    line-height: .9;

    letter-spacing: .01em;

}



/* ---------------------------------------------------------
   LEFT DOODLE
   --------------------------------------------------------- */

.left-doodle {

    position: absolute;

    right: 30px;

    bottom: 100px;

    font-size: 28px;

    transform: rotate(16deg);

}



/* ---------------------------------------------------------
   RIGHT RESULT SECTION
   --------------------------------------------------------- */

.status-result-section {

    position: relative;

    padding: 70px 46px 80px;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

.status-empty {

    width: min(
        700px,
        100%
    );

    min-height: 600px;

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

    position: relative;

    padding: 62px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.empty-cross {

    position: absolute;

    top: 22px;

    left: 25px;

    font-family: var(--mono);

    font-size: 22px;

}


.empty-number {

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .1em;

    margin-bottom: 20px;

}


.status-empty h2 {

    margin: 0;

    font-family: var(--display);

    font-size: clamp(
        70px,
        8vw,
        125px
    );

    line-height: .76;

    font-weight: 400;

}


.status-empty p {

    max-width: 330px;

    margin-top: 38px;

    font-family: var(--mono);

    font-size: 10px;

    line-height: 1.8;

}



/* ---------------------------------------------------------
   RING
   --------------------------------------------------------- */

.empty-ring {

    position: absolute;

    right: 70px;

    top: 70px;

    width: 175px;

    height: 175px;

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

    border-radius: 50%;

    transform: rotate(-20deg);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

}


.empty-ring::before {

    content: "✦";

    position: absolute;

    top: 35px;

    font-size: 19px;

}


.empty-ring span {

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: .12em;

}



/* ---------------------------------------------------------
   RESULT CARD
   --------------------------------------------------------- */

.status-result {

    width: min(
        720px,
        100%
    );

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

    box-shadow:
        14px 14px 0 rgba(11,9,9,.08);

}


.result-top {

    min-height: 49px;

    background: var(--ink);

    color: var(--pink-light);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 22px;

    font-family: var(--mono);

    font-size: 9px;

    letter-spacing: .08em;

}



/* ---------------------------------------------------------
   HUGE STATUS
   --------------------------------------------------------- */

.result-status {

    min-height: 400px;

    padding: 43px 34px 35px;

    position: relative;

    overflow: hidden;

}


.result-status-label {

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .1em;

}


.result-status-text {

    margin-top: 25px;

    font-family: var(--display);

    font-size: clamp(
        105px,
        12vw,
        185px
    );

    line-height: .72;

    letter-spacing: -.02em;

    max-width: 95%;

    position: relative;

    z-index: 2;

}



/* ---------------------------------------------------------
   STATUS STAR
   --------------------------------------------------------- */

.status-star {

    position: absolute;

    right: 14%;

    top: 75px;

    font-size: 53px;

    transform: rotate(13deg);

}


.status-underline {

    width: 75%;

    height: 1px;

    background: var(--ink);

    margin-top: 34px;

}


.patience {

    margin-top: 13px;

    font-family: var(--serif);

    font-style: italic;

    font-size: 21px;

}



/* ---------------------------------------------------------
   DETAILS
   --------------------------------------------------------- */

.result-details {

    background: var(--ink);

    color: var(--pink-light);

    display: grid;

    grid-template-columns: 1fr 1fr;

    padding: 30px 34px 35px;

    gap: 25px 38px;

}


.result-detail {

    min-height: 58px;

    border-bottom: 1px solid rgba(215,169,173,.35);

    padding-bottom: 13px;

}


.result-detail span {

    display: block;

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: .1em;

    margin-bottom: 9px;

    opacity: .72;

}


.result-detail strong {

    font-family: var(--mono);

    font-size: 12px;

    font-weight: 400;

}



/* ---------------------------------------------------------
   RESULT MESSAGE
   --------------------------------------------------------- */

.result-message {

    min-height: 75px;

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

    padding: 15px 22px;

    display: grid;

    grid-template-columns: 35px 1fr 50px;

    align-items: center;

    gap: 15px;

}


.message-symbol {

    font-size: 19px;

}


.result-message p {

    margin: 0;

    font-family: var(--mono);

    font-size: 9px;

    line-height: 1.6;

}


.message-doodle {

    font-family: var(--serif);

    font-size: 38px;

    text-align: center;

}



/* ---------------------------------------------------------
   STATUS COLORS / VARIANTS
   --------------------------------------------------------- */

.status-result.accepted
.result-status {

    background: #d2aeb2;

}


.status-result.rejected
.result-status {

    background: #bc858b;

}


.status-result.review
.result-status {

    background: var(--pink-light);

}



/* ---------------------------------------------------------
   REGISTRATION MARKS
   --------------------------------------------------------- */

.right-registration {

    position: absolute;

    right: 25px;

    bottom: 24px;

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: .1em;

    opacity: .6;

}


.right-star {

    position: absolute;

    top: 25px;

    right: 31px;

    font-size: 22px;

}



/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.status-footer {

    min-height: 75px;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 46px;

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: .08em;

    position: relative;

    z-index: 2;

}


.status-footer nav {

    display: flex;

    align-items: center;

    gap: 16px;

}


.status-footer a {

    color: var(--ink);

    text-decoration: none;

    border-bottom: 1px solid transparent;

    padding-bottom: 3px;

}


.status-footer a:hover {

    border-color: var(--ink);

}



/* ---------------------------------------------------------
   HIDDEN
   --------------------------------------------------------- */

[hidden] {

    display: none !important;

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .status-main {

        grid-template-columns: 1fr;

    }


    .status-check {

        border-right: none;

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

        padding-right: 46px;

    }


    .status-result-section {

        min-height: 700px;

    }


    .orbit-one {

        right: 25%;

    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .status-nav {

        height: 70px;

        grid-template-columns: 1fr auto;

        padding: 0 20px;

    }


    .status-nav-center {

        display: none;

    }


    .status-brand {

        font-size: 13px;

    }


    .status-back {

        font-size: 8px;

    }


    .status-check {

        padding:
            42px
            20px
            55px;

    }


    .status-hero h1 {

        font-size: 100px;

    }


    .orbit-one {

        top: 95px;

        right: 5%;

        width: 100px;

        height: 45px;

    }


    .status-form-intro {

        margin-top: 65px;

    }


    .status-result-section {

        padding:
            45px
            20px
            70px;

        min-height: auto;

    }


    .status-empty {

        min-height: 500px;

        padding: 35px 25px;

    }


    .status-empty h2 {

        font-size: 76px;

    }


    .empty-ring {

        width: 115px;

        height: 115px;

        right: 18px;

        top: 30px;

    }


    .empty-ring span {

        font-size: 6px;

    }


    .result-status {

        min-height: 310px;

        padding:
            32px
            22px;

    }


    .result-status-text {

        font-size: 91px;

        max-width: 100%;

        margin-top: 30px;

    }


    .status-star {

        right: 8%;

        top: 62px;

        font-size: 35px;

    }


    .result-details {

        grid-template-columns: 1fr;

        padding: 25px 22px;

        gap: 18px;

    }


    .result-top {

        padding: 0 14px;

        font-size: 7px;

    }


    .result-message {

        grid-template-columns: 25px 1fr;

    }


    .message-doodle {

        display: none;

    }


    .status-footer {

        padding:
            25px
            20px;

        align-items: flex-start;

        gap: 30px;

    }


    .status-footer nav {

        flex-wrap: wrap;

        justify-content: flex-end;

        gap: 8px;

    }


    .left-doodle {

        display: none;

    }

}