/* ═══ SFTi — THE HOLOGRAPHIC NAV. One card, every surface. ═══════════════════════════

   Operator 2026-08-11: "the navbar in all index/shop/system/ needs to match theme".

   ── WHAT THIS REPLACES, AND WHY IT IS ONE FILE NOW ──
   `app/index/css/holo-nav.css` and `app/shop/css/holo-nav.css` were the SAME component in
   two copies, and they had already drifted three ways:
     · shop carried `padding-bottom: max(28px, env(safe-area-inset-bottom))` — #218's fix,
       which is what stops the icons floating above the home indicator in standalone.
       ★ INDEX NEVER GOT IT. Its nav has been mis-padded on the operator's phone this whole
       time, and no colour audit would ever have found that.
     · index animated the buttons (holoFloat); shop did not.
     · index carried a `body { padding-bottom: 0 }` rule — a page rule living inside a
       component card, which is how it stayed invisible.
   Both are DELETED (R3b). The geometry below is SHOP's, because shop's is the correct one.

   ── THE PALETTE, IN SHOP'S OWN VOCABULARY ──
   Not "cyan → something else at random". Shop already assigns meaning to its accents, and
   the nav now speaks it:
     SILVER  the quiet informational ink — shop wears it on the tagline. The resting nav is
             informational, so it is silver.
     GOLD    emphasis — shop wears it on the featured tier's border and its links. "You are
             here" is emphasis, so the current page is gold.
   Cyan is NOT a leftover here: shop declares it as the STATUS colour (the "where the system
   is today" strip, the tier badge). It keeps that job, which is exactly why the nav must
   stop borrowing it — a nav painted in the status colour says "status" on every page.

   ⚠ #201 BINDS AND THIS CARD RESPECTS IT. The nav is HOLLOW by design — it takes no taps, it
   reserves no space in flow, and content scrolls clear behind it; the operator ruled that NOT a
   defect. The scrim below does not touch any of that: it fades to alpha 0 at its own top edge,
   so there is no band boundary to see and the page still runs under it. Position, z-index, gap,
   sizes and hit targets are shop's.

   ⚠ #218 AGAIN, AND IT IS THE SUBTLE ONE. On iOS a `position: fixed` element is pinned to
   the VISUAL viewport only while it carries no transform; give it one and it is promoted to
   a compositor layer that tracks the LAYOUT viewport, and it drifts. `holoFloat` therefore
   animates `.holo-btn` — the CHILD — and never `.holo-nav`. The fixed element itself must
   stay transform-free. Do not "simplify" this by moving the animation up a level. */

.holo-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(20px, 7vw, 52px);
  padding: 14px 24px 28px;
  /* #218: standalone has no browser toolbar, so the inset is a real 34px on this phone and
     a bare 28px design pad leaves the icons floating over the home indicator. */
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  /* ── THE SCRIM — race's, stop for stop (app/system/css/shell.css §4.3) ──
     The nav is hollow, so whatever scrolls under it is what the icons are read against, and a
     silver 34px glyph over a pale card is unreadable. This is the ONLY thing standing between the
     row and the page, which is why it is the same three stops on all three surfaces rather than a
     value chosen twice. If that rule ever changes, IT is the original and this follows it.
     ⚠ `to top` MEANS 0% IS THE BOTTOM EDGE, and both ends are load-bearing: the near-opaque first
     stop sits under the labels, and the alpha-0 last stop is why the band has no top edge to see —
     a flat fill or an opaque top stop would draw a slab and stop being hollow to the eye. */
  background: linear-gradient(to top,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 8, 14, 0.78) 40%,
      rgba(4, 8, 14, 0.0) 100%);
  pointer-events: none;      /* only the buttons take taps; the band itself is not there. */
}

.holo-btn {
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: rgba(192, 192, 192, 0.72);          /* --accent-silver, resting */
  transition: color 0.3s ease, filter 0.3s ease;
  /* the drift: 5px over 3.2s, staggered per button so the row breathes rather than pulses
     as one block. On the CHILD, never the fixed parent — see the #218 note above. */
  animation: holoFloat 3.2s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

.holo-btn:nth-child(1) { animation-delay: 0s; }
.holo-btn:nth-child(2) { animation-delay: 0.25s; }
.holo-btn:nth-child(3) { animation-delay: 0.5s; }
.holo-btn:nth-child(4) { animation-delay: 0.75s; }
.holo-btn:nth-child(5) { animation-delay: 1s; }

@keyframes holoFloat {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-5px); }
}

.holo-btn svg {
  width: 34px;
  height: 34px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(192, 192, 192, 0.45))
          drop-shadow(0 0 14px rgba(192, 192, 192, 0.20));
  transition: filter 0.3s ease;
}

.holo-btn span {
  font-family: 'Orbitron', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(192, 192, 192, 0.5);
  transition: color 0.3s ease;
}

/* ── YOU ARE HERE — gold, which is shop's own emphasis ink ── */
.holo-btn[aria-current="page"] {
  color: var(--accent-gold);
}
.holo-btn[aria-current="page"] svg {
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.85))
          drop-shadow(0 0 18px rgba(212, 175, 55, 0.55))
          drop-shadow(0 0 36px rgba(230, 57, 70, 0.30));   /* a red undertone in the bloom,
                                                              so the glow belongs to the same
                                                              red→gold family as the wordmark */
}
.holo-btn[aria-current="page"] span {
  color: rgba(212, 175, 55, 0.85);
}

@media (hover: hover) and (pointer: fine) {
  .holo-btn:hover {
    color: var(--accent-gold);
    animation-play-state: paused;
    transform: translateY(-8px) scale(1.1);
  }
  .holo-btn:hover svg {
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 1))
            drop-shadow(0 0 22px rgba(212, 175, 55, 0.6))
            drop-shadow(0 0 40px rgba(230, 57, 70, 0.3));
  }
  .holo-btn:hover span { color: rgba(212, 175, 55, 0.9); }
}

/* Neither copy had this, and a nav that bobs for ever is exactly what the setting exists to
   silence. The resting position is the un-animated one, so nothing moves and nothing shifts. */
@media (prefers-reduced-motion: reduce) {
  .holo-btn { animation: none !important; }
}