/* ---------------------------------------------------------------------------
   Illustration: "Rehearsing a decision" (Chapter V, The Human System, theme: day)
   Three panels in one figure: the decision -> the people it affects, around a
   table, with one rehearsal loop -> the leader deciding, settled in brass.
   Rows on wide screens; stacked (each panel its own .reveal) below 1180px.
   Static drawing is the default; motion only under .js + no-preference.
   Reuses .lf-label / .lf-small / .lf-label--accent from story.css.
   --------------------------------------------------------------------------- */
.illus--human {
  --il-h-link1: .55s;   /* connector: decision -> table */
  --il-h-ls: .9s;       /* rehearsal loop starts */
  --il-h-lp: 1.3s;      /* rehearsal loop duration (one turn) */
  --il-h-link2: 1.95s;  /* connector: table -> leader */
  --il-h-lead: 2.1s;    /* the decision settles; last stroke ends ~2.75s */
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
}
.il-human-stage {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 300fr) 44px minmax(0, 600fr) 44px minmax(0, 300fr);
}
.il-human-svg { display: block; width: 100%; height: auto; overflow: visible; }
.illus--human figcaption { margin-top: 1.6rem; font-size: .9rem; line-height: 1.6; color: var(--muted); max-width: 46rem; }

/* Type */
.il-human-t { font-family: var(--sans); font-weight: 700; font-size: 20px; fill: var(--fg); }
.il-human-t--brass { fill: var(--brass-deep); }
.il-human-q, .il-human-l { font-family: var(--sans); font-weight: 600; font-size: 19px; fill: var(--fg); }
.il-human-l { font-weight: 700; }
.il-human-letter { font-family: var(--sans); font-weight: 700; font-size: 15px; fill: #fff; }
.il-human-letter--b { fill: var(--fg); }
.il-human-s { font-family: var(--sans); font-weight: 500; font-size: 15px; fill: var(--muted); }
.il-human-formula { font-family: var(--sans); font-weight: 700; font-size: 26px; letter-spacing: .01em; fill: var(--fg); }

/* Paper, table, people */
.il-human-sheet { fill: url(#human-card); stroke: var(--hair); stroke-width: 1.5; filter: drop-shadow(0 10px 18px rgba(60, 40, 20, .10)); }
.il-human-sheet--brass { stroke: url(#human-brass); stroke-width: 3; }
.il-human-pill { fill: #fff; stroke: var(--hair); stroke-width: 1.5; }
.il-human-pill--a { stroke: var(--fg); stroke-opacity: .35; }
.il-human-disc { fill: url(#human-glass); stroke: var(--fg); stroke-opacity: .3; stroke-width: 1.5; }
.il-human-tablecloth { fill: url(#human-table); stroke: rgba(122, 98, 71, .22); stroke-width: 1.5; filter: drop-shadow(0 18px 30px rgba(60, 40, 20, .12)); }
.il-human-track { fill: none; stroke: var(--fg); stroke-opacity: .07; stroke-width: 12; }
.il-human-arc { fill: none; stroke: var(--fg); stroke-opacity: .5; stroke-width: 2.5; stroke-linecap: round; }
.il-human-spokes line { stroke: var(--fg); stroke-opacity: .28; stroke-width: 2; stroke-linecap: round; }
.il-human-port { fill: url(#human-glass); }
.il-human-head { fill: url(#human-head); }
.il-human-hair { fill: #4a433d; }
.il-human-hair--grey { fill: #948b81; }
.il-human-neck { fill: #a89c8e; }
.il-human-sheen { fill: url(#human-sheen); }
.il-human-collar { fill: #f6f2ea; }
.il-human-lapel { fill: #000; fill-opacity: .22; }
.il-human-band { fill: none; stroke: #fff; stroke-opacity: .4; stroke-width: 2; stroke-linecap: round; }
.il-human-bezel { fill: none; stroke: url(#human-bezel); stroke-width: 5; }
.il-human-bezel--brass { stroke: url(#human-brass); }
.il-human-glint { fill: none; stroke: #fff; stroke-opacity: .9; stroke-width: 3; stroke-linecap: round; }
.il-human-who, .il-human-lead { filter: drop-shadow(0 8px 14px rgba(40, 30, 20, .16)); }
.il-human-halo { fill: var(--fg); fill-opacity: .08; }
.il-human-spark { fill: #fff; fill-opacity: .7; }

/* Reactions: a brass check = in line with the option; a violet wave = friction, the point to notice */
.il-human-badge circle, .il-human-seal circle { fill: #fff; stroke: url(#human-brass); stroke-width: 3; }
.il-human-badge path, .il-human-seal path { fill: none; stroke: var(--brass-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il-human-seal circle { stroke-width: 3.5; }
.il-human-seal path { stroke-width: 3.5; }
.il-human-badge--friction { filter: drop-shadow(0 0 6px rgba(91, 63, 140, .45)); }
.il-human-badge--friction circle { stroke: var(--accent); }
.il-human-badge--friction path { stroke: var(--accent); }

/* Connectors between panels */
.il-human-link { position: relative; height: 2px; }
.il-human-link span { position: absolute; inset: 0 8px 0 6px; background: var(--fg); opacity: .4; border-radius: 2px; transform-origin: left center; }
.il-human-link span::after { content: ""; position: absolute; right: -1px; top: 50%; width: 9px; height: 9px; border-top: 2px solid var(--fg); border-right: 2px solid var(--fg); transform: translateY(-50%) rotate(45deg); }

/* Narrower screens: stack the three panels; each plays when it scrolls into view */
@media (max-width: 1179px) {
  .illus--human { --il-h-link1: .1s; --il-h-link2: .1s; --il-h-lead: .35s; }
  .il-human-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .il-human-panel { width: 100%; max-width: 560px; }
  .il-human-panel--side { max-width: 320px; }
  .il-human-link { width: 2px; height: 44px; margin: 6px 0; }
  .il-human-link span { inset: 2px 0 6px 0; transform-origin: center top; }
  .il-human-link span::after { right: auto; top: auto; left: 50%; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
}
/* Phones: the table panel scales to ~0.55x at 360px, so its labels are set larger to stay >= 12px on screen.
   The traits and the friction note shift down a little so the bigger lines don't touch the role names. */
@media (max-width: 600px) {
  .il-human-ring .il-human-role { font-size: 24px; }
  .il-human-ring .il-human-trait, .il-human-ring .il-human-friction, .il-human-ring .il-human-c1 { font-size: 22.5px; }
  .il-human-ring .il-human-trait { transform: translateY(3px); }
  .il-human-ring .il-human-friction { transform: translateY(9px); }
  .il-human-ring .il-human-c2 { font-size: 24px; }
}

/* ---- Motion: one pass, when each panel is revealed. Default = finished drawing. ---- */
@media (prefers-reduced-motion: no-preference) {
  /* 1 · the decision card settles, then the two options */
  .js .illus--human .il-human-card { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
  .js .illus--human .il-human-chip { opacity: 0; transform: translateX(-12px); transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); transition-delay: calc(.3s + var(--k) * .12s); }
  .js .illus--human .il-human-p1.is-in .il-human-card,
  .js .illus--human .il-human-p1.is-in .il-human-chip { opacity: 1; transform: none; }

  /* connectors draw */
  .js .illus--human .il-human-link span { transform: scaleX(0); transition: transform .4s var(--ease-out) var(--il-h-link1); }
  .js .illus--human .il-human-link--2 span { transition-delay: var(--il-h-link2); }
  .js .illus--human .il-human-link.is-in span { transform: none; }
  @media (max-width: 1179px) { .js .illus--human .il-human-link span { transform: scaleY(0); } }

  /* 2 · the table, then the people, then the connections */
  .js .illus--human .il-human-tablecloth { opacity: 0; transform: scale(.94); transform-box: fill-box; transform-origin: center; transition: opacity .7s var(--ease-out) .1s, transform .8s var(--ease-out) .1s; }
  .js .illus--human .il-human-centre { opacity: 0; transition: opacity .5s ease .45s; }
  .js .illus--human .il-human-who { opacity: 0; transform: scale(.8); transform-box: fill-box; transform-origin: center; transition: opacity .45s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.35s + var(--k) * .1s); }
  .js .illus--human .il-human-tag { opacity: 0; transition: opacity .5s ease; transition-delay: calc(.45s + var(--k) * .1s); }
  .js .illus--human .il-human-spokes line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s var(--ease-out); transition-delay: calc(.7s + var(--k) * .06s); }
  .js .illus--human .il-human-p2.is-in .il-human-tablecloth,
  .js .illus--human .il-human-p2.is-in .il-human-who { opacity: 1; transform: none; }
  .js .illus--human .il-human-p2.is-in .il-human-centre,
  .js .illus--human .il-human-p2.is-in .il-human-tag { opacity: 1; }
  .js .illus--human .il-human-p2.is-in .il-human-spokes line { stroke-dashoffset: 0; }

  /* one rehearsal loop: option A travels once around the table; each person answers as it passes */
  .js .illus--human .il-human-arc { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset var(--il-h-lp) linear var(--il-h-ls); }
  .js .illus--human .il-human-orbit { opacity: 0; transform-box: view-box; transform-origin: 300px 250px; transition: opacity .3s ease calc(var(--il-h-ls) - .2s), transform var(--il-h-lp) linear var(--il-h-ls); }
  .js .illus--human .il-human-badge { opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center;
    transition: opacity .25s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
    transition-delay: calc(var(--il-h-ls) + var(--il-h-lp) * (.125 + .25 * var(--k))); }
  .js .illus--human .il-human-badge path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s var(--ease-out); transition-delay: calc(var(--il-h-ls) + var(--il-h-lp) * (.125 + .25 * var(--k)) + .15s); }
  .js .illus--human .il-human-friction { opacity: 0; transition: opacity .45s ease calc(var(--il-h-ls) + var(--il-h-lp) * .625 + .25s); }
  .js .illus--human .il-human-p2.is-in .il-human-arc { stroke-dashoffset: 0; }
  .js .illus--human .il-human-p2.is-in .il-human-orbit { opacity: 1; transform: rotate(360deg); }
  .js .illus--human .il-human-p2.is-in .il-human-badge { opacity: 1; transform: none; }
  .js .illus--human .il-human-p2.is-in .il-human-friction { opacity: 1; } /* opacity only: keeps the phone nudge (translateY) */
  .js .illus--human .il-human-p2.is-in .il-human-badge path { stroke-dashoffset: 0; }

  /* 3 · the leader decides: the card settles, the bezel turns brass, the check draws */
  .js .illus--human .il-human-verdict { opacity: 0; transform: translateY(-16px); transition: opacity .5s ease var(--il-h-lead), transform .6s var(--ease-out) var(--il-h-lead); }
  .js .illus--human .il-human-bezel--brass { opacity: 0; transition: opacity .6s ease calc(var(--il-h-lead) + .05s); }
  .js .illus--human .il-human-seal { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .3s ease var(--il-h-lead), transform .5s cubic-bezier(.34, 1.56, .64, 1) var(--il-h-lead); }
  .js .illus--human .il-human-seal path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s var(--ease-out) calc(var(--il-h-lead) + .2s); }
  .js .illus--human .il-human-sum { opacity: 0; transition: opacity .4s ease calc(var(--il-h-lead) + .2s); }
  .js .illus--human .il-human-p3.is-in .il-human-verdict { opacity: 1; transform: none; }
  .js .illus--human .il-human-p3.is-in .il-human-bezel--brass,
  .js .illus--human .il-human-p3.is-in .il-human-seal,
  .js .illus--human .il-human-p3.is-in .il-human-sum { opacity: 1; }
  .js .illus--human .il-human-p3.is-in .il-human-seal { transform: none; }
  .js .illus--human .il-human-p3.is-in .il-human-seal path { stroke-dashoffset: 0; }
}