/* =========================================================
   LUNEBANE STUDIO
   Main stylesheet
   ========================================================= */


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

:root {

    /* Colors */

    --black:
        #07080a;

    --black-soft:
        #0b0c0f;

    --surface:
        #101115;

    --surface-light:
        #15171c;

    --bone:
        #d8d2c7;

    --bone-soft:
        #aaa49b;

    --muted:
        #77746f;

    --line:
        rgba(216, 210, 199, .11);

    --line-strong:
        rgba(216, 210, 199, .18);

    --red:
        #71343d;

    --red-soft:
        rgba(113, 52, 61, .35);

    --blue:
        #718d96;

    --blue-soft:
        rgba(113, 141, 150, .25);


    /* Typography */

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

    --font-body:
        "Inter",
        Arial,
        sans-serif;


    /* Layout */

    --content-width:
        1200px;


    /* Motion */

    --ease:
        cubic-bezier(.22, 1, .36, 1);

    --ease-soft:
        cubic-bezier(.16, 1, .3, 1);

}


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

html {
    scroll-behavior:
        smooth;
}

body {
    margin:
        0;

    background:
        var(--black);

    color:
        var(--bone);

    font-family:
        var(--font-body);

    font-size:
        15px;

    font-weight:
        300;

    line-height:
        1.8;

    overflow-x:
        hidden;
}

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

img {
    max-width:
        100%;
}

a {
    color:
        inherit;

    text-decoration:
        none;
}

button,
a {
    -webkit-tap-highlight-color:
        transparent;
}


/* =========================================================
   03. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3 {
    margin:
        0;

    font-family:
        var(--font-display);

    font-weight:
        400;

    line-height:
        1.05;

    letter-spacing:
        -.015em;
}

h1 {
    font-size:
        clamp(5rem, 13vw, 11rem);
}

h2 {
    font-size:
        clamp(3rem, 7vw, 6rem);
}

h3 {
    font-size:
        clamp(2.6rem, 5vw, 4.8rem);
}

p {
    margin-top:
        0;
}


/* =========================================================
   04. ATMOSPHERE
   ========================================================= */

.atmosphere {
    position:
        fixed;

    inset:
        0;

    z-index:
        -10;

    pointer-events:
        none;

    overflow:
        hidden;

    background:
        var(--black);
}

.atmosphere__glow {
    position:
        absolute;

    width:
        80vw;

    height:
        80vw;

    top:
        -35vw;

    left:
        50%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(113, 52, 61, .12) 0%,
            rgba(113, 52, 61, .035) 30%,
            transparent 70%
        );

    filter:
        blur(30px);
}

.atmosphere__mist {
    position:
        absolute;

    width:
        100%;

    height:
        45vh;

    left:
        0;

    background:
        radial-gradient(
            ellipse at center,
            rgba(170, 170, 170, .025),
            transparent 65%
        );

    filter:
        blur(45px);

    opacity:
        .55;

    animation:
        mist-drift 24s ease-in-out infinite alternate;
}

.atmosphere__mist--one {
    top:
        20%;

    transform:
        translateX(-10%);
}

.atmosphere__mist--two {
    top:
        58%;

    transform:
        translateX(10%);

    animation-delay:
        -10s;
}

.atmosphere__vignette {
    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 30%,
            rgba(0, 0, 0, .55) 100%
        );
}

.atmosphere__grain {
    position:
        absolute;

    inset:
        -50%;

    opacity:
        .035;

    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='.5'/%3E%3C/svg%3E");

    pointer-events:
        none;

    animation:
        grain-shift .25s steps(2) infinite;
}


/* =========================================================
   05. MOUSE LIGHT
   ========================================================= */

.mouse-light {
    position:
        fixed;

    z-index:
        -1;

    top:
        0;

    left:
        0;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    pointer-events:
        none;

    opacity:
        0;

    background:
        radial-gradient(
            circle,
            rgba(216, 210, 199, .035),
            transparent 70%
        );

    filter:
        blur(20px);

    transition:
        opacity 1s ease;
}

