/* Scenes 2, 3, 4, 7, 8, 9 and 10 of "How it works". Builds on story.css and home.css. */
/* scene 2 · two answers */
.pair{display:grid;gap:16px;width:min(100%,1000px);grid-template-columns:1fr}
@media(min-width:800px){.pair{grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}}
.answer{padding:18px 20px;font:italic 400 clamp(17px,1.4vw,21px)/1.45 var(--serif)}
.answer .who{margin-bottom:8px}
.answer .verdict{display:block;margin-top:12px;font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mid)}
.answer.enable .verdict{color:var(--seal)}
.play .answer.gate{animation:rise var(--beat) forwards,dim var(--beat) forwards;animation-delay:var(--d),calc(var(--beat)*4)}
@keyframes dim{to{opacity:.45}}
/* scene 3 · desks */
.desks{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:min(100%,1100px)}
@media(min-width:800px){.desks{grid-template-columns:repeat(5,1fr)}}
.desk-card{position:relative;padding:12px 12px 14px;min-height:130px;display:grid;gap:8px;align-content:start;overflow:hidden}
.desk-card .env{width:100%;max-width:96px;height:auto;justify-self:center;opacity:0;transform:translateY(-34px)}
.desks .desk-card:nth-child(1){--i:0}.desks .desk-card:nth-child(2){--i:1}.desks .desk-card:nth-child(3){--i:2}.desks .desk-card:nth-child(4){--i:3}.desks .desk-card:nth-child(5){--i:4}
.play .desk-card .env{animation:drop .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--beat)*1.6 + var(--i)*.1s)}
@keyframes drop{to{opacity:1;transform:none}}
.desk-card .shutter{position:absolute;inset:auto 0 0 0;padding:8px 10px;background:var(--surface);color:var(--ink);border-top:1px solid var(--accent);font:500 9px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:0}
.play .desk-card .shutter{animation:fade .5s forwards;animation-delay:calc(var(--beat)*3)}
/* scene 4 · stages */
.stages{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:min(100%,1100px)}
@media(min-width:800px){.stages{grid-template-columns:repeat(4,1fr)}}
.stagecard{padding:14px 16px 16px;display:grid;gap:8px;align-content:start}
.stagecard p{margin:0;font:italic 400 clamp(15px,1.15vw,17px)/1.4 var(--serif)}
.stagecard .due{font:500 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--seal)}
.progress{width:min(100%,1100px);height:2px;background:var(--line-strong);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.play .progress i{animation:grow calc(var(--beat)*5) linear forwards}
@keyframes grow{to{transform:scaleX(1)}}
/* scene 7 · the examiner */
.examiner{display:grid;gap:16px;width:min(100%,1240px);grid-template-columns:1fr}
@media(min-width:800px){.examiner{grid-template-columns:1.2fr 1fr;gap:32px;align-items:start}}
.variants{display:grid;gap:10px}
.variant{position:relative;padding:12px 52px 12px 16px;font:italic 400 clamp(15px,1.1vw,16.5px)/1.4 var(--serif);opacity:0;transform:translateX(-20px);transition:opacity .5s,transform .5s}
.variant.in{opacity:1;transform:none}
.variant .who{display:flex;justify-content:space-between;margin-bottom:6px}
.variant .band{position:absolute;right:12px;bottom:10px;font:600 13px var(--mono);color:var(--accent);opacity:0;transition:opacity .3s}
.variant.scored .band{opacity:1}
.variant.flawed .band{color:var(--seal)}
.ladder .tally{display:inline-flex;gap:4px;margin-left:auto}
.ladder .tally i{width:16px;height:16px;border-radius:3px;background:var(--paper);color:var(--paper-ink);font:600 9px/16px var(--mono);text-align:center;font-style:normal}
.ladder .tally i.bad{background:var(--seal);color:var(--paper)}
.ladder li.lit{color:var(--accent);background:var(--accent-dim)}
.examiner-note{margin:0;font:12.5px/1.55 var(--mono);color:var(--ink);min-height:3em}
/* scene 8 · frozen results */
.results{display:grid;gap:16px;width:min(100%,900px);grid-template-columns:1fr}
@media(min-width:800px){.results{grid-template-columns:1fr 1fr;gap:28px;align-items:start}}
.result{position:relative;padding:16px 18px 44px;display:grid;gap:8px}
.result .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font:11.5px/1.5 var(--mono);color:var(--paper-mid)}
.result .kv dt{text-transform:uppercase;letter-spacing:.1em;font-size:10px;padding-top:2px}.result .kv dd{margin:0}
.result .kv b{color:var(--paper-ink);font-weight:500}
.result .big{font:600 34px/1 var(--serif)}
.result.legacy{opacity:.55;filter:saturate(.4)}
.result .stamp.grey{border-color:var(--paper-mid);color:var(--paper-mid);opacity:.9}
/* scene 9 · the projector */
.projector{display:grid;gap:16px;width:min(100%,1100px);grid-template-columns:1fr}
@media(min-width:800px){.projector{grid-template-columns:1fr 1.1fr;gap:28px;align-items:start}}
.board-panel{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:14px}
.board-panel h3{margin:0 0 10px;font:500 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mid)}
.teams{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.teams li{display:grid;grid-template-columns:1fr auto;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font:15px/1.2 var(--sans);color:var(--ink-hi);transition:border-color .3s,background .3s}
.teams li span{font:600 15px var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.teams li.lit{border-color:var(--accent);background:var(--accent-dim)}
.catches{display:grid;gap:8px;align-content:start}
.catch{padding:10px 14px;font:400 14.5px/1.45 var(--serif);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.catch.in{opacity:1;transform:none}
.catch .who{display:flex;justify-content:space-between;margin-bottom:4px}
.catch .pts{color:var(--seal)}
/* scene 10 · what we don't claim */
.claims{width:min(100%,780px);justify-self:start;display:grid;gap:0;margin:0;padding:0;list-style:none}
.claims li{padding:11px 0;border-top:1px solid var(--line);font:400 15.5px/1.5 var(--sans);color:var(--ink)}
.claims li b{display:block;color:var(--ink-hi);font-weight:500}
.doors-row{width:min(100%,780px);justify-self:start;display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:800px){.doors-row{grid-template-columns:repeat(3,1fr)}}