/* Altair Hall of Fame — shared styles across all three directions */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--paper-warm);
}

/* ---------- AVATAR (used by all directions) ---------- */
.hof-avatar {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  display: grid;
  place-items: center;
}
.hof-avatar__mono {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  object-fit: contain;
  opacity: 0.55;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.04));
}
.hof-avatar__initials {
  position: absolute;
  right: 8%;
  bottom: 6%;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.62em;
  letter-spacing: var(--ls-wide);
  line-height: 1;
}

/* Square avatar variant (used in The Vault) */
.hof-avatar--square { border-radius: 2px; }

/* ---------- NEW RECORD burst ---------- */
@keyframes hofBurst {
  0%   { transform: scale(0.6) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(-6deg); opacity: 1; }
  100% { transform: scale(1)    rotate(-6deg); opacity: 1; }
}
@keyframes hofPulseRing {
  0%   { box-shadow: 0 0 0 0   rgba(168, 137, 78, 0.55); }
  100% { box-shadow: 0 0 0 14px rgba(168, 137, 78, 0); }
}

/* The seal burst — wax-stamp feel, gold on ink */
.hof-burst {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--font-sans);
  text-transform: uppercase;
  background: var(--ink-800);
  color: var(--gold-300);
  border: 1.5px solid var(--gold-500);
  letter-spacing: var(--ls-wider);
  animation: hofBurst 800ms var(--ease-editorial) both, hofPulseRing 2.4s ease-out infinite;
}
.hof-burst__big {
  font-family: var(--font-display);
  color: var(--gold-300);
  letter-spacing: var(--ls-tight);
  line-height: 0.9;
}

/* ---------- TAB BAR (used by all directions) ---------- */
.hof-tabs {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border-ink);
  background: var(--paper);
  user-select: none;
}
.hof-tabs--ink {
  background: transparent;
  border-color: rgba(220, 200, 163, 0.35);
}
.hof-tabs__btn {
  appearance: none;
  font: inherit;
  background: transparent;
  border: 0;
  padding: 14px 22px;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-600);
  cursor: pointer;
  border-right: 1px solid var(--border-ink);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.hof-tabs__btn:last-child { border-right: 0; }
.hof-tabs__btn:hover { color: var(--ink-800); }
.hof-tabs__btn[aria-selected="true"] {
  background: var(--ink-800);
  color: var(--paper);
}

/* Ink-tab variant */
.hof-tabs--ink .hof-tabs__btn {
  color: var(--ink-300);
  border-right-color: rgba(220, 200, 163, 0.25);
}
.hof-tabs--ink .hof-tabs__btn:hover { color: var(--paper); }
.hof-tabs--ink .hof-tabs__btn[aria-selected="true"] {
  background: var(--gold-500);
  color: var(--ink-900);
}

/* ---------- Decorative gold rule ---------- */
.hof-gold-rule {
  display: block;
  width: 56px;
  height: 1.5px;
  background: var(--gold-500);
  border: 0;
}

/* ---------- Eyebrow ---------- */
.hof-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-2);
}
.hof-eyebrow--ink { color: var(--ink-300); }
.hof-eyebrow--gold { color: var(--gold-500); }

/* ---------- Fade-in on tab change ---------- */
@keyframes hofFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hof-fade-in {
  animation: hofFadeIn var(--dur-slow) var(--ease-editorial) both;
}