.mouse-active .mouse-light {
    opacity:
        1;
}


/* =========================================================
   06. NAVIGATION
   ========================================================= */

.raven-nav {
    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    z-index:
        1000;

    padding:
        1.5rem 0;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 8, 10, .85),
            transparent
        );

    transition:
        padding .6s var(--ease),
        background .6s ease;
}

.raven-nav.scrolled {
    padding:
        .85rem 0;

    background:
        rgba(7, 8, 10, .88);

    backdrop-filter:
        blur(16px);

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

.raven-brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        .7rem;

    color:
        var(--bone) !important;
}

.brand-mark {
    display:
        grid;

    place-items:
        center;

    width:
        30px;

    height:
        30px;

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

    border-radius:
        50%;

    font-family:
        var(--font-display);

    font-size:
        1.05rem;

    line-height:
        1;
}

.brand-name {
    font-family:
        var(--font-display);

    font-size:
        1.25rem;

    letter-spacing:
        .08em;
}

.raven-nav .nav-link {
    position:
        relative;

    padding:
        .5rem 0 !important;

    color:
        var(--bone-soft) !important;

    font-size:
        .72rem;

    font-weight:
        400;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

    transition:
        color .3s ease;
}

.raven-nav .nav-link::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        .15rem;

    width:
        100%;

    height:
        1px;

    background:
        var(--bone);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform .4s var(--ease);
}

.raven-nav .nav-link:hover {
    color:
        var(--bone) !important;
}

.raven-nav .nav-link:hover::after {
    transform:
        scaleX(1);

    transform-origin:
        left;
}

.nav-contact {
    display:
        inline-block;

    padding:
        .5rem 1rem;

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

    color:
        var(--bone);

    font-size:
        .68rem;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    transition:
        background .3s ease,
        border-color .3s ease;
}

.nav-contact:hover {
    background:
        rgba(216, 210, 199, .06);

    border-color:
        rgba(216, 210, 199, .3);
}

.navbar-toggler {
    padding:
        .25rem;
}

.navbar-toggler-icon {
    filter:
        invert(1);

    opacity:
        .7;
}


/* =========================================================
   LANGUAGE SWITCH
   ========================================================= */

.nav-language {
    margin-left: .5rem;
    padding-left: 1.25rem;
    border-left: 1px solid var(--line);
}

.nav-language .nav-link {
    color: var(--muted) !important;
    font-size: .62rem;
    letter-spacing: .14em;
}

.nav-language .nav-link:hover {
    color: var(--bone) !important;
}




/* =========================================================
   07. HERO
   ========================================================= */

.hero {
    position:
        relative;

    isolation:
        isolate;

    min-height:
        100vh;

    min-height:
        100svh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        8rem 1.5rem 6rem;

    overflow:
        hidden;
}


/* =========================================================
   07A. MOON
   ========================================================= */

.hero__moon {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    z-index:
        0;

    width:
        min(58vw, 680px);

    aspect-ratio:
        1 / 1;

    pointer-events:
        none;

    --moon-x:
        0px;

    --moon-y:
        0px;

    transform:
        translate(
            calc(-50% + var(--moon-x)),
            calc(-55% + var(--moon-y))
        );

    border-radius:
        50%;

    /*
     * Dark lunar surface.
     *
     * The moon is intentionally restrained.
     * It should be visible, but the typography
     * remains the visual focus.
     */

    background:
        radial-gradient(
            circle at 37% 34%,
            #555755 0%,
            #4a4c4a 18%,
            #3e403f 38%,
            #303231 58%,
            #202223 74%,
            #141618 100%
        );

    opacity:
        .32;

    box-shadow:
        0 0 50px rgba(150, 150, 145, .035),
        0 0 130px rgba(113, 52, 61, .025);
}


/*
 * Lunar shadow.
 *
 * This provides subtle dimensionality without
 * adding visible crater shapes.
 */

