/* Basic page styling */
body {
  margin: 0;
  background: #1f1f1f;
  color: #f4f3ef;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 20px;
}

.stage {
  margin-top: 24px;
  display: grid;
  place-items: center;
  min-height: 60vh;
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 16px;
}


#OuterHex1,
#OuterHex2,
#OuterHex3,
#OuterHex4,
#OuterHex5,
#OuterHex6 {
  opacity: 0;
  pointer-events: none;

  transform: translateY(10px) scale(0.96);
  filter: blur(2px);

  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(.2,.9,.2,1),
    filter 260ms ease;
}

#Slice1,
#Slice2,
#Slice3,
#Slice4,
#Slice5,
#Slice6 {
  cursor: pointer;
  transition: filter 0.15s ease, fill 0.15s ease;
}

#Slice1:hover ~ #OuterHex1,
#Slice2:hover ~ #OuterHex2,
#Slice3:hover ~ #OuterHex3,
#Slice4:hover ~ #OuterHex4,
#Slice5:hover ~ #OuterHex5,
#Slice6:hover ~ #OuterHex6 {
  opacity: 1;
  pointer-events: auto;

  transform: translateY(0) scale(1);
  filter: blur(0);
}

#Slice1:hover,
#Slice2:hover,
#Slice3:hover,
#Slice4:hover,
#Slice5:hover,
#Slice6:hover {
  filter: saturate(1.3) brightness(1.05);
}

#Slice1:hover ~ #OuterHex1 { filter: drop-shadow(0 10px 18px rgba(143,166,195,.35)); }
#Slice2:hover ~ #OuterHex2 { filter: drop-shadow(0 10px 18px rgba(197,138,138,.35)); }
#Slice3:hover ~ #OuterHex3 { filter: drop-shadow(0 10px 18px rgba(226,211,154,.35)); }
#Slice4:hover ~ #OuterHex4 { filter: drop-shadow(0 10px 18px rgba(214,163,108,.35)); }
#Slice5:hover ~ #OuterHex5 { filter: drop-shadow(0 10px 18px rgba(140,106,216,.35)); }
#Slice6:hover ~ #OuterHex6 { filter: drop-shadow(0 10px 18px rgba(121,201,139,.35)); }