.project-tabs {
  position: relative;
  z-index: 8;
  display: flex;
  justify-content: center;
  gap: 6px;
  max-width: 1240px;
  margin: -43px auto 17px;
  padding: 0 12px;
}

/* Persistent navigation across every section. */
.nav {
  position: fixed;
  transition: height .3s, background .3s, border-color .3s, box-shadow .3s, backdrop-filter .3s;
}
.nav.scrolled {
  height: 70px;
  background: rgba(7, 6, 20, .78);
  border-bottom-color: rgba(158, 104, 255, .2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.nav.scrolled .nav-cta {
  background: rgba(126, 74, 230, .12);
  border-color: rgba(169, 119, 255, .3);
}
#home, #about, #works, #experience, #contact { scroll-margin-top: 70px; }

.project-tabs button {
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(17, 13, 35, 0.55);
  color: #777181;
  font-size: 8px;
  letter-spacing: 0.4px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s, transform .25s, box-shadow .25s;
}

.project-tabs button:hover {
  color: #d8c9f3;
  border-color: rgba(158, 104, 255, 0.42);
  transform: translateY(-2px);
}

.project-tabs button.active {
  color: #fff;
  border-color: #9564ef;
  background: linear-gradient(120deg, #7041d7, #9862ef);
  box-shadow: 0 7px 22px rgba(113, 62, 213, 0.28);
}

@media (max-width: 800px) {
  .project-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    margin: -58px -20px 14px;
    padding: 4px 20px 10px;
    scrollbar-width: none;
  }
  .project-tabs::-webkit-scrollbar { display: none; }
  .project-tabs button { padding: 9px 12px; }
  .gallery-nav { margin-top: 0; }
}

/* Every visible spatial card can be selected directly, including the second row. */
.spatial-stage { touch-action: pan-y; }
.spatial-stage.touching .project-card { transition-duration: .18s; }
.spatial-stage.swiped .project-card { transition-duration: .62s; }
.project-card[aria-hidden="false"] {
  pointer-events: auto;
  cursor: pointer;
}
.project-card[aria-hidden="false"]:not(.is-active):hover {
  filter: saturate(.95) brightness(1.13);
}
.stage-hit {
  position: absolute;
  top: 70px;
  bottom: 80px;
  z-index: 18;
  width: 29%;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stage-hit-prev { left: 0; }
.stage-hit-next { right: 0; }
.stage-hit span {
  position: absolute;
  top: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(168,116,255,.28);
  border-radius: 50%;
  background: rgba(14,10,31,.55);
  color: #b998f3;
  opacity: 0;
  transform: translateY(-50%) scale(.8);
  transition: .25s;
  backdrop-filter: blur(8px);
}
.model-cover { background: #060817; }
.model-cover:before { content: ""; position: absolute; inset: -20px; background: linear-gradient(rgba(8,5,20,.16),rgba(8,5,20,.3)),url('assets/models/model-card-cover.jpg') center/cover; filter: blur(14px); opacity: .62; transform: scale(1.08); }
.model-cover img { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: none; }
.stage-hit-prev span { left: 12%; }
.stage-hit-next span { right: 12%; }
.stage-hit:hover span { opacity: 1; transform: translateY(-50%) scale(1); }

@media (min-width: 801px) {
  .gallery-nav .gallery-prev,
  .gallery-nav .gallery-next {
    position: absolute;
    bottom: 88px;
    z-index: 10;
    min-width: 150px;
    padding: 12px 4px;
  }
  .gallery-nav .gallery-prev { left: 0; justify-content: flex-start; }
  .gallery-nav .gallery-next { right: 0; justify-content: flex-end; }
}

@media (max-width: 800px) {
  .project-card[aria-hidden="false"] {
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }
  .project-card[aria-hidden="false"]:active {
    filter: brightness(1.18);
  }
  .stage-hit { top: 55px; bottom: 120px; width: 18%; }
  .stage-hit span { display: none; }
}