.hero__moon::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 72% 48%,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, .08) 35%,
            rgba(0, 0, 0, .28) 65%,
            rgba(0, 0, 0, .58) 100%
        );
}


/* =========================================================
   07B. HERO CONTENT
   ========================================================= */

.hero__content {
    position:
        relative;

    z-index:
        5;

    width:
        100%;

    isolation:
        isolate;

    opacity:
        1;
}

.hero__eyebrow {
    margin-bottom:
        1.5rem;

    color:
        var(--muted);

    font-size:
        .68rem;

    font-weight:
        400;

    letter-spacing:
        .3em;

    text-transform:
        uppercase;

    opacity:
        1;

    text-shadow:
        0 2px 18px rgba(0, 0, 0, .9);
}

.hero__title {
    color:
        var(--bone);

    font-weight:
        400;

    opacity:
        1;

    /*
     * Shadow separates the lettering from the moon
     * without blurring the lettering itself.
     */

    text-shadow:
        0 2px 20px rgba(0, 0, 0, .9),
        0 0 50px rgba(0, 0, 0, .65);
}

.hero__line {
    width:
        70px;

    height:
        1px;

    margin:
        2.5rem auto;

    background:
        var(--line-strong);

    opacity:
        1;
}

.hero__statement {
    max-width:
        580px;

    margin:
        0 auto;

    color:
        var(--bone-soft);

    font-size:
        clamp(.95rem, 2vw, 1.1rem);

    font-weight:
        300;

    line-height:
        1.9;

    opacity:
        1;

    text-shadow:
        0 2px 18px rgba(0, 0, 0, .9);
}

.hero__enter {
    display:
        inline-flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        .5rem;

    margin-top:
        3.5rem;

    color:
        var(--bone-soft);

    font-size:
        .65rem;

    font-weight:
        400;

    letter-spacing:
        .25em;

    text-transform:
        uppercase;

    opacity:
        1;

    text-shadow:
        0 2px 15px rgba(0, 0, 0, .9);

    transition:
        color .3s ease;
}

.hero__enter:hover {
    color:
        var(--bone);
}

.hero__arrow {
    font-size:
        1.2rem;

    opacity:
        1;

    transition:
        transform .4s var(--ease);
}

.hero__enter:hover .hero__arrow {
    transform:
        translateY(5px);
}

.hero__bottom {
    position:
        absolute;

    right:
        2rem;

    bottom:
        2rem;

    z-index:
        6;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        .2rem;

    color:
        rgba(216, 210, 199, .3);

    font-size:
        .55rem;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}


/* =========================================================
   08. SECTIONS
   ========================================================= */

.section {
    position:
        relative;

    padding:
        9rem 0;
}

.section--about {
    padding:
        12rem 0;
}

.section--contact {
    padding:
        10rem 0 12rem;
}

.section-heading {
    margin-bottom:
        8rem;
}

.section-heading--right {
    text-align:
        right;
}

.section-number {
    margin-bottom:
        1rem;

    color:
        var(--muted);

    font-size:
        .65rem;

    letter-spacing:
        .25em;
}

.section-heading h2 {
    color:
        var(--bone);
}

.section-heading p {
    margin:
        1rem 0 0;

    color:
        var(--muted);

    font-size:
        .8rem;

    letter-spacing:
        .12em;
}


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

.text-link {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        .75rem;

    color:
        var(--bone);

    font-size:
        .68rem;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}

.text-link::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -.35rem;

    width:
        calc(100% - 1.75rem);

    height:
        1px;

    background:
        var(--line-strong);

    transition:
        width .4s var(--ease);
}

.text-link span {
    transition:
        transform .4s var(--ease);
}

.text-link:hover::after {
    width:
        100%;
}

.text-link:hover span {
    transform:
        translateX(5px);
}





/* =========================================================
   GAMES
   ========================================================= */

.section--games {
    padding-top:
        7rem;
}

.project-feature {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, .6fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items:
        center;

    margin-bottom:
        8rem;
}

