@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');
/* Font Import 
    Exo 2
    Available Weights: 100-900
    font-family: "Exo 2", sans-serif;
*/

@font-face {
  font-family: 'Journey PS3';
  src: url('/fonts/JourneyPS3.ttf') format('truetype');
}

/* -------------------------------------------------------------------------- */
/*                                    Reset                                   */
/* -------------------------------------------------------------------------- */
*{
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size: 18px;
}

/* Variables */
:root{
    --red: #8F3718;
    --off-white: #FFFCF9;
    --muck: #464037;
    --crimson: #873527;
    --card: #fbe7d890;
    --red-shadow: rgba(67, 50, 50, 0.2);
}

body, button{
    font-family: "Exo 2", sans-serif;
}

svg{
    opacity: 0;
    transition: opacity 0.3s;
}

.active.fp-completely svg{
    opacity: 1;
}


/* -------------------------------------------------------------------------- */
/*                                    Text                                    */
/* -------------------------------------------------------------------------- */
h1, h2, h3{
    font-family: 'Journey PS3', sans-serif;
    line-height: 105%;
}

h1{
    font-size: clamp(4rem, 18vw, 7rem);
    color: var(--red);
    margin-bottom: 0.15em;
    text-shadow: 0 0.03em 0.03em var(--red-shadow);
}

h2{
    font-size: 2.5rem;
    margin-bottom: 0.25em;
}

h2.small{
    font-size: 1.75rem;
}

h3{
    font-size: 1.75rem;
    margin-bottom: 0.25em;
}

p{
    line-height: 150%;
}

strong{
    font-weight: 700;
}


/* -------------------------------------------------------------------------- */
/*                                     Nav                                    */
/* -------------------------------------------------------------------------- */
#fp-nav ul li a span{
    background: var(--off-white);
    transition: background 0.5s ease;
}

nav{
    position: relative;
    display: flex;
    justify-content: center;
}

#menu{
    position: fixed;
    display: flex;
    z-index: 2;
    list-style: none;

    li{
        padding: 2rem;

        a{
            color: var(--off-white);
            text-decoration: none;
            font-size: 1rem;
            text-transform: uppercase;
            font-weight: 700;
            cursor: pointer;

            transition: color 0.5s ease;
        }

        transition: all 0.1s ease-in;
    }

    li:hover{
        transform: scale(1.1);
    }

    li.active a{
        border-bottom: 2px solid var(--off-white);
    }
}

/* Menu Links */
.fp-viewing-Home #menu li a, .fp-viewing-Connection #menu li a{
    color: var(--red);
}

.fp-viewing-Mechanics #menu li a{
    color: var(--crimson);
}

.fp-viewing-Home #menu li.active a, .fp-viewing-Connection #menu li.active a{
    border-bottom: 2px solid var(--red);
}

.fp-viewing-Mechanics #menu li.active a{
    border-bottom: 2px solid var(--crimson);
}

/* Menu Dots */
.fp-viewing-Home #fp-nav ul li a span, .fp-viewing-Connection #fp-nav ul li a span{
    background: var(--red);
}

.fp-viewing-Mechanics #fp-nav ul li a span{
    background: var(--crimson);

}


/* -------------------------------------------------------------------------- */
/*                                   Buttons                                  */
/* -------------------------------------------------------------------------- */
.button{
    background: var(--off-white);
    color: var(--muck);
    padding: 0.5em 2em;
    justify-content: center;
    align-items: center;
    border-radius: 0.4375rem;
    border: 4px solid #FFF;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0em 0.35em 0.35em var(--red-shadow);

    transition: all 0.3s ease-in-out;
}

.button:hover{
    background: none;
    color: var(--off-white);
    transform: translateY(-0.25rem);
}

.button.main{
    background: var(--red);
    border: 4px solid var(--red);
    color: var(--off-white);
}

.button.main:hover{
    background: none;
    color: var(--red);
}


/* -------------------------------------------------------------------------- */
/*                                  Sections                                  */
/* -------------------------------------------------------------------------- */
/* Master Styling */
.section{
    overflow: hidden;
}

.section-container{
    max-width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: -webkit-fill-available;
}

