/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  /* background image fill */
/*  background: url('icons/bg.png') center center / cover no-repeat fixed; */
  min-height: 100vh;
  position: relative; /* allow absolutely-positioned menu to center in viewport */
}

.menu-container {
  /* absolutely center the menu container in the viewport so it's vertically centered regardless of bio */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  transform-origin: center;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 80px; /* Add spacing between items */
  will-change: transform;
  padding: 20px 10px;
  width: min(1100px, 96%);     /* constrain width so it centers nicely on wide screens */
  z-index: 20; /* keep above the bio */
}

.menu-item {
  text-align: center;
  cursor: default; /* changed from pointer to default to indicate non-clickable for now */
  /* keep a smooth ease-out for when hover ends */
  transition: transform 300ms ease-out, filter 0.3s ease, opacity 0.25s ease;
  transform-origin: center;
  filter: blur(0); /* ensure no blur by default on the whole item */
  opacity: 1;
  position: relative; /* needed for absolute submenu */
  padding-bottom: 40px; /* reserve space below each item for multi-line subtitles */
}

.menu-item img {
  width: 80px;
  /* image should not apply its own scale – parent will scale both image and text */
  transition: filter 0.2s ease, opacity 0.25s ease;
}

/* spring keyframes for a subtle overshoot effect (include vertical movement so text moves with icon) */
@keyframes spring {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(22px) scale(1.35); }
  100% { transform: translateY(10px) scale(1.18); }
/*  100% { transform: translateY(8px) scale(1.25); } */
}

/* Scale entire item (icon + text) on hover */
.menu-item:hover {
  animation: spring 450ms cubic-bezier(0.34,1.56,0.64,1) both;
  filter: none; /* keep hovered item sharp */
  opacity: 1;
  /* final position handled by animation */
}

/* Submenu: tighter spacing and no visual background on icons */
.submenu {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px; /* even closer spacing */
  top: -180px; /* moved up */
  left: 90%;    /* shifted slightly more to the right */
  width: 300px; /* adjusted to match shift */
  transform: translateX(-40%) translateY(-8px); /* reduce left-translation so net shift is right */
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 240ms cubic-bezier(0.2,1,0.2,1);
  will-change: transform, opacity;
}

/* Consolidate child icon initial states and reveal animation */
.submenu img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  transform-origin: center;
  opacity: 0;
}

/* initial hidden state: top two start lower and slightly scaled down */
.submenu img:nth-child(1),
.submenu img:nth-child(2) {
  transform: translateX(0) translateY(30px) rotate(0) scale(0.8);
  transition: transform 300ms cubic-bezier(0.2,1,0.2,1), opacity 220ms ease;
}

/* initial state for 3rd child: already positioned at final X/Y but scaled down */
.submenu img:nth-child(3) {
  transform: translateX(var(--tx)) translateY(var(--ty)) rotate(var(--rot)) scale(0.8);
  transition: transform 300ms cubic-bezier(0.2,1,0.2,1), opacity 220ms ease;
}

/* staggered delays for reveal */
.menu-item:hover .submenu img:nth-child(1) { transition-delay: 0ms; }
.menu-item:hover .submenu img:nth-child(2) { transition-delay: 60ms; }
.menu-item:hover .submenu img:nth-child(3) { transition-delay: 120ms; }

/* reveal: translate to target X/Y, scale to 1 and fade in */
.menu-item:hover .submenu img:nth-child(1),
.menu-item:hover .submenu img:nth-child(2),
.menu-item:hover .submenu img:nth-child(3) {
  transform: translateX(var(--tx)) translateY(var(--ty)) rotate(var(--rot)) scale(1);
  opacity: 1;
}

/* updated per-child offsets for tighter top pair */
.submenu img:nth-child(1) {
  --tx: -40px; --ty: -8px;  --rot: -15deg; /* left-up (closer) */
  z-index: 1;
}
.submenu img:nth-child(2) {
  --tx: 40px;  --ty: -8px;  --rot: 15deg;  /* right-up (closer) */
  z-index: 1;
}
.submenu img:nth-child(3) {
  --tx: -137px;    /* shifted left to sit between the top two but more to the left */
  --ty: 62px;     /* placed in the row below */
  --rot: 10deg;   /* rotated 10 degrees */
  z-index: 0;     /* behind the top two so it sits visually between them */
}

/* On hover, just fade/scale it in (no positional movement) */
.menu-item:hover .submenu img:nth-child(3) {
  transform: translateX(var(--tx)) translateY(var(--ty)) rotate(var(--rot)) scale(1);
  opacity: 1;
}

/* reveal/animate to per-child positions when parent is hovered */
.menu-item:hover .submenu {
  transform: translateX(-45%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.menu-item:hover .submenu img {
  opacity: 1;
}
.menu-item:hover .submenu img:nth-child(1),
.menu-item:hover .submenu img:nth-child(2),
.menu-item:hover .submenu img:nth-child(3) {
  transform: translateX(var(--tx)) translateY(var(--ty)) rotate(var(--rot)) scale(1);
}

/* ensure primary icon does not have independent translate so text moves with parent animation */
.menu-item:hover > img {
  transform: none;
}

/* Blur and dim all other menu-items (image + text) when one is hovered */
.menu-container:has(.menu-item:hover) .menu-item:not(:hover) {
  filter: blur(9px);
  opacity: 0.4;
}

/* Smaller, lighter labels under icons */
.menu-item h2 {
  font-size: 16px;
  font-weight: 500;
  margin-top: 8px;
  padding: 6px 20px;
  border-radius: 999px;
  background: #f0f0f0;
}

/* subtitle (plain text) shown on hover — positioned absolutely so it grows downward without shifting the icon */
.subtitle {
  position: absolute;
  left: 50%;
  top: calc(85% + 0px); /* sits below the h2 pill */
  transform: translateX(-50%) translateY(-6px);
  width: 30ch; /* roughly 4 words per line */
  text-align: center;

  padding: 0;
  background: transparent;
  color: #666;
  font-size: 12px;
  font-weight: 400;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
  white-space: normal;
  overflow: visible; /* allow multi-line to expand downward */
  z-index: 20;
}

.menu-item:hover .subtitle {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(6px);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #fff;
  padding: 20px;
  max-width: 600px;
  width: 90%;
  border-radius: 8px;
}

#closeModal {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

/* Bio section below icons (persistent, lower section) */
.persistent-bio, .bio {
  max-width: 600px;
  /* pin the bio to the lower viewport so it doesn't affect vertical centering of the menu */
  position: fixed;
  left: 50%;
  bottom: 150px;
  transform: translateX(-50%);
  text-align: center;
  color: #b3b3b3;
  font-size: 16px;
  line-height: 1.5;
  padding: 18px 20px;
  transition: filter 220ms ease, opacity 220ms ease, transform 260ms ease;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  z-index: 10;
}

/* Make persistent-bio follow the same blur/dim behavior as menu items */
.menu-container:hover ~ .persistent-bio,
.menu-container:hover ~ .bio {
  filter: none;
  opacity: 1;
}

/* When any menu-item is hovered, blur the persistent-bio to match other items */
.menu-container:has(.menu-item:hover) ~ .persistent-bio,
.menu-container:has(.menu-item:hover) ~ .bio {
  filter: blur(6px) grayscale(20%) brightness(.8);
  opacity: 0.9;
}

/* Also blur non-hovered items as before (keep existing behavior) */
.menu-container:has(.menu-item:hover) .menu-item:not(:hover) {
  filter: blur(9px);
  opacity: 0.4;
}