/* Variables */
:root {
    --menu-background: rgba(0, 0, 0, 0.80);
    --menu-color: #fff;
    --transition-duration: 0.5s; /* Adjusted for smoother fade */
}

/* Full-Page Menu */
.full-page-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: var(--menu-background);*/
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Start fully transparent */
    visibility: hidden; /* Hide from view */
    transition: none;
    z-index: 1001; /* Ensure the menu is above the header */
}

.full-page-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--menu-background); /* Semi-transparent background */
    backdrop-filter: blur(5px); /* Blur effect */
    -webkit-backdrop-filter: blur(5px); /* For Safari support */
    z-index: -1; /* Place it behind the menu content */
}


.full-page-menu ul {
    list-style: none;
    text-align: center;
    padding: 20px;
}

.full-page-menu li {
    margin: 20px 0;
    line-height: 0.9;
}

.full-page-menu a {
    font-family: "greycliff-cf", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-transform: lowercase;
    color: var(--menu-color);
    text-decoration: none;
    font-size: 3em;
    transition: color 0.3s ease;
    display: inline-block;
    position: relative;
}

/* Hover state: Only change the text color */
.full-page-menu a:hover {
  color: red;
}

/* Create the custom underline */
.full-page-menu a::after {
  content: ''; /* Empty content to create the underline  */
  position: absolute;
  left: 0;
  bottom: -2px; /* Distance between text and underline  */
  height: 2px; /* Set the underline thickness */
  width: 100%;
  background-color: red; /* Underline color */
  opacity: 0; /* Initially invisible */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition */
  transform: scaleX(0); /* Start with no visible underline */
  transform-origin: right; /* Animate from right to left */
}

/* Hover state for custom underline */
.full-page-menu a:hover::after {
  opacity: 1; /* Make the underline visible */
  transform: scaleX(1); /* Expand underline from right to left */
  transform-origin: left; /* Animate to full-width underline */
}

body.menu-open {
    overflow: visible;
}

/* When menu is open, set opacity and visibility */
body.menu-open .full-page-menu {
    opacity: 1; /* Fade in to fully opaque */
    visibility: visible; /* Make it visible */
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0s;
}

/* When the menu is closing */
body.menu-closing .full-page-menu {
    opacity: 0; /* Fade out smoothly */
    visibility: hidden; /* Hide the menu after the opacity transition completes */
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s; /* Delay visibility until opacity transition completes */
}


/* Keyframes for fade-in ripple effect */
@keyframes fadeInRipple {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Initial state of menu items */
.full-page-menu ul li {
    opacity: 0;
    transform: translateY(-20px);
}

/* Animation when menu is open */
body.menu-open .full-page-menu ul li {
    animation: fadeInRipple 0.6s ease forwards;
}

/* Staggered animation delays */
body.menu-open .full-page-menu ul li:nth-child(1) {
    animation-delay: 0.1s;
}

body.menu-open .full-page-menu ul li:nth-child(2) {
    animation-delay: 0.2s;
}

body.menu-open .full-page-menu ul li:nth-child(3) {
    animation-delay: 0.3s;
}

body.menu-open .full-page-menu ul li:nth-child(4) {
    animation-delay: 0.4s;
}

body.menu-open .full-page-menu ul li:nth-child(5) {
    animation-delay: 0.5s;
}

/* Keyframes for closing animation */
@keyframes fadeOutSlide {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(20px);
    }
}

/* Keyframes for fading out the background */
@keyframes fadeOutBackground {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* When closing the menu */
body.menu-closing .full-page-menu ul li {
    animation: fadeOutSlide 0.5s ease forwards;
}

body.menu-closing .full-page-menu {
    animation: fadeOutBackground 0.5s ease forwards;
}

/* Ensure that the menu is hidden after the animation */
body.menu-closing .full-page-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s; /* Delay visibility hiding */
}

/* Prevent scrolling when menu is open */
body.menu-open {
    position: fixed;
    width: 100%;
    top: var(--scroll-position);
}