.text-wrapper{
    margin-top: 4em;
    width: 50%;
}

.right{
    align-items: flex-end;
    text-align: right;
}

.left{
    align-items: flex-start;
}

.center{
    text-align: center;
}

/* Section Specific */
.hero, .underwater, .pink-dune, .rune, .village{
    background-size: cover;
    background-position: center;
}

/* Hero/Home */
.hero{
    background-position: 40% 60%;
    background-image: url(../images/sandDune_bg.jpg);

    .section-container{
        margin-bottom: 4rem;
    }
}

/* Underwater/Atmosphere */
.underwater{
    background-image: url(../images/underwater_bg.jpg);
    color: var(--off-white);

    .bubble-container{
        position: absolute;
        width: 100%;
        height: 100vh;
    }

    .bubble{
        position: absolute;
        bottom: -6rem;
        width: 3rem;
        mix-blend-mode: overlay;
        animation: floatUp 15s infinite linear;
    }

    .bubble:nth-child(1){
        left: 10%;
        animation-duration: 12s;
        animation-delay: 0s;
    }

    .bubble:nth-child(2){
        left: 40%;
        animation-duration: 15s;
        animation-delay: 4s;
    }

    .bubble:nth-child(3){
        left: 25%;
        animation-duration: 10s;
        animation-delay: 2s;
    }

    .bubble:nth-child(4){
        left: 70%;
        animation-duration: 18s;
        animation-delay: 7s;
    }

    .bubble:nth-child(5){
        left: 85%;
        animation-duration: 14s;
        animation-delay: 1s;
    }

    .bubble:nth-child(6){
        left: 55%;
        animation-duration: 16s;
        animation-delay: 5s;
    }

    .sm{
        width: 3rem;
    }

    .m{
        width: 4rem;
    }

    .lg{
        width: 6rem;
    }
}

/* Pink Dune/Connection */
.pink-dune{
    background-image: url(../images/pinkDune_bg.jpg);
    background-position: 10% 50%;
    color: var(--red);

    .text-wrapper{
        margin-top: 8em;
    }
}

/* Village/Mechanics */
.village{
    background-image: url(../images/village_bg.jpg);
    color: var(--crimson);

    h2{
        margin-bottom: 0.5em;
    }

    .card-container{
        display: flex;
        gap: 2rem;
    }

    .card{
        position: relative;
        background-color: var(--card);
        padding: 2rem;
        width: calc(33.33% - 1.5rem);
        border-radius: 1rem;
        backdrop-filter: blur(0.15rem);
        transition: transform 0.3s ease-in-out;
        text-align: left;
    }

    .card:hover{
        transform: translateY(-0.5rem);
    }

    .star1-float{
        position: absolute;
        width: 7rem;
        top: -5rem;
        right: -0.5rem;
    }

    .star2-float{
        position: absolute;
        width: 7rem;
        bottom: -3rem;
        right: -3rem;
    }

    .star-container{
        position: absolute;
        width: 100%;
        height: 100vh;
    }

    .stars{
        position: absolute;
        bottom: -3rem;
        animation: starFloat 20s infinite linear;
    }

    .stars:nth-child(1){
        left: 5%;
        width: 12%;
        animation-duration: 18s;
        animation-delay: 0s;
    }

    .stars:nth-child(2){
        left: 35%;
        width: 8%;
        animation-duration: 25s;
        animation-delay: 5s;
    }

    .stars:nth-child(3) {
        left: 65%;
        width: 10%;
        animation-duration: 22s;
        animation-delay: 2s;
    }

    .stars:nth-child(4) {
        left: 85%;
        width: 10%;
        animation-duration: 30s;
        animation-delay: 10s;
    }
}

/* Rune/Platforms */
.rune{
    background-image: url(../images/rune_bg.jpg);
    color: var(--off-white);

    .text-wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        margin-top: 0;
        margin-bottom: 10rem;
        opacity: 0;
        margin-bottom: 10rem;

        .button{
            width: fit-content;
        }
    }

    .platform-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4rem;

        img{
            height: 4rem;
        }
    }
}

.rune.active .text-wrapper{
    animation: fadeIn 1s 3s forwards;
}


