/* Benefactors: faux-3D turntable. (CSS classes keep the hall- prefix.) Figures orbit on a flat ellipse and are
   scaled/dimmed by depth, so pre-rendered "3D-looking" images read as a scene.
   Loaded only on /benefactors. Base tokens come from style.css. */

:root {
  --brass: #c9a24a;
  --brass-hi: #f0d78a;
  --brass-lo: #6f5420;
  --plate: #16120f;
  --plate-edge: #2b2218;
  --ink: #efe6d2;
  --ink-muted: #a89c86;
  --fig-w: 220px;    /* figure box at the front (scale 1) */
  --fig-h: 300px;
  --stage-h: 620px;
}

.hall-hero { max-width: 720px; margin-bottom: 0.5rem; }
.hall-eyebrow {
  margin: 0 0 0.35rem; color: var(--brass); font-family: "Cinzel", serif;
  font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase;
}
.hall-h1 {
  margin: 0 0 0.6rem; font-family: "Cinzel", serif; font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: 0.04em; line-height: 1.05;
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 55%, var(--brass-lo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hall-lede { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.25rem; color: var(--ink-muted); margin: 0 0 0.75rem; }

/* ---- stage ---- */
.hall-stage {
  position: relative; height: var(--stage-h); margin: 1rem calc(-1 * 1.5rem) 0;
  overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  border-top: 1px solid var(--plate-edge); border-bottom: 1px solid var(--plate-edge);
  background:
    radial-gradient(ellipse 70% 50% at 50% 78%, rgba(201,162,74,0.14), transparent 70%),
    linear-gradient(180deg, #0b0909 0%, #100d13 100%);
}
.hall-stage.is-dragging { cursor: grabbing; }
.hall-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(0,0,0,0.6) 100%);
}

/* The table. A top-down circle (drawn, or static/benefactors/table.png) that is
   rotated by the same angle as the figures, then squashed vertically so it reads
   as a disc seen from a raised viewpoint. JS drives --cx/--cy/--rx/--squash/--table-rot. */
.hall-table, .hall-table-drawn, .hall-table-rim {
  position: absolute; left: 0; top: 0; pointer-events: none;
  width: calc(var(--rx) * 2.3); height: calc(var(--rx) * 2.3);
  border-radius: 50%;
  transform-origin: 50% 50%;
}
.hall-table-rim {
  transform: translate(calc(var(--cx) - 50%), calc(var(--cy) - 50% + 14px)) scaleY(var(--squash));
  background: radial-gradient(circle, #2a1f12 0%, #1a130c 60%, #0d0a08 72%, transparent 72.5%);
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
}
.hall-table, .hall-table-drawn {
  transform: translate(calc(var(--cx) - 50%), calc(var(--cy) - 50%)) scaleY(var(--squash)) rotate(var(--table-rot));
  will-change: transform;
}
.hall-table img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hall-table-drawn {
  background:
    /* engraved spokes */
    repeating-conic-gradient(from 0deg, rgba(240,215,138,0.22) 0deg 0.35deg, transparent 0.35deg 10deg),
    /* concentric rings */
    repeating-radial-gradient(circle, transparent 0 22px, rgba(240,215,138,0.10) 22px 23px),
    /* brass face */
    radial-gradient(circle at 50% 50%, rgba(240,215,138,0.42) 0%, rgba(201,162,74,0.28) 30%, rgba(111,84,32,0.22) 60%, rgba(60,44,18,0.35) 71%, transparent 72%);
  box-shadow: 0 0 0 1px rgba(201,162,74,0.35);
}
.hall-table-drawn::before {
  /* hub */
  content: ""; position: absolute; left: 50%; top: 50%; width: 14%; height: 14%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f0d78a, #8a6a25 60%, #4a3612);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.5), 0 0 30px rgba(240,215,138,0.25);
}
.hall-table-drawn::after {
  /* outer bezel with runic notches */
  content: ""; position: absolute; inset: 27%; border-radius: 50%;
  border: 2px solid rgba(240,215,138,0.35);
  background: repeating-conic-gradient(from 5deg, rgba(240,215,138,0.35) 0deg 1.2deg, transparent 1.2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 96%, #000 96.5%);
  mask: radial-gradient(circle, transparent 0 96%, #000 96.5%);
}

.hall-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-family: "Cinzel", serif; font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-muted); opacity: 0.8; transition: opacity 0.6s; pointer-events: none;
}
.hall-stage.has-interacted .hall-hint { opacity: 0; }

/* ---- figures ---- */
.figure {
  position: absolute; left: 0; top: 0;
  width: var(--fig-w); height: var(--fig-h);
  transform-origin: 50% 100%;   /* feet stay planted on the table */
  will-change: transform, opacity, filter;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  outline: none;
}
.figure-art {
  position: relative; width: 100%; flex: 1; display: grid; place-items: end center;
}
.figure-art img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  pointer-events: none; -webkit-user-drag: none;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,0.6));
}
/* Fallback when an inductee has no image yet: a brass bust medallion on a plinth. */
.figure-bust {
  width: 140px; height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,0.6));
}
.figure-bust .medallion {
  width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #4a361a, #120e0b 70%);
  border: 3px solid var(--brass); box-shadow: 0 0 0 6px var(--plate), 0 0 0 7px var(--brass-lo);
  font-family: "Cinzel", serif; font-size: 3rem; font-weight: 700; color: var(--brass-hi);
}
.figure-bust .plinth {
  width: 96px; height: 34px; margin-top: 10px;
  background: linear-gradient(180deg, #3b2c14, #1b1410);
  border: 1px solid var(--brass-lo); border-top-color: var(--brass);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}
.figure-label {
  margin-top: 8px; padding: 4px 12px;
  font-family: "Cinzel", serif; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass-hi); background: rgba(10,8,8,0.7);
  border: 1px solid var(--brass-lo); white-space: nowrap;
}
.figure.is-front .figure-label { border-color: var(--brass); box-shadow: 0 0 24px rgba(201,162,74,0.25); }
.figure-shadow {
  position: absolute; left: 50%; bottom: 22px; width: 70%; height: 18px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.7), transparent 70%);
  z-index: -1;
}

/* ---- citation panel ---- */
.hall-citations { margin: 1.5rem auto 0; max-width: 680px; min-height: 160px; }
.citation { animation: citation-in 0.5s ease both; }
@keyframes citation-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.citation-kicker { margin: 0; font-family: "Cinzel", serif; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); }
.citation-name { margin: 0.2rem 0 0.8rem; font-family: "Cinzel", serif; font-weight: 700; font-size: 1.6rem; color: var(--brass-hi); }
.citation-text { margin: 0 0 0.8rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; line-height: 1.55; color: var(--ink); }
.citation-text:first-of-type::first-letter { font-family: "Cinzel", serif; font-size: 2.2em; float: left; line-height: 0.85; padding: 0.08em 0.12em 0 0; color: var(--brass); }

@media (max-width: 700px) {
  :root { --fig-w: 150px; --fig-h: 210px; --stage-h: 480px; }
  .figure-bust { width: 100px; height: 140px; }
  .figure-bust .medallion { width: 84px; height: 84px; font-size: 2rem; }
  .figure-label { font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .citation { animation: none; }
}