.project-feature__visual {
    position:
        relative;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        var(--surface);

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

.project-feature__visual::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            transparent 40%,
            rgba(0,0,0,.18)
        );
}

.project-feature__visual img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 1.4s var(--ease),
        filter 1.2s ease;
}

.project-feature__visual:hover img {
    transform:
        scale(1.025);

    filter:
        brightness(1.04)
        contrast(1.02);
}

.project-feature__info {
    max-width:
        440px;
}

.project-feature__info h3 {
    margin-bottom:
        1.5rem;
}

.project-feature__info p {
    color:
        var(--bone-soft);

    font-size:
        .9rem;

    line-height:
        1.9;
}


/* =========================================================
   MUSIC
   ========================================================= */

.section--music {
    padding-top:
        8rem;
}

.music-project-simple {
    max-width:
        720px;

    margin:
        0 0 0 auto;

    padding:
        3.5rem 0;

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

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

.music-project-simple__info {
    max-width:
        560px;
}

.music-project-simple h3 {
    margin-bottom:
        1.25rem;

    font-size:
        clamp(2.2rem, 4vw, 3.5rem);
}

.music-project-simple p {
    max-width:
        520px;

    color:
        var(--bone-soft);

    font-size:
        .85rem;

    line-height:
        1.9;
}

.music-project-simple .text-link {
    margin-top:
        .75rem;
}








/* =========================================================
   10. ABOUT
   ========================================================= */

.about-content {
    text-align:
        center;
}

.about-content .section-number {
    text-align:
        center;
}

.about-content h2 {
    margin-bottom:
        2.5rem;
}

.about-lead {
    max-width:
        650px;

    margin:
        0 auto 2rem;

    color:
        var(--bone);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.4rem, 3vw, 2rem);

    line-height:
        1.5;
}

.about-content > p:not(.about-lead) {
    max-width:
        570px;

    margin:
        0 auto;

    color:
        var(--bone-soft);

    font-size:
        .9rem;
}

.about-signature {
    margin-top:
        3rem;

    color:
        var(--muted);

    font-family:
        var(--font-display);

    font-size:
        1.2rem;

    font-style:
        italic;
}


/* =========================================================
   11. CONTACT
   ========================================================= */

.section--contact .label {
    margin-bottom:
        1.5rem;
}

.section--contact h2 {
    margin-bottom:
        3rem;
}

.contact-intro {
    color:
        var(--bone-soft);
}

.contact-link {
    display:
        inline-block;

    color:
        var(--bone-soft);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.3rem, 3vw, 2rem);

    transition:
        color .3s ease;
}

.contact-link:hover {
    color:
        var(--bone);
}

.contact-note {
    margin-top:
        1.5rem;

    color:
        var(--muted);

    font-size:
        .7rem;

    letter-spacing:
        .12em;
}


/* =========================================================
   12. FOOTER
   ========================================================= */

.raven-footer {
    padding:
        2rem 0;

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

.footer-inner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2rem;
}

.footer-brand {
    font-family:
        var(--font-display);

    font-size:
        1.2rem;

    letter-spacing:
        .08em;
}

.footer-copy {
    color:
        var(--muted);

    font-size:
        .6rem;

    letter-spacing:
        .08em;
}

.footer-links {
    display:
        flex;

    gap:
        1.5rem;
}

.footer-links a {
    color:
        var(--muted);

    font-size:
        .58rem;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    transition:
        color .3s ease;
}

.footer-links a:hover {
    color:
        var(--bone);
}


/* =========================================================
   13. REVEAL ANIMATION
   ========================================================= */

.reveal {
    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        opacity 1s var(--ease-soft),
        transform 1s var(--ease-soft);
}

.reveal.visible {
    opacity:
        1;

    transform:
        translateY(0);
}

.reveal--delay-1 {
    transition-delay:
        .12s;
}

.reveal--delay-2 {
    transition-delay:
        .22s;
}

.reveal--delay-3 {
    transition-delay:
        .32s;
}

