/* ============================================================
   people.css: Who Shaped Me. The auditorium at night: the only
   lamp is 桥 at the centre, and the people who shaped him turn
   around it.
   ============================================================ */

.people {
  height: 100vh; height: 100svh; min-height: 540px;
  overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}

.people__head {
  position: relative; z-index: 3;
  padding: max(26px, calc(env(safe-area-inset-top) + 18px)) var(--gutter) 0;
  text-align: center;
  pointer-events: none;
}
.people__title {
  display: inline-block;
  font: 400 clamp(1.5rem, 1.2rem + 0.9vw, 2.05rem)/1.1 var(--font-display);
  color: var(--warm);
  letter-spacing: 0.01em;
  pointer-events: auto;
}

.globe { position: relative; z-index: 1; min-height: 0; transition: filter 900ms var(--ease-grace), transform 900ms var(--ease-grace); }
.globe::before {
  content: ""; position: absolute; top: 6%; right: 12%; bottom: 6%; left: 12%;
  background: radial-gradient(closest-side, rgba(var(--lamp), 0.075), rgba(var(--lamp), 0.02) 60%, transparent);
  pointer-events: none;
}
.globe__field { position: absolute; top: 0; right: 0; bottom: 0; left: 0; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.globe__field.is-dragging { cursor: grabbing; }

.node {
  position: absolute; left: 0; top: 0;
  padding: 0; border-radius: 12px;
  cursor: pointer;
  will-change: transform, opacity;
  -webkit-user-drag: none; user-select: none;
  -webkit-touch-callout: none;
}
.node__lift { display: block; filter: drop-shadow(0 16px 18px rgba(12, 3, 5, 0.5)); }
.node__img { display: block; max-width: none; pointer-events: none; }
.node.is-away { visibility: hidden; }
.node:focus-visible { outline: none; }
.node:focus-visible .node__lift { outline: 2px solid var(--gold-bright); outline-offset: 8px; border-radius: 12px; }

/* 桥: the bridge, glowing at the centre like a lantern */
.globe__hub {
  --hub: 64px;
  position: absolute; left: 50%; top: 50%; z-index: 500;
  transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 10px;
  pointer-events: none;
  opacity: 0; transition: opacity 1800ms var(--ease-grace);
}
.globe__hub.is-lit { opacity: 1; }
.globe__hub-glow {
  position: absolute; left: 50%; top: 38%;
  width: calc(var(--hub) * 3.4); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--lamp), 0.3), rgba(212, 168, 83, 0.09) 55%, rgba(212, 168, 83, 0));
  animation: hub-breathe 7s ease-in-out infinite;
}
.globe__hub-glyph {
  position: relative;
  font: 900 var(--hub)/1 var(--font-zh);
  color: var(--gold-bright);
  text-shadow: 0 0 22px rgba(234, 203, 134, 0.4), 0 0 2px rgba(234, 203, 134, 0.6);
}
.globe__hub-label {
  position: relative;
  font: italic 400 1rem/1.2 var(--font-text);
  color: var(--warm-muted);
  white-space: nowrap;
}
@keyframes hub-breathe {
  0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.96); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.04); }
}

/* the caption names whoever is facing you */
.people__foot {
  position: relative; z-index: 3;
  display: grid; justify-items: center; gap: 6px;
  padding: 0 var(--gutter) max(20px, calc(env(safe-area-inset-bottom) + 12px));
}
.caption { display: flex; align-items: center; gap: 12px; }
.caption__who {
  display: grid; justify-items: center; gap: 3px;
  min-width: min(62vw, 360px); min-height: 64px; padding: 8px 16px;
  border-radius: 18px;
  transition: opacity 700ms var(--ease-grace), filter 700ms var(--ease-grace), transform 700ms var(--ease-grace), background-color var(--dur-hover) var(--ease-ui);
}
.caption.is-changing .caption__who { opacity: 0; filter: blur(5px); transform: translateY(5px); transition-duration: 380ms; }
.caption__name { font: 400 clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem)/1.15 var(--font-display); color: var(--warm); }
.caption__kicker { font: italic 400 1.05rem/1.2 var(--font-text); color: var(--gold); }
.caption__step {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--sky-line); color: var(--sky); background: var(--sky-wash);
  transition: border-color var(--dur-hover) var(--ease-ui), color var(--dur-hover) var(--ease-ui), transform var(--dur-hover) var(--ease-ui);
}
.caption__step svg { width: 18px; height: 18px; }
.caption__step:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .caption__step:hover { border-color: var(--sky); color: #CFE4F7; }
  .caption__who:hover { background: rgba(247, 239, 228, 0.05); }
}
.people__hint { font: italic 400 0.98rem/1.2 var(--font-text); color: var(--warm-faint); }

/* the room arrives */
.people__head, .people__foot { opacity: 0; transform: translateY(14px); transition: opacity 1400ms var(--ease-grace), transform 1400ms var(--ease-grace); }
.people.is-in .people__head { opacity: 1; transform: none; transition-delay: 200ms; }
.people.is-in .people__foot { opacity: 1; transform: none; transition-delay: 2700ms; }

/* while a note is open the globe steps back into the dark */
html.sheet-open .people .globe { filter: brightness(0.5) saturate(0.8); transform: scale(0.975); }

@media (max-width: 760px) {
  .people__head { padding-top: max(74px, calc(env(safe-area-inset-top) + 64px)); }
  .people__title { font-size: 1.55rem; }
  .caption { gap: 6px; }
  .caption__who { min-width: 0; width: min(60vw, 250px); padding: 6px 8px; }
  .caption__name { font-size: 1.3rem; }
  .caption__kicker { font-size: 0.98rem; }
  .people__hint { font-size: 0.92rem; }
  /* the room is one composed screen, so on a phone the caption leaves the music pill its own row underneath instead
     of letting it sit on the ‹ button (found in the audit, 4 October 2026; codex A7) */
  .people__foot { padding-bottom: max(76px, calc(env(safe-area-inset-bottom) + 70px)); }
}

@media (prefers-reduced-motion: reduce) {
  .globe__hub-glow { animation: none; }
  .people__head, .people__foot { transform: none; transition: opacity 400ms linear; transition-delay: 0ms !important; }
  .caption.is-changing .caption__who { filter: none; transform: none; }
}