/* FounderPact - Solomon in the overlap (v1). New styles + state remap only;
   pact-v16.css is immutable and untouched. Loaded after verdicts-v1.css.

   The lens: two nested animatable circle clips. Their intersection IS the
   vesica, so as the ring centers glide together, Solomon materializes only
   where the circles overlap. All geometry derives from --solr, so one clamp
   scales the whole composition from desktop to landscape phones. */

.sol-stage {
  position: absolute; inset: 0; margin: auto;
  width: min(100%, 480px); height: min(100%, 520px);
  --solr: clamp(90px, min(20vh, 24vw), 165px);
  --sold-rest: calc(var(--solr) * 0.55);
  --sold-talk: calc(var(--solr) * var(--soldf, 0.05)); /* while speaking, JS drives --soldf
     along the transcript: the rings converge as he talks alignment, reaching
     near-concentric (one full circle around him) on his closing line. */
  --solapart: calc(var(--solr) * 1.394);
  opacity: 1; visibility: visible;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0s;
}
/* as the pact ledger assembles below, the whole lens yields: up and a touch
   smaller, making room for what he's building */
.sol-lens { position: absolute; inset: 0; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.sol-stage.in.speaking .sol-lens { transform: translateY(calc(var(--solr) * -0.34)) scale(0.86); }
.sol-clip-a, .sol-clip-b { position: absolute; inset: 0; }
.sol-clip-a { clip-path: circle(var(--solr) at calc(50% - var(--solapart)) 50%); transition: clip-path 1.15s cubic-bezier(.2,.7,.2,1); }
.sol-clip-b { clip-path: circle(var(--solr) at calc(50% + var(--solapart)) 50%); transition: clip-path 1.15s cubic-bezier(.2,.7,.2,1); }
.sol-stage.in .sol-clip-a { clip-path: circle(var(--solr) at calc(50% - var(--sold-rest)) 50%); }
.sol-stage.in .sol-clip-b { clip-path: circle(var(--solr) at calc(50% + var(--sold-rest)) 50%); }
.sol-stage.in.speaking .sol-clip-a { clip-path: circle(var(--solr) at calc(50% - var(--sold-talk)) 50%); }
.sol-stage.in.speaking .sol-clip-b { clip-path: circle(var(--solr) at calc(50% + var(--sold-talk)) 50%); }
/* still/video crossfade is symmetric in both directions: a brief double
   image beats a blank lens on the way out */
.sol-still, #solVideo { position: absolute; left: 50%; top: calc(50% - var(--solr) * 1.14); transform: translateX(-50%); width: calc(var(--solr) * 1.95); height: auto; }
.sol-still { opacity: 0; transition: opacity 0.45s ease; }
.sol-stage.in .sol-still { opacity: 1; }
#solVideo { opacity: 0; transition: opacity 0.45s ease; }
.sol-stage.in.speaking #solVideo { opacity: 1; transition-delay: 0.25s; }
.sol-stage.in.speaking .sol-still { opacity: 0; transition-delay: 0.25s; }

.sol-ring { position: absolute; left: calc(50% - var(--solr)); top: calc(50% - var(--solr)); width: calc(var(--solr) * 2); height: calc(var(--solr) * 2); border-radius: 50%; border: 3px solid var(--ink, #1a1917); transition: transform 1.15s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.sol-ring.a { transform: translateX(calc(-1 * var(--solapart))); }
.sol-ring.b { border-color: var(--gold, #b08b3e); transform: translateX(var(--solapart)); }
.sol-stage.in .sol-ring.a { transform: translateX(calc(-1 * var(--sold-rest))); }
.sol-stage.in .sol-ring.b { transform: translateX(var(--sold-rest)); }
.sol-stage.in.speaking .sol-ring.a { transform: translateX(calc(-1 * var(--sold-talk))); }
.sol-stage.in.speaking .sol-ring.b { transform: translateX(var(--sold-talk)); }
/* per-frame drive: the rAF loop owns the motion while he speaks, so the
   1.15s transitions must stand aside or every frame queues a tween */
.sol-stage.speaking.live .sol-clip-a, .sol-stage.speaking.live .sol-clip-b,
.sol-stage.speaking.live .sol-ring { transition: none; }
html[data-theme="guide"] .sol-ring.a { border-color: #1b3a5c; }
html[data-theme="guide"] .sol-ring.b { border-color: #b4530a; }

.sol-plate { position: absolute; left: 0; right: 0; bottom: -8px; text-align: center; opacity: 0; transition: opacity 0.6s ease 0.9s; }
.sol-stage.in .sol-plate { opacity: 1; }
/* while speaking, the plate pins its TOP just below the yielded ring, so
   caption and ledger can never enter the circle regardless of line count */
.sol-stage.in.speaking .sol-plate { top: calc(50% + var(--solr) * 0.56); bottom: auto; }
@media (max-height: 640px) { .sol-plate { bottom: 4px; } }
/* captions render OUTSIDE the clipped subtree (native cues would land in the
   video's clipped lower third); JS mirrors the active cue here */
.sol-cap { min-height: 24px; margin-bottom: 5px; font-family: 'Fraunces', serif; font-style: italic; font-size: 16.5px; line-height: 1.35; color: var(--ink, #1a1917); opacity: 0; transition: opacity 0.3s ease; padding: 0 12px; }
/* the caption waits for the lens to finish yielding (1.1s transform), so it
   can never share pixels with the ring during the first beat */
.sol-stage.speaking .sol-cap { opacity: 1; transition-delay: 0.9s; }

/* the unspoken positions: each founder's ring carries faint terms that drift
   like held positions; while he talks alignment they travel with the rings
   and dissolve as the overlap completes. opacity keys off the same --soldf
   the convergence loop drives (rest fallback = fully faint-visible). */
.sol-terms { position: absolute; left: calc(50% - var(--solr)); top: calc(50% - var(--solr)); width: calc(var(--solr) * 2); height: calc(var(--solr) * 2); pointer-events: none; transition: transform 1.15s cubic-bezier(.2,.7,.2,1); }
.sol-terms.a { transform: translateX(calc(-1 * var(--solapart))); }
.sol-terms.b { transform: translateX(var(--solapart)); }
.sol-stage.in .sol-terms.a { transform: translateX(calc(-1 * var(--sold-rest))); }
.sol-stage.in .sol-terms.b { transform: translateX(var(--sold-rest)); }
.sol-stage.in.speaking .sol-terms.a { transform: translateX(calc(-1 * var(--sold-talk))); }
.sol-stage.in.speaking .sol-terms.b { transform: translateX(var(--sold-talk)); }
.sol-stage.speaking.live .sol-terms { transition: none; }
/* ONE opposing pair, the story in two numbers. At rest they float faint in
   their rings; while he speaks the drive loop ticks them numerically toward
   each other as they travel seam-ward (--p0 progress, --o0 opacity), meeting
   as the merged green 60/40 (--s0). */
.sol-terms span { position: absolute; font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(13px, calc(var(--solr) * 0.115), 19px); white-space: nowrap; opacity: 0.34; animation: solDrift 7s ease-in-out infinite alternate; top: 36%; }
.sol-terms.a span { left: 14%; --tdx: 0.28; --tdy: 0; }
.sol-terms.b span { right: 14%; --tdx: -0.28; --tdy: 0; }
.sol-stage.speaking.live .sol-terms span { animation: none; transition: none; transform: translate(calc(var(--p0, 0) * var(--tdx, 0) * var(--solr) * 2), calc(var(--p0, 0) * var(--tdy, 0) * var(--solr) * 2)) scale(calc(1 + var(--p0, 0) * 0.1)); opacity: var(--o0, 0.3); }

/* the merged number blooms at the seam, then hands off to the ledger pill */
.sol-settled { position: absolute; inset: 0; pointer-events: none; }
.sol-settled span { position: absolute; left: 50%; top: 24%; font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: clamp(14px, calc(var(--solr) * 0.115), 18px); white-space: nowrap; color: var(--gold-deep, #8a6a2b); opacity: var(--s0, 0); transform: translateX(-50%) scale(calc(0.92 + var(--s0, 0) * 0.16)); }
html[data-theme="guide"] .sol-settled span { color: #2f5e45; }

/* the ledger: the pact assembling in real time. Pills enter in their gap
   verdict and FLIP to aligned green, one per beat of his speech. */
.sol-ledger { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: min(94vw, 460px); margin: 0 auto; pointer-events: none; }
.sol-ledger:not(:empty) { margin-bottom: 6px; }
.sol-pill { display: none; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; padding: 4px 11px; border-radius: 999px; border: 1px solid; transition: color 0.5s ease, border-color 0.5s ease, background 0.5s ease; }
.sol-pill.on { display: inline-block; animation: pillIn 0.45s ease; }
@keyframes pillIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* while the ledger is building, the nameplate row yields its space */
.sol-stage.speaking .sol-name { display: none; }
.sol-pill.gap { color: var(--gold-deep, #8a6a2b); border-color: rgba(176, 139, 62, 0.55); border-style: dashed; background: rgba(176, 139, 62, 0.06); }
.sol-pill.aligned { color: #2f5e45; border-color: rgba(47, 94, 69, 0.5); border-style: solid; background: rgba(47, 94, 69, 0.06); }
html[data-theme="guide"] .sol-pill.gap { color: #b4530a; border-color: rgba(180, 83, 10, 0.5); background: rgba(180, 83, 10, 0.05); }
.sol-terms.a span { color: var(--ink, #1a1917); }
.sol-terms.b span { color: var(--gold-deep, #8a6a2b); }
html[data-theme="guide"] .sol-terms.a span { color: #1b3a5c; }
html[data-theme="guide"] .sol-terms.b span { color: #b4530a; }
.sol-terms span:nth-child(1) { top: 14%; left: 16%; animation-duration: 8s; }
.sol-terms span:nth-child(2) { top: 33%; left: 4%; animation-delay: -3s; }
.sol-terms span:nth-child(3) { top: 52%; left: 10%; animation-duration: 9s; animation-delay: -5s; }
.sol-terms span:nth-child(4) { top: 70%; left: 20%; animation-delay: -1.5s; }
.sol-terms span:nth-child(5) { top: 86%; left: 34%; animation-duration: 6.5s; animation-delay: -4s; }
.sol-terms.b span:nth-child(1) { left: auto; right: 16%; }
.sol-terms.b span:nth-child(2) { left: auto; right: 4%; }
.sol-terms.b span:nth-child(3) { left: auto; right: 10%; }
.sol-terms.b span:nth-child(4) { left: auto; right: 20%; }
.sol-terms.b span:nth-child(5) { left: auto; right: 34%; }
@keyframes solDrift { from { transform: translateY(-5px); } to { transform: translateY(6px); } }

/* the whole stage is tappable: on small screens the text control is easy to
   scroll past. The button stays the accessible control; this is the pointer
   convenience. */
.sol-stage.in { cursor: pointer; }

/* cover balance on mobile (pre-existing in the immutable v16 sheet): the
   desktop's generous 56px left gutter vs 20px right reads lopsided on a
   phone; equalize to the site's standard 24px mobile margins */
@media (max-width: 900px) {
  .cover { padding-left: 24px; padding-right: 24px; }
}

/* narrow portrait: the ledger tightens and drops its last pill */
@media (max-width: 640px) {
  .sol-pill { font-size: 10px; padding: 3px 9px; }
  #solStage .sol-pill:nth-child(5) { display: none; }
}

/* short-landscape phones: the stacked pin cannot hold the absolute copy AND
   the stage, so go side by side: compact copy column left, Solomon right.
   (This block must FOLLOW the base .sol-cap/.sol-name rules: equal
   specificity, so source order decides.) */
@media (max-width: 900px) and (max-height: 560px) {
  .pin-stage.split { grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 20px 0 28px; }
  .how-copy { min-height: 230px; }
  .how-copy .clause-tag { display: none; }
  .how-step h2 { font-size: 22px; margin: 4px 0 8px; }
  .how-step p { font-size: 13.5px; line-height: 1.5; max-width: none; }
  .how-dots { bottom: -30px; }
  .how-viz { height: min(78vh, 300px); }
  .sol-stage { --solr: clamp(54px, 16vh, 165px); }
  .sol-cap { min-height: 18px; font-size: 12.5px; margin-bottom: 3px; }
  .sol-plate { bottom: 0; }
  /* #id specificity: immune to source order against the base class rules */
  #solStage .sol-name { display: none; }
  #solStage .sol-terms { display: none; } /* no room at ring radius 54px */
  #solStage .sol-settled { display: none; }
  #solStage .sol-ledger { display: none; }
}
.sol-plate .sol-name { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep, #8a6a2b); }
html[data-theme="guide"] .sol-plate .sol-name { color: #1b3a5c; }
.sol-sound { margin-top: 7px; font: inherit; font-size: 13px; font-weight: 600; color: var(--sub2, #78716c); background: none; border: none; border-bottom: 1px solid currentColor; padding: 0 0 1px; cursor: pointer; }
.sol-sound:hover { color: var(--gold-deep, #8a6a2b); }

/* ---- state remap: 0 = Meet Solomon, 1 = Position Reports, 2 = Alignment ---- */
/* visibility (with a post-fade delay) removes the hidden stage, and its sound
   button, from the accessibility tree and the tab order. */
#howViz[data-state="1"] .sol-stage, #howViz[data-state="2"] .sol-stage { opacity: 0; transform: scale(0.94); visibility: hidden; pointer-events: none; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0.5s; }

#howViz[data-state="0"] .iv-card { opacity: 0; pointer-events: none; }
/* opacity-hidden overlays must not swallow clicks meant for the sound button */
#howViz[data-state="0"] .iv-out, #howViz[data-state="0"] .iv-mediator,
#howViz[data-state="1"] .iv-out, #howViz[data-state="1"] .iv-mediator,
#howViz .iv-pact { pointer-events: none; }

#howViz[data-state="1"] .iv-card.you { transform: none; opacity: 1; }
#howViz[data-state="1"] .iv-card.them { transform: none; opacity: 1; }
#howViz[data-state="1"] .iv-mediator { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
#howViz[data-state="1"] .iv-out .chip { opacity: 0; transform: translateY(14px); }

#howViz[data-state="2"] .iv-card.you { transform: translate(52%, 46%) scale(0.62); opacity: 0.4; }
#howViz[data-state="2"] .iv-card.them { transform: translate(-52%, 8%) scale(0.62); opacity: 0.4; }
#howViz[data-state="2"] .iv-mediator { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#howViz[data-state="2"] .iv-out .chip { opacity: 1; transform: none; }
#howViz[data-state="2"] .iv-out .chip:nth-child(1) { transition-delay: 0.05s; }
#howViz[data-state="2"] .iv-out .chip:nth-child(2) { transition-delay: 0.15s; }
#howViz[data-state="2"] .iv-out .chip:nth-child(3) { transition-delay: 0.25s; }
#howViz[data-state="2"] .iv-out .chip:nth-child(4) { transition-delay: 0.35s; }
#howViz[data-state="2"] .iv-pact { opacity: 0; }

/* ---- reduced motion ----
   pact-v16's accessibility block force-shows .chip/.iv-mediator/.iv-pact with
   !important, which would collapse the three states into one composite. This
   later block wins the cascade at equal specificity + importance, kills the
   merge transitions, and reasserts each state's visibility. */
@media (prefers-reduced-motion: reduce) {
  .sol-stage, .sol-lens, .sol-clip-a, .sol-clip-b, .sol-ring, #solVideo, .sol-still, .sol-cap, .sol-plate, .sol-terms { transition: none !important; }
  .sol-terms span { animation: none !important; }
  /* without the live drive, --soldf never updates; near-concentric rings
     would put the pair over his face. The ledger is shown fully aligned
     instead (JS sets it immediately under reduced motion). */
  .sol-stage.speaking .sol-terms { opacity: 0 !important; }
  .sol-settled span { opacity: 0 !important; }
  .sol-pill { transition: none !important; }
  .sol-pill.on { animation: none !important; }
  /* v16's accessibility block force-shows every .how-step; they are absolutely
     stacked, so reassert the scroll-driven .on state or all three overlap.
     (Pre-existing on the live site; repaired here.) */
  .how-step { opacity: 0 !important; }
  .how-step.on { opacity: 1 !important; }
  #howViz .iv-pact { opacity: 0 !important; transform: none !important; }
  #howViz[data-state="0"] .iv-mediator,
  #howViz[data-state="1"] .iv-mediator { opacity: 0 !important; }
  #howViz[data-state="0"] .iv-out .chip,
  #howViz[data-state="1"] .iv-out .chip { opacity: 0 !important; }
  #howViz[data-state="1"] .sol-stage, #howViz[data-state="2"] .sol-stage { opacity: 0 !important; visibility: hidden !important; }
}