/* -------------------------------------------------------------------------- */
/*                                 Animations                                 */
/* -------------------------------------------------------------------------- */
.hero-container, .enviro-container, .enviro-container-1, .enviro-container-2, .gameplay-container, .temple-container{
    pointer-events: none;
    position: absolute;
    z-index: 100;
}

/* Hero/Home */
.hero-container{
    bottom: 0;
    left: 5%;

    #heroContainer{
        width: 80%;
    }
}

/* Environment/Atmosphere */
.enviro-container{
    bottom: -2rem;
    left: -1rem;
    opacity: 1;

    transition: opacity 0.2s ease-in;

    #enviroContainer{
        width: 70%;
    }
}

.enviro-container-1{
    bottom: 4rem;
    left: 12rem;
    opacity: 1;

    transition: opacity 0.2s ease-in;

    #enviroContainer_1{
        width: 70%;
    }
}

/* Gameplay/Connection */
.gameplay-container{
    bottom: -4rem;
    right: -10rem;

    #gameplayContainer{
        width: 90%;
    }
}

/* Temple/Platforms */
.temple-container{
    bottom: -0.25rem;
    left: 50%;
    transform: translateX(-50%);

    #templeContainer{
        width: clamp(31rem, 72rem, 72rem);
    }
}

footer{
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.25rem;

    transform: translateX(-50%);
    font-size: 0.8rem;
    color: var(--off-white);
    z-index: 200;

    .links{
        display: flex;
        gap: 0.5rem;
    }

    a{
        text-transform: uppercase;
        color: var(--off-white);
        text-decoration: none;

        transition: all 0.15s ease-in;
    }

    a:hover{
        font-weight: 600;
        transform: scale(1.05);
    }
}


/* -------------------------------------------------------------------------- */
/*                                 Key Frames                                 */
/* -------------------------------------------------------------------------- */
@keyframes floatUp{
    0%{
        transform: translateY(0) translateX(0);
    }
    50%{
        transform: translateY(-50vh) translateX(2.5rem);
    }
    100%{
        transform: translateY(-110vh) translateX(-2rem);
    }
}

@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 100%;
    }
}

@keyframes starFloat{
    0%{
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    50%{
        transform: translateY(-55vh) translateX(5rem) rotate(45deg);
    }
    100%{
        transform: translateY(-120vh) translateX(-3rem) rotate(90deg);
    }
}


/* -------------------------------------------------------------------------- */
/*                                Media Screens                               */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 800px){
    .section-container{
        justify-content: center;
    }

    .right, .left, .center{
        align-items: center;
        text-align: center;

        p{
            text-align: justify;
        }
    }

    .text-wrapper{
        width: 100%;
    }

    .card-container{
        flex-direction: column;
    }

    #menu{
        display: none;
    }

    /* Hero/Home */
    .hero{
        background-image: url(../images/sandDune_mobile.jpg);
        background-position: 50% 90%;
    }

    .hero-container{
        left: -7rem;
        bottom: -4rem;
    }

    .fp-responsive .section.hero{
        height: 820px !important;
    }

    /* Underwater/Atmosphere */
    .fp-responsive .section.underwater{
        height: 820px !important;
    }

    .enviro-container, .enviro-container-1{
        opacity: 0;
    }

    /* Pink Dune/Connection */
    .pink-dune{
        background-image: url(../images/pinkDune_mobile.jpg);
        background-position: 0% 15%;

        .text-wrapper{
            padding-bottom: 5rem;
        }
    }

    .gameplay-container{
        width: 55rem;
        right: clamp(-7rem, -10rem, -10rem);
    }

    .fp-responsive .section.pink-dune{
        height: 900px !important;
    }

    /* Village/Mechanics */
    .village{
        background-image: url(../images/village_mobile.jpg);
        background-position: 0 0;

        h2{
            width: 80%;
        }

        .card{
            text-align: center;
            width: 100%;
        }
    }

    .fp-responsive .section.village{
        height: 1200px !important;
    }

    /* Rune/Platforms */
    .rune{
        .text-wrapper{
            margin-bottom: clamp(13rem, 8rem, 8rem);
        }
    }

    .fp-responsive .section.rune{
        height: 800px !important;
    }
}