@import url(rules.css);

*,
ul,
li,
a,
h1,
h2,
h3,
p {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    max-height: 100svh;
    font-family: var(--ff);
    background-color: var(--background);
    overflow: hidden;
}

a {
    display: block;
    font-family: var(--ff);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 200;
    color: var(--surface);
    line-height: 1;
    text-shadow: 0 1lh 0 var(--accent);
    overflow: hidden;
    transition-behavior: allow-discrete;

    span {
        position: relative;
        display: inline-block;
    }

    &:hover {
        span {
            animation: up 400ms forwards;
            animation-delay: calc(sibling-index() * 0.07s);
            font-family: var(--ff-accent);
        }
    }
}

h1 {
    margin-block-start: -5rem;
    font-family: var(--ff-accent);
    font-size: 3em;
    text-align: center;
    color: var(--surface);

    @media (width > 50em) {
        font-size: 5em;

        span {
            font-size: 2.5em;
        }
    }

    span {
        font-size: 1.5em;
        -webkit-text-stroke: 0.25px var(--surface);
        color: transparent;
    }
}

p {
    font-family: var(--ff);
    font-size: 1.125em;
    line-height: 1.5;
    color: var(--surface);
    text-align: center;
}

@keyframes up {
    100% {
        translate: 0 -100%;
    }
}

.wrapper {
    width: 95%;
    margin-inline: auto;
    z-index: 1;

    @media (width > 50em) {
        width: min(80%, 1080px);
    }
}

header {
    z-index: 9999 !important;
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--gap) * 2) 0;

    @media (width > 50em) {
        padding: calc(var(--gap) * 5) 0;
    }

    svg {
        width: 10rem;

        #r,
        #dot {
            fill: var(--accent);
        }

        #logotype,
        #agency {
            fill: var(--surface);
        }
    }

    ul {
        display: flex;
        list-style: none;
        gap: calc(var(--gap) * 4);
    }
}

.hero-bg {
    position: absolute;
    left: 50%;
    top: 35%;
    translate: -50% 0;
    width: 100%;
    height: 70vh;
    border-radius: 10%;
    background-image:
        radial-gradient(at 30% 15%, var(--adjacent), transparent 50%),
        radial-gradient(at 15% 30%, var(--adjacent2), transparent 50%),
        radial-gradient(at 75% 10%, var(--accent), transparent 70%);
    animation: moveGradient 10s var(--easing) infinite;

    transform-origin: center;
    filter: blur(100px);
    z-index: -1;
}

@keyframes moveGradient {
    0% {
        background-position: 0% 35%;
        background-size: 100% 200%;
    }
    50% {
        background-position: 100% 0;
        background-size: 200% 100%;
    }
    100% {
        background-position: 0% 35%;
        background-size: 100% 200%;
    }
}

.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 2rem;
    height: 1.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10001; /* Above the nav overlay */
}

.menu-toggle .line {
    width: 100%;
    height: 2px;
    background-color: var(--surface);
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

/* Button Animation when open */
body.menu-open .menu-toggle .line:first-child {
    transform: translateY(9px) rotate(45deg);
}
body.menu-open .menu-toggle .line:last-child {
    transform: translateY(-9px) rotate(-45deg);
}

nav.main-nav {
    position: fixed;
    inset: 0; /* top:0, right:0, bottom:0, left:0 */
    background-color: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;

    /* Hiding Logic */
    opacity: 0;
    pointer-events: none;
    translate: 0 -20px;
    transition:
        opacity 0.4s ease,
        translate 0.4s ease;
    z-index: 10000;
}

/* Active State (Triggered by JS) */
body.menu-open nav.main-nav {
    opacity: 1;
    pointer-events: all;
    translate: 0 0;
}

nav.main-nav ul {
    display: flex;
    flex-direction: column; /* Stack items on mobile */
    list-style: none;
    gap: calc(var(--gap) * 4);
    text-align: center;
}

@media (width > 50em) {
    /* Hide the button */
    .menu-toggle {
        display: none;
    }

    /* Reset Nav to Horizontal Row */
    nav.main-nav {
        position: static;
        inset: auto;
        background-color: transparent;
        display: block;
        opacity: 1;
        pointer-events: all;
        translate: 0 0;
        z-index: auto;
    }

    nav.main-nav ul {
        flex-direction: row; /* Horizontal */
        gap: calc(var(--gap) * 4);
    }

    nav.main-nav ul a {
        font-size: var(--fs); /* Return to standard size */
    }
}

.hero {
    height: 100vh;
    display: grid;
    place-content: center;
}