/* shared.css — cross-page styling for the Majevadia Complex.
   Linked from every page so changes propagate everywhere. */

/* ── Full-page watermark: the five-nines seal, slowly turning, faintly glitching.
   Fixed-px anchor from the top so it lands in the same spot on every page,
   long or short. .page provides the stacking context (position/z-index set
   per page); overflow:hidden here contains the rotating seal so it never
   spills past the page edge (no horizontal scroll). */
.page { overflow: hidden; }

.page::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 540px;
  width: min(690px, 95%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("/emblem.svg") no-repeat center / contain;
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
  will-change: transform, filter;
  animation: wm-spin 600s linear infinite, wm-shimmer 6s steps(1) infinite;
  /* phase set from the wall clock by shared.js, so rotation is continuous
     across page navigations instead of snapping back to 0deg on each load */
  animation-delay: var(--wm-spin-delay, 0s), var(--wm-shimmer-delay, 0s);
}

@keyframes wm-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* a brief chromatic tear every ~6s — a worn-tape slip, mostly imperceptible at 0.08 */
@keyframes wm-shimmer {
  0%, 49.4%, 51.3%, 100% { filter: none; }
  50%   { filter: drop-shadow(2px 0 rgba(184,0,31,0.55)) drop-shadow(-2px 0 rgba(0,180,200,0.5)); }
  50.7% { filter: drop-shadow(-3px 0 rgba(184,0,31,0.55)) drop-shadow(3px 0 rgba(0,180,200,0.5)); }
}

/* respect users who ask for less motion — freeze to a static seal */
@media (prefers-reduced-motion: reduce) {
  .page::before { animation: none; }
}

/* ── Inter-tool nav — jump between instruments without returning to the hub.
   Sits in the header where the old "← Registry" link was. The current tool is
   marked with a .current-fnN class on the .tool-nav wrapper (set per page), so
   the link markup itself is identical on every page. ── */
.tool-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-bottom: 20px;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.tool-nav .tn {
  color: var(--muted, #6B6B6B);
  text-decoration: none;
  padding: 3px 8px;
  transition: color 0.15s;
}
.tool-nav .tn:hover { color: var(--ink, #1A1A1A); }
.tool-nav .tn.pending { opacity: 0.4; pointer-events: none; }
.tool-nav .tn-home {
  padding-left: 0;
  margin-right: 8px;
  padding-right: 14px;
  border-right: 1px solid var(--border, #C8C4BC);
}
.tool-nav.current-home .tn-home,
.tool-nav.current-fn1 .tn[data-fn="1"],
.tool-nav.current-fn2 .tn[data-fn="2"],
.tool-nav.current-fn3 .tn[data-fn="3"],
.tool-nav.current-fn4 .tn[data-fn="4"],
.tool-nav.current-fn5 .tn[data-fn="5"] {
  color: var(--red, #B8001F);
  font-weight: bold;
}
@media (max-width: 640px) {
  .tool-nav { letter-spacing: 0.08em; }
  .tool-nav .tn { padding: 3px 6px; }
}