/* ============================================================
   Pop-out overlay menu — pixel "render" transition,
   staggered link reveal, 3D "fall back" text hover.

   INTEGRATION-SAFE: everything is scoped under .header-nav /
   body.menu-open. No global resets, no body/page styling —
   safe to drop into an existing stylesheet pipeline.

   Pairs with menu.html (markup) + menu.js (logic, needs GSAP 3).
   ============================================================ */

:root {
  --menu-font-display: "VT323", "Courier New", monospace; /* 8-bit pixel display face */
  --menu-font-ui: "Space Mono", monospace;          /* logo + [ ME X NU ] button */
  --menu-bg: #000;
  --menu-fg: #fff;
  --menu-border: #000;
  --menu-row-first-height: 80px;
  --menu-z: 90; /* overlay layer; header sits at +10, pixel grid at +20 */
}

.header-nav,
.header-nav * {
  box-sizing: border-box;
}

body.menu-open { overflow: hidden; }

/* ---------- header bar ---------- */

.header-nav-top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  left: 0;
  margin: 0;
  padding: 22px 28px;
  position: fixed;
  right: 0;
  top: 0;
  transition: color .3s;
  z-index: calc(var(--menu-z) + 10);
}

body.menu-open .header-nav-top { color: var(--menu-fg); }

.header-nav .logo {
  color: inherit;
  font-family: var(--menu-font-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
}

.header-nav .logo .bracket { opacity: .35; }

/* ---------- [ ME X NU ] button ---------- */

.header-nav .menu-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  margin: 0;
  padding: 0;
}

.header-nav .text-btn {
  display: flex;
  font-family: var(--menu-font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 1px;
  line-height: .9;
  user-select: none;
}

.header-nav .text-btn .bracket {
  opacity: 0;
  position: relative;
  top: 1px;
  transition: transform .3s, opacity .3s;
}

.header-nav .text-btn .me { transform: translateX(6px); transition: transform .3s; }
.header-nav .text-btn .nu { transform: translateX(-6px); transition: transform .3s; }

.header-nav .text-btn .x-sign {
  font-weight: 900;
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity .3s, transform .4s;
}

.header-nav .menu-btn:hover .bracket { opacity: 1; }
.header-nav .menu-btn:hover .bracket:first-child { transform: translateX(-10px); }
.header-nav .menu-btn:hover .bracket:last-child { transform: translateX(10px); }

.header-nav .menu-btn-wrapper.active .me,
.header-nav .menu-btn-wrapper.active .nu { transform: translateX(0); }

.header-nav .menu-btn-wrapper.active .x-sign {
  opacity: 1;
  transform: rotate(180deg);
}

/* ---------- pixel "render" grid ---------- */

.header-nav .pixel-grid {
  display: none;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  height: 100svh;
  inset: 0;
  pointer-events: none;
  position: fixed;
  width: 100svw;
  z-index: calc(var(--menu-z) + 20);
}

.header-nav .pixel-grid div {
  height: 100%;
  opacity: 0;
  outline: 1px solid #1b1b1b;
  width: 100%;
}

/* ---------- overlay menu ---------- */

.header-nav .overlayMenu-c {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: var(--menu-z);
}

.header-nav .linkOpen {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}

.header-nav .overlayMenu {
  background: var(--menu-bg);
  color: var(--menu-fg);
  display: none;
  height: 100svh;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
  position: absolute;
  width: 100svw;
}

.header-nav .rowContainer {
  display: flex;
  flex-direction: column;
  height: 100svh;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav .row {
  border: 2px solid var(--menu-border);
  border-top: none;
  flex: 1 1 auto;
  margin: 0 20px;
  padding: 0;
  user-select: none;
}

.header-nav .rowFirst,
.header-nav .rowSocial {
  border-left: none;
  border-right: none;
  flex: 0 1 auto;
  height: var(--menu-row-first-height);
  margin: 0 20px;
}

.header-nav .rowSocial { border-bottom: none; }

.header-nav .rowLink {
  height: 20%;
  transition: background-color .3s;
}

.header-nav .rowLink:hover { background-color: #0f0f0f; }

/* clip-path masks the slide-up reveal; menu.js removes it
   afterwards so the 3D hover can overflow the row */
.header-nav .rowLink .link-w {
  clip-path: inset(0 0 -10% 0);
  display: flex;
  justify-content: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.header-nav .rowLink a {
  color: var(--menu-fg);
  /* cap by viewport width as well as height so long labels can't overflow */
  font-size: clamp(2.2rem, min(11vh, 13vw), 8rem);
  letter-spacing: .05em;
  perspective: 480px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- "fall back" cube hover ---------- */

.header-nav .spanCube {
  display: block;
  font-family: var(--menu-font-display);
  /* VT323 ships only in 400 — synthetic bold would blur the pixels */
  font-weight: 400;
  line-height: .9;
  position: relative;
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform .35s ease-in-out;
}

/* invisible copy that reserves layout space */
.header-nav .spanCube .req {
  color: transparent;
  display: block;
  position: absolute;
  width: 100%;
}

.header-nav .spanCube .front {
  backface-visibility: hidden;
  color: var(--menu-fg);
  display: block;
  opacity: 1;
  position: relative;
  transition: opacity .35s ease-in-out;
}

.header-nav .spanCube .back {
  backface-visibility: hidden;
  color: var(--item-color, #fff);
  display: block;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateZ(0) rotateX(-90deg);
  transition: opacity .35s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
  .header-nav .rowLink a:hover .spanCube {
    transform: translateZ(-100px) rotateX(90deg);
  }
  .header-nav .rowLink a:hover .spanCube .front { opacity: 0; }
  .header-nav .rowLink a:hover .spanCube .back { opacity: 1; }
}

/* ---------- social icons row ---------- */

.header-nav .icons-c {
  align-items: center;
  display: flex;
  height: var(--menu-row-first-height);
  justify-content: space-between;
}

.header-nav .icons-c a {
  color: #777;
  opacity: 0;
  transition: color .3s;
}

.header-nav .icons-c a:hover { color: var(--menu-fg); }

/* ---------- small screens ---------- */

@media (max-width: 700px) {
  :root { --menu-row-first-height: 60px; }
  .header-nav .rowLink a { font-size: clamp(1.5rem, min(8vh, 10vw), 3rem); }
  .header-nav-top { padding: 16px 18px; }
}