/* =========================================================
   NIKRAKHT — COMING SOON
   Main stylesheet
   ========================================================= */


/* =========================================================
   01. DESIGN VARIABLES
   ========================================================= */

:root {

    /* Brand colors */
    --color-ivory: #f4efe4;
    --color-paper: #fbf8f1;
    --color-olive: #575b38;
    --color-olive-light: #7c805c;
    --color-mint: #70c7b1;
    --color-text: #34352a;

    /* Transparent colors */
    --color-line: rgba(87, 91, 56, 0.25);
    --color-glass: rgba(255, 255, 255, 0.34);

    /* Motion */
    --ease-smooth: cubic-bezier(.22, 1, .36, 1);

}


/* =========================================================
   02. RESET
   ========================================================= */

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


html {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}


body {
    width: 100%;
    min-width: 320px;
    min-height: 100vh;

    margin: 0;

    background: var(--color-ivory);
    color: var(--color-text);

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

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


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


a {
    color: inherit;
}


/* =========================================================
   03. HEADER
   ========================================================= */

.site-header {

    position: relative;

    width: 100%;
    
    height: 87vw;
    

    /*
       Header artwork always fits the viewport width.
       The image is aligned to the top and is not tiled.
    */

    background-image:
        url("assets/header.webp");

    background-repeat: no-repeat;

    background-position:
        center top;

    background-size:
        100% auto;

}


.header-content {

    width: 100%;

    display: flex;

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

}


.brand {

    display: block;

    width: min(
        360px,
        75vw
    );

    text-decoration: none;

}


.brand-logo {

    width: 100%;

    height: auto;
    
    margin-top: 125px;

    filter:
        drop-shadow(
            5px 7px 5px
            rgba(87, 91, 56, 0.3)
        );

}


/* =========================================================
   04. MAIN
   ========================================================= */

.site-main {

    position: relative;

    width: 100%;

    /*
       The main artwork fits the viewport width.

       repeat-y is intentional:
       if the content becomes taller than the artwork,
       the background continues vertically.
    */

    background-image:
        url("assets/background.webp");

    background-repeat:
        repeat-y;

    background-position:
        center top;

    background-size:
        100% auto;

}


/* =========================================================
   05. HERO
   ========================================================= */

.hero {

    position: relative;

    width: 100%;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        90px 24px
        110px;

}


.hero-content {

    position: relative;

    z-index: 2;

    width: min(
        100%,
        680px
    );

    padding:
        30px;

    text-align: center;

}


/* =========================================================
   06. HERO TYPOGRAPHY
   ========================================================= */

.hero-eyebrow {

    margin: 20px 0 10px 0;

    color:
        var(--color-olive-light);

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        .24em;

    line-height:
        2;

}


.hero-divider {

    width: 120px;

    height: 1px;

    background:
        var(--color-line);

}


.hero-title {

    margin:
        0 0 25px;

    color:
        var(--color-olive);

    font-size:
        clamp(
            28px,
            5vw,
            48px
        );

    font-weight:
        400;

    line-height:
        1.8;

}


.hero-description {

    margin:
        0 auto;

    max-width:
        480px;

    color:
        var(--color-olive-light);

    font-size:
        14px;

    line-height:
        2.3;

}


/* =========================================================
   07. COMING SOON BADGE
   ========================================================= */

.coming-soon {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 30px;

    padding: 10px 20px;

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

    border-radius: 100px;

    background: rgba(255, 255, 255, 0.22);

    color: var(--color-olive);

    font-size: 11px;

    letter-spacing: 0.12em;

    animation:
        comingSoonPulse 2.8s ease-in-out infinite;

}


.coming-soon-dot {

    width: 8px;

    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: var(--color-mint);

    box-shadow:
        0 0 0 5px
        rgba(112, 199, 177, 0.12);

    animation:
        comingSoonDot 2.8s ease-in-out infinite;

}


/* ---------------------------------------------------------
   Subtle breathing effect
   --------------------------------------------------------- */

@keyframes comingSoonPulse {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }

}


@keyframes comingSoonDot {

    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 0 0 5px
            rgba(112, 199, 177, 0.10);
    }

    50% {
        transform: scale(1.18);

        box-shadow:
            0 0 0 8px
            rgba(112, 199, 177, 0.02);
    }

}


/* =========================================================
   08. FOOTER
   ========================================================= */

.site-footer {

    position: relative;

    width: 100%;
    
    height: 87vw;

    background-image:
        url("assets/footer.webp");

    background-repeat:
        no-repeat;

    background-position:
        center bottom;

    background-size:
        100% auto;

}


.footer-content {

    width: 100%;

    min-height:
        clamp(
            180px,
            25vw,
            320px
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        45px 24px;

}


/* =========================================================
   09. SOCIAL LINKS
   ========================================================= */

.socials {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

}


.social-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-width:
        145px;

    padding:
        10px 18px;

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

    border-radius:
        100px;

    background:
        var(--color-glass);

    color:
        var(--color-olive);

    text-decoration:
        none;

    transition:
        transform .35s var(--ease-smooth),
        background .35s var(--ease-smooth),
        box-shadow .35s var(--ease-smooth);

}


.social-link:hover {

    transform:
        translateY(-5px);

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

    box-shadow:
        0 12px 30px
        rgba(87, 91, 56, .10);

}


.social-icon {

    font-size:
        11px;

    font-weight:
        600;

}


.social-handle {

    direction:
        ltr;

    font-size:
        10px;

    opacity:
        .7;

}


/* =========================================================
   10. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .header-content {

        min-height:
            240px;

    }


    .hero {

        min-height:
            500px;

    }


    .footer-content {

        min-height:
            220px;

    }

}


/* =========================================================
   11. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .site-header {

        background-size:
            100% auto;

        background-position:
            center top;

    }


    .header-content {

        min-height:
            190px;

        padding:
            30px 18px;

    }


    .brand {

        width:
            min(
                300px,
                82vw
            );

    }


    .site-main {

        background-size:
            100% auto;

        background-position:
            center top;

        background-repeat:
            repeat-y;

    }


    .hero {

        min-height:
            480px;

        padding:
            70px 15px
            90px;

    }


    .hero-content {

        padding:
            20px 10px;

    }


    .hero-eyebrow {

        font-size:
            9px;

        letter-spacing:
            .18em;

    }


    .hero-title {

        font-size:
            clamp(
                27px,
                8vw,
                38px
            );

        line-height:
            1.9;

    }


    .hero-description {

        font-size:
            13px;

        line-height:
            2.2;

    }


    .site-footer {

        background-size:
            100% auto;

        background-position:
            center bottom;

    }


    .footer-content {

        min-height:
            230px;

        padding:
            40px 18px;

    }


    .socials {

        width:
            100%;

        max-width:
            340px;

    }


    .social-link {

        width:
            100%;

    }

}


/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

    }

}