/* MENU SYSTEM */

#menu-icon {
  position: fixed;
  top: clamp(10px, 1.4vw, 20px);
  right: clamp(10px, 1.4vw, 20px);
  width: clamp(50px, 2.6vw, 100px);
  height: clamp(50px, 2.6vw, 100px);
  z-index: 999999;
  cursor: url('../cursor/cursorhover.cur'), pointer !important;
  transition: transform 0.2s ease;
}

#menu-icon:hover {
  transform: scale(0.95);
}

#menu-icon img {
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
  display: block;
   opacity: 1;              /* ensure fully visible by default */
}



/* Overlay */


/* Overlay */
/* Overlay (single, clean set) */
#menu-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  display: none;         /* hidden by default */
  justify-content: center;
  align-items: center;
  opacity: 0;            /* invisible */
  transition: opacity .5s ease-in-out;
  cursor: url('../cursor/cursor.cur'), pointer !important;
}

#menu-overlay.active {
  display: flex !important;  /* show it */
  opacity: 1 !important;     /* and fade in */
}




/* MENU ITEMS */

/* Menu Gallery Layout */
.menu-gallery {
  display: flex;
  gap: 30px;
  padding: 30px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Menu Item */
.menu-item {
  display: block;
  width: 22%;
  height: auto;
  overflow: hidden;
  transition: transform 0.3s ease;
  cursor: url('../cursor/cursorhover.cur'), pointer !important;
  perspective: 800px;
}

/* Image container */
.image-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  cursor: url('../cursor/cursorhover.cur'), pointer !important;
  transition: transform 0.4s ease;
  transform-style: preserve-3d;
}

.image-wrap:hover {
  transform: rotateY(10deg) rotateX(0deg);
}

/* Base Image (original image) */
.image-wrap img:not(.hover-image) {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  transition: filter 0.3s ease;
  filter: grayscale(100%);
}

/* Hover effect for base image */
.image-wrap:hover img:not(.hover-image) {
  filter: grayscale(0%);
}

/* Hover Image Overlay */
.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 2;
}

.image-wrap:hover .hover-image {
  opacity: 1;
}

/* Remove old text/line styling */
.hover-line,
.hover-text {
  display: none;
}

/* close image that sits on top visually but passes clicks through */
#menu-close-overlay {
  position: fixed;
  top: clamp(10px, 1.4vw, 20px);
  right: clamp(10px, 1.4vw, 20px);
  width: clamp(50px, 2.6vw, 100px);
  height: clamp(50px, 2.6vw, 100px);
  z-index: 1000000;        /* above #menu-icon */
  pointer-events: none;    /* clicks hit #menu-icon */
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
    cursor: url('../cursor/cursorhover.cur'), pointer !important;
}

body.menu-open #menu-close-overlay { opacity: 1; }
/* Show the close image whenever the overlay has .active */
body:has(#menu-overlay.active) #menu-close-overlay {
  opacity: 1 !important;
}
/* OPTIONAL: avoid any ghosting while menu is open */
body.menu-open #menu-icon img,
body.menu-open #menu-icon:hover img { opacity: 1 !important; }

/* base */
#menu-close-overlay {
  opacity: 0;
  transition: opacity .3s ease;
  transition-delay: 0s;              /* reset when closed */
  
}

/* when menu is open, wait for the overlay to finish fading before showing */
body.menu-open #menu-close-overlay {
  opacity: 1;
  transition-delay: .65s;            /* match #menu-overlay transition duration */
}