/* Home — page-unique act content only, loaded after site.css.
   Act I (the silence), Act II (the answer names someone else), and the hinge
   (the lights come up). Shared act mechanics live in site.css. */

/* ============ ACT I · THE SILENCE ============ */

.swarm { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.swarm__q {
  position: absolute; left: var(--x); top: var(--y);
  font-family: var(--font-label);
  font-size: clamp(0.78rem, 0.68rem + 0.4vw, 0.95rem);
  color: var(--slope);
  white-space: nowrap;
  padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(236,237,236,0.1);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  opacity: 0;
  animation: swarm-in 1.2s var(--ease-entrance) forwards,
             drift var(--drift, 22s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + 1.2s);
}
@keyframes swarm-in { to { opacity: var(--depth, .9); } }
@keyframes drift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(var(--dx,14px), var(--dy,-18px), 0); }
}
/* Late questions surface with scroll — the asking gets louder, nothing pings.
   Their opacity is scroll progress times depth; drift runs from load so they
   arrive already adrift. */
.swarm__q--late {
  animation: drift var(--drift, 22s) ease-in-out infinite alternate;
  opacity: calc(var(--sub, 1) * var(--depth, .9));
}
/* The stage clears only at the end of the act, handing off to Act II. */
.act--silence .swarm { opacity: calc(1 - (max(var(--p, 0) - 0.72, 0) * 3.6)); }

.silence__headline {
  font-size: var(--text-display); color: var(--paper);
  max-width: 15ch; font-weight: 800; letter-spacing: var(--tracking-tight);
}
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block; transform: translate3d(0,110%,0);
  animation: line-up 1s var(--ease-entrance) forwards; animation-delay: var(--d, 0s);
}
@keyframes line-up { to { transform: translate3d(0,0,0); } }

.silence__sub {
  margin-top: var(--space-8); font-size: var(--text-body-lg); font-weight: 500;
  line-height: var(--leading-snug); color: var(--slope); max-width: 52ch;
}
.silence__sub strong { color: var(--paper); font-weight: 700; }

/* ============ ACT II · THE ANSWER ============ */

.ask { display: grid; gap: var(--space-8); max-width: 1000px; }

/* The question, typed. A white chat bubble — the realest thing in the dark. */
.ask__q {
  display: block;
  background: var(--card); color: var(--ink);
  font-weight: 800; letter-spacing: var(--tracking-tight);
  font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem);
  line-height: 1.15;
  padding: var(--space-4) var(--space-6);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  justify-self: start;
  width: min(640px, 100%);
  min-height: calc(2.3em + 2 * var(--space-4));
}
/* Outranks .stage-dark h2's paper color — the bubble is a lit object in a dark room. */
.stage-dark .ask__q { color: var(--ink); }
.ask__q::after {
  content: "";
  display: inline-block;
  width: 3px; height: 0.9em;
  margin-left: 0.1em;
  vertical-align: -0.08em;
  background: var(--ink);
  animation: caret 1.1s steps(2, end) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.ask__meta {
  font-family: var(--font-label); font-size: var(--text-caption);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--slope);
}

.reply {
  background: var(--surface); border: 1px solid rgba(236,237,236,0.1);
  border-radius: 16px; padding: var(--space-8);
  display: grid; gap: var(--space-5);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.reply__head {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-label); font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--slate);
}
.reply__head::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--paper);
  animation: pulse 2.2s var(--ease-fade) infinite;
}
@keyframes pulse {
  0%{ box-shadow: 0 0 0 0 rgba(236,237,236,0.3); } 70%{ box-shadow: 0 0 0 9px transparent; }
  100%{ box-shadow: 0 0 0 0 transparent; }
}
.reply__lede { color: var(--slope); }
.reply__list { display: grid; gap: var(--space-3); counter-reset: n; }
.reply__item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  align-items: baseline; counter-increment: n;
}
.reply__item::before {
  content: counter(n) "."; font-family: var(--font-label); color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.reply__name {
  background: rgba(236,237,236,0.16); color: var(--paper);
  font-weight: 700; padding: 2px 8px; border-radius: 5px;
}
.reply__note { display: block; font-family: var(--font-label); font-size: var(--text-small); color: var(--slope); margin-top: 3px; }
.reply__tail { color: var(--slope); font-size: var(--text-small); }
.reply__tail strong { color: var(--paper); }

.chip {
  position: absolute; z-index: 4;
  left: var(--x); top: var(--y);
  background: var(--surface-2); border: 1px solid rgba(236,237,236,0.1);
  border-left: 3px solid var(--paper);
  border-radius: 10px; padding: var(--space-3) var(--space-4);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  transform: rotate(var(--r, -3deg));
  opacity: var(--sub); pointer-events: none;
}
.chip__label { display: block; font-family: var(--font-label); font-size: 10px;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--slope); }
.chip__name { display: block; font-weight: 700; color: var(--paper); font-size: var(--text-small); }
@media (max-width: 999px) { .chip { display: none; } }

.absent {
  display: grid; gap: var(--space-2);
  padding: var(--space-6); border: 1px dashed var(--slate);
  border-radius: 12px; background: rgba(236,237,236,0.04);
}
.absent__label { font-family: var(--font-label); font-size: var(--text-caption);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--paper); }
.absent__text { color: var(--paper); font-weight: 800; font-size: var(--text-body-lg); }
.absent__sub { font-size: var(--text-small); color: var(--slope); }

/* ============ THE HINGE · the lights come up ============
   One pinned act. Ink field with a paper layer whose opacity is scroll
   progress; the dark line hands off to the lit line mid-sweep. The first
   time the logo note appears anywhere on the page is this act's period. */

.act--hinge { background: var(--ink); }
.hinge__paper {
  position: absolute; inset: 0; z-index: 1;
  background: var(--paper);
  opacity: calc(var(--p, 0) * var(--p, 0) * 1.25);
}
.hinge__stage { position: relative; z-index: 2; display: grid; }
.hinge__dark, .hinge__lit { grid-area: 1 / 1; }
.hinge__dark {
  opacity: calc(1 - (var(--p, 0) * 2.4));
  transform: translate3d(0, calc(var(--p, 0) * -34px), 0);
}
.hinge__dark h2 { color: var(--paper); font-size: var(--text-h1); max-width: 16ch; }
.hinge__dark .tm-eyebrow { color: var(--slate); margin-bottom: var(--space-5); }
.hinge__lit h2 { color: var(--ink); font-size: var(--text-h1); max-width: 16ch; }
.hinge__lit .tm-eyebrow { color: var(--label-ink); margin-bottom: var(--space-5); }
.hinge__lit .hinge__sub { margin-top: var(--space-6); color: var(--body-ink); font-size: var(--text-body-lg); max-width: 50ch; }
.hinge__lit .tm-dot { color: var(--logo); }

/* ============ Homepage-only collapse ============ */

@media (max-width: 999px) {
  .swarm { display: none; }
  .act--silence .swarm { opacity: 1; }
  .act--hinge { background: var(--paper); min-height: 0; }
  .hinge__paper { opacity: 1; }
  .hinge__dark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .act--silence .swarm { opacity: 1; }
  .ask__q::after { display: none; }
  .act--hinge { background: var(--paper); }
  .hinge__paper { opacity: 1; }
  .hinge__dark { display: none; }
}

.no-js .ask__q::after { display: none; }
.no-js .act--hinge { background: var(--paper); }
.no-js .hinge__paper { opacity: 1; }
.no-js .hinge__dark { display: none; }