html {
    scroll-behavior: smooth;
}

body {
    background-color: black;
    margin: 0px;
    opacity: 0;
    animation: fadeIn 500ms ease-in-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

#menu {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    opacity: 0;
    animation-delay: 0.5s; /* Delay to start after body fades in */
    animation-delay: 0.5s; /* Delay to start after body fades in */
    animation: fadeIn 2s ease-in-out forwards;
    animation-delay: 0.5s; /* Delay to start after body fades in */
    animation-delay: 0.5s; /* Delay to start after body fades in */
    animation-delay: 0.5s; /* Delay to start after body fades in */
    animation: fadeIn 2s ease-in-out forwards;
    animation-delay: 10ms; /* Delay to start after body fades in */
}

.menu-item {
    color: white;
    cursor: pointer;
    display: block;
    font-family: 'Ibarra Real Nova', serif;
    font-size: clamp(3rem, 8vw, 8rem);
    padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
    text-decoration: none;
    transition: opacity 400ms ease, color 400ms ease; /* Added color transition */
    opacity: 0;
    animation: fadeIn 2s ease-in-out forwards;
    animation-delay: 10ms; /* Delay to start after menu fades in */
}

.menu-item:hover {
    color: #1f1355; /* Change color on hover */
}

#menu-items {
    margin-left: clamp(4rem, 20vw, 48rem);
    position: relative;
    z-index: 2;
}

#menu-items:hover > .menu-item {
    opacity: 0.3;
}

#menu-items:hover > .menu-item:hover {
    opacity: 1;
}

#menu-items:hover ~ #menu-background-pattern {
    background-size: 11vmin 11vmin;
    opacity: 50%;
}

#menu[data-active-index="0"] > #menu-background-pattern {
    background-position: 0% -25%;
}

#menu[data-active-index="1"] > #menu-background-pattern {
    background-position: 0% -50%;
}

#menu[data-active-index="2"] > #menu-background-pattern {
    background-position: 0% -75%;
}

#menu-background-pattern {
    background-image: radial-gradient(
        rgba(255, 255, 255, 0.1) 9%, 
        transparent 10%
    );
    background-position: 0% 0%;
    background-size: 12vmin 12vmin;
    height: 100vh;
    left: 0px;
    position: absolute;
    top: 0px;
    transition: opacity 800ms ease, 
        background-size 800ms ease,
        background-position 800ms ease;
    width: 100vw;
    z-index: 1;
    opacity: 0;
    animation: fadeIn 2s ease-in-out forwards, motionBlur 2s ease-in-out forwards;
    animation-delay: .5s; /* Delay to start after menu fades in */  

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
    to {
        opacity: 1;
    }
}

@keyframes motionBlur {
    0% {
        filter: blur(10px);
    }
    100% {
        filter: blur(0px);
    }
}