.reveal--delay-4 {
    transition-delay:
        .42s;
}


/* =========================================================
   14. PAGE READY
   ========================================================= */

body:not(.page-ready) .hero__content {
    opacity:
        0;
}

body.page-ready .hero__content {
    opacity:
        1;

    transition:
        opacity 1.5s ease;
}


/* =========================================================
   15. RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .raven-nav {
        background:
            rgba(7, 8, 10, .88);
    }

    .raven-nav .navbar-collapse {
        padding:
            1.5rem 0 .75rem;
    }

    .raven-nav .navbar-nav {
        align-items:
            flex-start !important;
    }

    .nav-contact {
        margin-top:
            .75rem;
    }
    
    
.project-feature {
    grid-template-columns:
        1fr;

    gap:
        3rem;
}

.project-feature__info {
    max-width:
        650px;
}

.music-project-simple {
    margin:
        0;

    max-width:
        650px;
}
    
    
    
    
    
    

}


/* =========================================================
   16. TABLET / MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    body {
        font-size:
            14px;
    }


    /* -----------------------------------------------------
       Hero
       ----------------------------------------------------- */

    .hero {
        padding:
            7rem 1.25rem 5rem;
    }

    .hero__moon {
        width:
            min(85vw, 500px);

        opacity:
            .26;

        transform:
            translate(
                calc(-50% + var(--moon-x)),
                calc(-52% + var(--moon-y))
            );
    }

    .hero__bottom {
        display:
            none;
    }


    /* -----------------------------------------------------
       Sections
       ----------------------------------------------------- */

    .section {
        padding:
            6rem 0;
    }

    .section--about {
        padding:
            8rem 0;
    }

    .section--contact {
        padding:
            7rem 0 8rem;
    }


    .section-heading {
        margin-bottom:
            5rem;
    }

    .section-heading--right {
        text-align:
            left;
    }


.project-feature {
    margin-bottom:
        6rem;
}

.project-feature__visual {
    aspect-ratio:
        16 / 10;
}

.music-project-simple {
    padding:
        2.5rem 0;
}







    /* -----------------------------------------------------
       Footer
       ----------------------------------------------------- */

    .footer-inner {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .footer-links {
        flex-wrap:
            wrap;

        gap:
            .75rem 1.25rem;
    }

}


/* =========================================================
   17. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .raven-nav {
        padding:
            1rem 0;
    }

    .brand-name {
        font-size:
            1.1rem;
    }

    .brand-mark {
        width:
            27px;

        height:
            27px;
    }


    .hero__moon {
        width:
            100vw;

        opacity:
            .22;

        transform:
            translate(
                calc(-50% + var(--moon-x)),
                calc(-48% + var(--moon-y))
            );
    }


    .hero__line {
        margin:
            2rem auto;
    }


    .section-heading h2 {
        font-size:
            3.2rem;
    }

}


/* =========================================================
   18. REDUCED MOTION
   ========================================================= */

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

    html {
        scroll-behavior:
            auto;
    }

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

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

    .reveal {
        opacity:
            1;

        transform:
            none;
    }

    .mouse-light {
        display:
            none;
    }

}


/* =========================================================
   19. KEYBOARD ACCESSIBILITY
   ========================================================= */

.keyboard-navigation a:focus-visible,
.keyboard-navigation button:focus-visible {

    outline:
        1px solid var(--bone);

    outline-offset:
        6px;
}


/* =========================================================
   20. ANIMATIONS
   ========================================================= */

@keyframes mist-drift {

    0% {
        transform:
            translateX(-10%)
            scale(1);
    }

    100% {
        transform:
            translateX(10%)
            scale(1.05);
    }

}

@keyframes grain-shift {

    0% {
        transform:
            translate(0, 0);
    }

    25% {
        transform:
            translate(2%, -1%);
    }

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

    75% {
        transform:
            translate(1%, 1%);
    }

    100% {
        transform:
            translate(-2%, -1%);
    }

}