/* =====================================================================
   Arcade — overrides that bring the explorer in line with the homepage.

   Loaded after site.css and deliberately additive: the grid, the search,
   the filters and the bin all keep their own markup and behaviour. What
   changes is the ground they sit on (the voxel scene instead of drifting
   blobs), the accent palette, and the header, which is now the same
   hairline bar the homepage uses.
   ===================================================================== */

:root {
  /* Pull the accents from violet/pink toward the homepage's ice blue so the
     two pages read as one site. */
  --accent: #bfe6ff;
  --violet: #7fb4ff;
  --cyan: #bfe6ff;
  --text: #f2f7ff;
  --text-dim: #a9c2e4;

  --bar: 38px;
  --ease-nav: cubic-bezier(.22, .61, .36, 1);
}

/* The drifting blobs are replaced by the scene. */
.blobs { display: none !important; }

/* ---------------------------------------------------------------- scene

   site.css pins every direct child of body with `position: relative; z-index: 1`
   to lift content above the blobs. That rule would also catch these two and
   break the fixed positioning, so both are restated explicitly. */
needle-engine {
  position: fixed !important;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0 !important;
}

.scrim {
  position: fixed !important;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  /* Heavier than the homepage's: this page carries dense body copy, small
     labels and form controls rather than one headline at a time. */
  background:
    linear-gradient(180deg, rgba(6, 12, 28, .93) 0%, rgba(6, 12, 28, .84) 22%, rgba(6, 12, 28, .84) 100%);
}

/* ---------------------------------------------------------------- header bar */
header.site { display: none !important; }

.topbar {
  /* site.css pins every direct child of body with `body > *:not(.blobs) { position: relative;
     z-index: 1 }`. That selector outspecifies a bare class, so without !important this bar
     silently stays in flow and scrolls away with the page. */
  position: fixed !important;
  z-index: 5 !important;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 max(1rem, 2.5vw);
  background: rgba(6, 12, 28, .55);
  border-bottom: 1px solid rgba(191, 230, 255, .12);
  backdrop-filter: blur(10px);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  min-width: 0;

  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .14em;
}

.topbar .brand::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.topbar nav {
  margin-left: auto;
  display: flex;
  gap: .25rem;
}

.topbar nav a {
  padding: .3rem .6rem;
  border-radius: 7px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color .2s var(--ease-nav), background .2s var(--ease-nav);
}

.topbar nav a:hover,
.topbar nav a:focus-visible {
  color: var(--text);
  background: rgba(191, 230, 255, .12);
}

/* The bar is fixed, so the first section needs to clear it. */
main { padding-top: var(--bar); }

@media (max-width: 560px) {
  .topbar { font-size: .66rem; padding: 0 .7rem; gap: .5rem; }
  .topbar nav { gap: .1rem; }
  .topbar nav a { padding: .3rem .35rem; }
  /* The bar is a fixed 38px; letting the brand wrap would push its own text out of it.
     Four nav items plus a wordmark will not fit a 375px bar, and a truncated "ADNAN E..."
     is worse than no wordmark - the dot still links home and keeps its accessible name. */
  .topbar .brand { letter-spacing: .06em; }
  .topbar .brand-text { display: none; }
  .topbar .brand::before { width: 9px; height: 9px; }
}

/* ---------------------------------------------------------------- surfaces

   Glass panels over an animated scene need a touch more body than glass over a
   flat background, or the voxels read straight through the text. */
.card,
.panel {
  background: rgba(11, 20, 40, .72);
  border-color: rgba(191, 230, 255, .16);
  backdrop-filter: blur(8px);
}

.search-shell {
  background: rgba(11, 20, 40, .72);
  backdrop-filter: blur(8px);
}

footer.site {
  background: rgba(6, 12, 28, .6);
  backdrop-filter: blur(8px);
}