/* ==================== */
/* Variables (Custom Properties) */
/* ==================== */
:root {
    --clr-green: #9cee69;
    --clr-dark-green: #6cc832;
    --clr-orange: #fa3838;
    --clr-white: #f8f8f8;
    --clr-dark-grey: #333333;
    --clr-grey: #d9d9d9;
    --clr-black: #0b0b0b;
}

/* ==================== */
/* Base Styles */
/* ==================== */
body {
    background-color: var(--clr-green);
}

/* ==================== */
/* Cover Section */
/* ==================== */
.cover {
    /* Layout */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Positioning */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;

    /* Box Model */
    width: 100vw;
    height: 100vh;

    /* Visual Styles */
    background-color: var(--clr-green);
    opacity: 1;

    /* Transitions */
    transform: translateY(0%);
    transition: transform 0.5s cubic-bezier(0.85, 0, 0, 1), opacity 0s;
}

.cover.off {
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.85, 0, 0, 1) 0.5s, opacity 0s 1s;
    opacity: 0;
}

.cover h1 .word {
    /* Positioning */
    position: relative;

    /* Visual Styles */
    text-shadow: 0 1em 0 var(--clr-black);
}

.cover h1 .word.animate {
    /* Animations */
    animation: page 3s cubic-bezier(0.85, 0, 0, 1) 1s infinite;
}

@keyframes page {
    0% {
        top: 0;
    }
    50% {
        top: -1em;
    }
    100% {
        top: -1em;
    }
}

/* ==================== */
/* Header */
/* ==================== */
header {
    /* Layout */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.1rem;

    /* Positioning */
    position: fixed;
    z-index: 50;

    /* Box Model */
    padding: 1rem;
    width: fit-content;

    /* Visual Styles */
    mix-blend-mode: difference;
}

header h4 {
    /* Typography */
    color: var(--clr-white);
}

header p {
    /* Typography */
    font-family: var(--ff-text);
    color: var(--clr-white);
    font-weight: 600;

    /* Positioning */
    position: relative;
    top: -0.1em;

    /* Visual Styles */
    opacity: 1;
}

header a h4:hover {
    /* Visual Styles */
    color: var(--clr-white);
}

/* ==================== */
/* Menu Button */
/* ==================== */
.menu {
    /* Positioning */
    position: fixed;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 100;

    /* Box Model */
    height: fit-content;

    /* Visual Styles */
    mix-blend-mode: difference;
    user-select: none;
}

#menubtn {
    /* Box Model */
    width: 3rem;
    height: 3rem;

    /* Visual Styles */
    cursor: pointer;

    /* Transitions */
    transform: rotate(0deg);
    transition: transform 0.5s ease-in-out;
}

#menubtn rect {
    /* Visual Styles */
    fill: var(--clr-white);
}

#menubtn.on {
    /* Transitions */
    transform: rotate(135deg);
}

/* ==================== */
/* Overlay */
/* ==================== */
.overlay {
    /* Layout */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    /* Positioning */
    position: fixed;
    left: -100%;
    z-index: 50;

    /* Box Model */
    width: 0%;
    height: 100%;
    padding-bottom: 10rem;

    /* Visual Styles */
    background-color: #0b0b0bcc;
    backdrop-filter: blur(4rem);

    /* Transitions */
    transform-origin: left;
    transition: width 0.5s cubic-bezier(0.85, 0, 0, 1) 0.25s, left 0s 0.75s;
}

.overlay.on {
    /* Positioning */
    left: 0;

    /* Box Model */
    width: 100%;

    /* Transitions */
    transition: width 0.5s cubic-bezier(0.85, 0, 0, 1) 0s;
}

.overlay a {
    width: 10px;
}

.overlay h1 {
    /* Typography */
    color: var(--clr-white);
    font-size: 3rem;
    width: fit-content;
}

/* ==================== */
/* Half Circle */
/* ==================== */

/* ==================== */
/* Footer */
/* ==================== */
.footer {
    /* Box Model */
    padding: 1rem;
}

.footer .link {
    /* Layout */
    display: flex;
    gap: 1rem;
}

/* ==================== */
/* Cursor */
/* ==================== */
.secondary-cursor {
    /* Layout */
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    /* Positioning */
    position: fixed;
    z-index: 1000;

    /* Box Model */
    padding: 0.5rem 2rem;

    width: fit-content;

    /* Visual Styles */
    background-color: var(--clr-green);
    border-radius: 4rem;

    font-family: var(--ff-text);
    font-size: 1rem;
    white-space: nowrap;
    pointer-events: none;

    /* Transitions */
    transform: scale(0);
    transition: all 0.35s cubic-bezier(0, 0.75, 0.5, 1), transform 0.25s cubic-bezier(0, 0.75, 0.5, 1);
}

.secondary-cursor.show {
    /* Transitions */
    transform: scale(1);
    transition: all 0.35s cubic-bezier(0, 0.75, 0.5, 1), transform 0.5s cubic-bezier(0, 0.75, 0.5, 1);
}

/* ==================== */
/* Media Queries */
/* ==================== */
@media only screen and (min-width: 25em) {
    .secondary-cursor {
        display: flex;
    }
}

@media only screen and (min-width: 60em) {
    header {
        padding: 2rem;
    }

    .menu {
        right: 2rem;
        top: 2rem;
    }

    #menubtn {
        width: clamp(3rem, 4vw, 8rem);
        height: clamp(3rem, 4vw, 8rem);
        max-width: 6rem;
        max-height: 6rem;
    }

    .overlay {
        justify-content: center;
        padding-bottom: 0rem;
    }

    .footer {
        padding: 2rem;
    }
}