/* fx.css: home's living figures (FX-1 Plate I, FX-2 Fig. 3, FX-3 Fig. 2). Hidden and moving
   states sit behind .js, data-fx-state and prefers-reduced-motion: no-preference */

/* FX-1 Plate I (--u = viewBox width / rendered width; no-JS values here) */
.plate-i{--b:26px;display:grid;row-gap:16px;margin-top:64px}
.plate-i__stage{position:relative}
/* One svg per part, stacked in drawing order (the first sizes the stage) */
.plate-i__draw{--u:1;position:relative;fill:none;stroke:var(--ink);stroke-width:calc(var(--u)*1px);stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.plate-i__draw>svg{display:block;width:100%;height:auto;overflow:visible}
.plate-i__draw>svg+svg{position:absolute;left:0;top:0;height:100%}
@media (max-width:1439px){.plate-i__draw{--u:1.406}}
@media (max-width:1023px){.plate-i__draw{--u:2}}
.plate-i .s{fill:var(--paper)}
.plate-i[data-fx-state] .s{pointer-events:fill;cursor:pointer}
.plate-i .f{stroke-width:calc(var(--u)*.75px)}
.plate-i text{fill:var(--ink-2);stroke:none;font:400 calc(var(--u)*13px)/1 var(--mono)}
.plate-i__pins li{position:absolute;left:var(--x);top:var(--y);margin:calc(var(--b)/-2)}
.plate-i__pin,.plate-i__n{display:grid;place-items:center;width:var(--b);height:var(--b);border:1px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);font:500 var(--fs-mono)/1 var(--mono);text-decoration:none}
.plate-i__pin{position:relative}
[data-k="1"]>.plate-i__n,.plate-i__pin[data-k="1"]{border-color:var(--red);color:var(--red-deep)}
.plate-i__sub{position:absolute;left:calc(100% + 6px);top:calc(var(--b)/2 - 7px);font:500 var(--fs-mono)/1 var(--mono);color:var(--red-deep);white-space:nowrap}
.plate-i__key li{border-top:var(--hair)}
.plate-i__key li:target{background:var(--paper-2)}
.plate-i__item{display:grid;grid-template-columns:26px 1fr;column-gap:12px;width:100%;min-height:44px;padding:9px 0;border:0;background:none;text-align:left;font:400 var(--fs-small)/1.5 var(--sans);color:var(--ink-2);cursor:pointer}
.plate-i__item strong{font-weight:500;color:var(--ink)}
.plate-i .cap{margin-top:0}
.plate-i__tblock{display:none}
@media (max-width:719px){
.plate-i{margin-top:32px;row-gap:12px}
.plate-i__stage{margin-inline:calc(var(--margin)*-1);overflow:hidden}
.plate-i__draw{--u:3.364;transform-origin:0 0;transition:transform 460ms var(--ease)}
.plate-i__pins li{transition:translate 460ms var(--ease)}
.plate-i:not(.is-zoomed) .plate-i__marks,.plate-i__more{display:none}
[aria-pressed="true"] .plate-i__more{display:inline}
}
@media (min-width:1024px){
.plate-i{--b:30px}
.plate-i__key{display:grid;grid-template-columns:repeat(5,1fr);column-gap:var(--gutter)}
.plate-i__key li{border-top:var(--rule-ink)}
.plate-i__item{grid-template-columns:1fr;row-gap:10px;padding-top:14px}
.plate-i__foot{display:grid;grid-template-columns:1fr auto;column-gap:40px;align-items:start}
.plate-i__tblock{display:grid;grid-template-columns:repeat(5,auto);border:var(--rule-ink);font:400 var(--fs-mono)/1.4 var(--mono)}
.plate-i__tblock div{padding:6px 10px;border-left:var(--hair-2)}
.plate-i__tblock dt{color:var(--ink-3)}
}
.plate-i__pin,.plate-i__sub{transition:opacity var(--t) var(--ease)}
/* Recede: a paper veil (86%: 14% left) under the lifted part */
.plate-i__draw{isolation:isolate}
.plate-i__draw::after{content:"";position:absolute;inset:-2px;z-index:1;background:var(--paper);opacity:0;transition:opacity var(--t) var(--ease)}
.plate-i[data-k] .plate-i__draw::after{opacity:.86}
.plate-i[data-k="1"] .plate-i__draw::after{opacity:.68}
.plate-i__draw .is-on{z-index:2}
.plate-i[data-k] :where(.plate-i__pin,.plate-i__sub){opacity:.4}
/* Key: a 19% veil takes ink-2 to ink-3 */
.plate-i__item{position:relative}
.plate-i__item::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none;transition:opacity var(--t) var(--ease)}
.plate-i[data-k] .plate-i__item:not(.is-on)::after{opacity:.19}
.plate-i[data-k] .is-on,.plate-i[data-k="1"] .plate-i__sub{opacity:1}
.plate-i[data-k] .plate-i__item.is-on{color:var(--ink)}
.plate-i__pin.is-on,.is-on>.plate-i__n{background:var(--ink);color:var(--paper)}
.plate-i__pin.is-on[data-k="1"],.is-on[data-k="1"]>.plate-i__n{background:var(--red)}
/* Sightlines: shown at rest and without JS; full on isolation */
.plate-i__rays{position:absolute;inset:0}
.plate-i__rays span{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:calc(var(--k,1)*1px);margin-top:calc(var(--k,1)*-.5px);background:var(--red-deep);transform-origin:0 50%;rotate:var(--a);opacity:.4}
.plate-i__rays .feed{background:var(--ink-2)}
.plate-i[data-k] .plate-i__rays .is-on{opacity:1}
@media screen and (prefers-reduced-motion:no-preference){
[data-fx-state="armed"] .plate-i__part path{stroke-dasharray:1;stroke-dashoffset:1}
[data-fx-state="armed"] :is(.c,.d,.plate-i__marks,.plate-i__pins li){opacity:0}
[data-fx-state="armed"] .plate-i__rays span{scale:0 1}
.is-plotting .plate-i__part path{animation:pi-plot var(--du,700ms) linear var(--dl,0ms) backwards}
.is-plotting :is(.d,.plate-i__marks,.plate-i__pins li){animation:pi-fade 200ms linear 1150ms backwards}
.is-plotting .plate-i__stage .c{animation:pi-fade 500ms linear backwards}
.is-plotting .plate-i__pins li:first-child{animation-delay:1200ms}
.is-plotting .plate-i__rays span{animation:pi-ray 520ms linear 880ms backwards}
}
@keyframes pi-plot{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes pi-fade{from{opacity:0}}
@keyframes pi-ray{from{scale:0 1}}

/* FX-2 Fig. 3 */
html:not(.js) :is(.tl__head,.tl__cap[data-view="scale"],.tl__hint){display:none}
.tl__head{--l:2;display:grid;row-gap:12px;min-height:calc(var(--l)*1.45*var(--fs-mono) + 56px);margin-bottom:22px;visibility:hidden}
@media (max-width:719px){.tl__head{--l:3}}
@media (max-width:359px){.tl__head{--l:4}}
[data-fx-state]>.tl__head,[data-fx-state] .tl__hint{visibility:visible}
.tl__head{grid-template-columns:minmax(0,1fr)}
.tl__ctrl{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.tl__view .seg__opts{display:inline-flex;width:auto}
.fx-pause{width:5.75em;min-height:44px;border:1px solid var(--ink-3);background:none;font:500 .9375rem/1 var(--sans);color:var(--ink-2);cursor:pointer}
.fx-pause:hover{color:var(--ink);border-color:var(--ink)}
.tl__read{grid-row:2;display:grid;font:400 var(--fs-mono)/1.45 var(--mono);font-variant-numeric:tabular-nums}
.tl__read>span,.tl__read-live>span,.tl__read-size>span>span{display:block}
.tl__read-live,.tl__read-size,.tl__read-size>span{grid-area:1/1}
.tl__read>.tl__read-size{display:grid;visibility:hidden}
.tl__read-size b{font-weight:500}
.tl__read-day{font-weight:500}
.tl__read-you{color:var(--red-deep)}
.js [data-fx="fig3"] .cap__text{display:grid}
.js .tl__cap{grid-area:1/1}
.tl__cap[data-view="scale"],[data-view="scale"] .tl__cap[data-view="schematic"],.tl__hint{visibility:hidden}
[data-view="scale"] .tl__cap[data-view="scale"]{visibility:visible}
[data-fx-state] .tl__chart{cursor:ew-resize;touch-action:pan-y}
.tl__track{position:absolute;inset:-12px 0 auto;height:112px;overflow:hidden;pointer-events:none}
@media (max-width:719px){.tl__track{top:14px;height:108px}}
.tl__hand{position:absolute;inset:0;transform:translateX(calc((var(--d,20) - .5)/60*100%));transition:transform 90ms var(--ease)}
.tl__hand::before,.tl__hand::after{content:"";position:absolute;top:4px;bottom:0;left:0;width:1px;background:var(--ink)}
.tl__hand::after{top:0;left:-3px;width:7px;height:7px}
.count__n{position:relative}
.count__n::after,.tl__lane--you::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 0;transition:transform var(--t) var(--ease)}
.tl__lane--you::after{bottom:-4px}
.count .is-on .count__n::after,[data-fx-read][data-ph="total"] .tl__lane--you::after{transform:none}
.tl__us{transform-origin:0 calc(100% + 92px)}
.tl__mark--async{transform-origin:0 calc(100% + 8px)}
.is-drawn :is(.tl__us,.tl__mark){transition:opacity var(--t-fast) var(--ease),scale var(--t-fast) var(--ease)}
.tl__lane,.tl__key li,.tl__key .sw,.count__n{transition:color var(--t) var(--ease),opacity var(--t) var(--ease)}
.is-morph :is(.tl__us,.tl__mark,.tl__lane){transition-duration:600ms}
[data-fx-read] :is(.tl__mark:not(.is-on),li:not(.is-on) .sw){opacity:.3}
[data-fx-read] .tl__mark.is-on{scale:1 1.12}
[data-fx-read] .tl__key li:not(.is-on),[data-fx-read]:not([data-ph="total"]) .count__row:not(.is-on,.count__row--total) .count__n{color:var(--ink-3)}
[data-fx-read] .tl__key .is-on{color:var(--ink)}
[data-fx-read] .tl__key-when{color:inherit}
@media (max-width:719px){.tl__lane--you{position:relative;justify-self:start}[data-view="scale"] .tl__lane--you{opacity:0}}
.tl[data-view="scale"] .tl__chart :is(.tl__us,.tl__mark){opacity:0;scale:1 0}
[data-view="scale"] .tl__lane--us{opacity:0}
.tl__scale{position:absolute;left:0;top:0;opacity:0;pointer-events:none;transition:opacity 600ms var(--ease),scale 600ms var(--ease)}
.tl__scale{width:100%;height:calc(100% - 33.5px);overflow:visible;fill:none;scale:1 0;transform-origin:50% 100%}
.tl__cells{fill:var(--red)}
.tl__grid,.tl__appr{stroke:var(--rule);stroke-width:1px;vector-effect:non-scaling-stroke}
.tl__appr{stroke:var(--red)}
[data-view="scale"] .tl__scale{opacity:1;scale:none}

/* FX-3 Fig. 2 */
.case__standfirst+.geo{margin-top:0}
.geo+.findings{margin-top:clamp(36px,4vw,52px)}
.geo-ref{position:relative;display:inline-block}
.geo-ref::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 0;transition:transform 180ms var(--ease)}
.geo-ref[data-geo="us"]::after{background:var(--red)}
.geo-ref:is(.is-on,.is-lbl)::after{transform:none}
.geo__seg::before,.geo__bk::before{content:"";position:absolute;inset:0;z-index:1;background:var(--paper);opacity:0;transition:opacity var(--t) var(--ease)}
.geo__bk::before{inset:-1px -1px 0}
.geo__bk-label,.geo__home{transition:color var(--t) var(--ease)}
[data-geo-on] :is(.geo__seg,.geo__bk):not(.is-on)::before{opacity:.6}
[data-geo-on] .geo__bk:not(.is-on,.is-lbl) .geo__bk-label{color:var(--ink-3)}
[data-geo-on] .geo__home.is-on{color:var(--ink)}