.glitch-nav {
  margin: 12px 0 16px 0;
  border: 2px inset #4a6a7f;
  background: rgba(0,0,0,0.15);
  overflow: hidden;
}

/* każdy slice to link */
.glitch-nav .nav-slice {
  position: relative;
  display: block;
  height: 36px;            /* 4-6 pasków = ~180-220px */
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.35);

  background-image: url("/assets/img/nav-collage.png");
  background-repeat: no-repeat;
  background-size: 100% calc(var(--nav-slices) * 36px);
  /* ważne: wysokość tła = slices * height paska */
  filter: saturate(0.95) contrast(1.05);

  transition:
    transform 0.05s steps(2),
    filter 0.05s steps(2);
}

/* pocięcie: każdy pasek pokazuje inny fragment */
.glitch-nav .nav-slice[data-slice="0"] { background-position: 0 0; transform: translateX(3px); }
.glitch-nav .nav-slice[data-slice="1"] { background-position: 0 -36px; transform: translateX(-2px); }
.glitch-nav .nav-slice[data-slice="2"] { background-position: 0 -72px; transform: translateX(4px); }
.glitch-nav .nav-slice[data-slice="3"] { background-position: 0 -108px; transform: translateX(-3px); }
.glitch-nav .nav-slice[data-slice="4"] { background-position: 0 -144px; transform: translateX(2px); }
.glitch-nav .nav-slice[data-slice="5"] { background-position: 0 -180px; transform: translateX(-2px); }

/* tekst */
.glitch-nav .nav-text {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Tahoma", Arial, sans-serif;
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  text-shadow:
    2px 0 0 rgba(0, 255, 255, 0.75),
   -2px 0 0 rgba(255, 0, 0, 0.75),
    0 2px 0 rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* pseudo "kolorowe duchy" */
.glitch-nav .nav-slice::before,
.glitch-nav .nav-slice::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-repeat: inherit;
  background-size: inherit;
  background-position: inherit;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.glitch-nav .nav-slice::before {
  transform: translateX(3px);
  filter: hue-rotate(90deg) saturate(1.4);
}

.glitch-nav .nav-slice::after {
  transform: translateX(-3px);
  filter: hue-rotate(-90deg) saturate(1.4);
}

/* hover: agresywny skok */
.glitch-nav .nav-slice:hover {
  transform: translateX(18px);
  filter: hue-rotate(90deg) invert(1) contrast(1.15);
}

.glitch-nav .nav-slice:hover::before,
.glitch-nav .nav-slice:hover::after {
  opacity: 0.55;
}

/* JS glitch pulse */
.glitch-nav .nav-slice.glitch-active {
  transform: translateX(-22px);
  filter: invert(1) contrast(1.25) saturate(0.9);
}

.glitch-nav .nav-slice.glitch-active::before,
.glitch-nav .nav-slice.glitch-active::after {
  opacity: 0.75;
}

/* click "rozjechanie" całego menu */
.glitch-nav.glitch-explode .nav-slice:nth-child(odd) { transform: translateX(25px) !important; }
.glitch-nav.glitch-explode .nav-slice:nth-child(even) { transform: translateX(-25px) !important; }

@media (max-width: 1000px) {
  .glitch-nav .nav-slice { height: 32px; }
  .glitch-nav .nav-text { font-size: 12px; }
}