/* 9.6: fragments travel from viewport edges and sharpen as they arrive. */
body{overflow-x:clip;overflow-anchor:none}
.focus-section{grid-template-columns:1fr 1.12fr;gap:46px;padding-block:66px 72px;min-height:700px;overflow:visible}
.focus-art{min-width:0;position:relative;align-self:center;z-index:2}
.focus-stage{width:100%;aspect-ratio:600/590;isolation:isolate}

/* Separate sources retain their colors through the fall, until the foundation outline draws. */
.focus-art .fragment-motion > *{stroke:var(--data-ink,#8b918c);transition:stroke 700ms ease-in-out 200ms,fill 700ms ease-in-out 200ms}
.focus-art[data-state]:not(.is-foundation-unified) .fragment-1{--data-accent:#977386;--data-ink:#a78898;--data-hairline:#e6dde2;--data-muted:#bba4b0;--data-dot:#aa8c9c;--data-bar:#bfa8b4;--data-orbit:#dbced5;--data-measure:#b49aa8;}
.focus-art[data-state]:not(.is-foundation-unified) .fragment-2{--data-accent:#607d9b;--data-ink:#7890aa;--data-hairline:#d9e0e7;--data-muted:#98aabe;--data-dot:#7d94ad;--data-bar:#9caec1;--data-orbit:#c7d2dc;--data-measure:#8da1b7;}
.focus-art[data-state]:not(.is-foundation-unified) .fragment-3{--data-accent:#95874e;--data-ink:#a59969;--data-hairline:#e6e2d5;--data-muted:#bab18c;--data-dot:#a89d6e;--data-bar:#bdb591;--data-orbit:#dad5c1;--data-measure:#b3a980;}
.focus-art[data-state]:not(.is-foundation-unified) .fragment-4{--data-accent:#7c709f;--data-ink:#9085ad;--data-hairline:#e0dde8;--data-muted:#aaa2c1;--data-dot:#948ab0;--data-bar:#aea6c3;--data-orbit:#d1cddd;--data-measure:#a198ba;}
.focus-art[data-state]:not(.is-foundation-unified) .fragment-5{--data-accent:#5b8d90;--data-ink:#749ea1;--data-hairline:#d8e4e4;--data-muted:#94b5b7;--data-dot:#79a2a4;--data-bar:#99b8ba;--data-orbit:#c6d7d8;--data-measure:#89adaf;}
.focus-art[data-state]:not(.is-foundation-unified) .fragment-6{--data-accent:#a16c78;--data-ink:#af828c;--data-hairline:#e8dcdf;--data-muted:#c29fa7;--data-dot:#b28690;--data-bar:#c5a4ab;--data-orbit:#deccd0;--data-measure:#bb959e;}
.focus-art[data-state]:not(.is-foundation-unified) .fragment-7{--data-accent:#747d9b;--data-ink:#8990aa;--data-hairline:#dee0e7;--data-muted:#a5aabe;--data-dot:#8d94ad;--data-bar:#a9aec1;--data-orbit:#ced2dc;--data-measure:#9ba1b7;}
.focus-art[data-state]:not(.is-foundation-unified) .fragment-8{--data-accent:#878354;--data-ink:#99966e;--data-hairline:#e2e1d6;--data-muted:#b1ae90;--data-dot:#9d9973;--data-bar:#b5b295;--data-orbit:#d5d4c3;--data-measure:#a9a684;}
.focus-art[data-state]:not(.is-foundation-unified) .fragment-9{--data-accent:#876d91;--data-ink:#9983a2;--data-hairline:#e2dce5;--data-muted:#b1a0b8;--data-dot:#9d87a5;--data-bar:#b5a4bb;--data-orbit:#d5ccd8;--data-measure:#a996b0;}
.focus-art .fragment-motion > text,.focus-art .fragment-motion > .dot{stroke:none}
@media(prefers-reduced-motion:reduce){.focus-art .fragment-motion > *{transition:none!important}}
.knowledge-field{display:block;width:100%;height:100%;overflow:visible;pointer-events:none;stroke:var(--data-ink,#8b918c);stroke-width:1.5;stroke-linecap:round}
.knowledge-field text{stroke:none;fill:var(--data-ink,#8b918c);font:10px 'DM Sans',sans-serif;letter-spacing:2px}
.knowledge-field .hairline{stroke:var(--data-hairline,#e4e6e1);stroke-width:1}
.knowledge-field .accent{stroke:var(--data-accent,#52775b)}
.knowledge-field .muted{stroke:var(--data-muted,#b9beb6)}
.knowledge-field .dot{fill:var(--data-dot,#939c91);stroke:none}
.knowledge-field .dot.accent{fill:var(--data-accent,#52775b);stroke:none}
.knowledge-field .bar{stroke-width:9;stroke-linecap:butt;stroke:var(--data-bar,#c6ccc2)}
.knowledge-field .bar.accent{stroke:var(--data-accent,#52775b)}
.knowledge-field .spark{stroke-width:2}
.knowledge-field .orbit{stroke:var(--data-orbit,#e2e5de);stroke-width:3}
.knowledge-field .arc{stroke-width:3}
.knowledge-field .measure{stroke:var(--data-measure,#abb5a6);stroke-width:4;stroke-linecap:butt}
.knowledge-field .measure.accent{stroke:var(--data-accent,#52775b)}
.field-guides{stroke:#e0e4dc;stroke-width:1;opacity:.8}
.field-guides .registration{stroke:#aeb8a8}
.field-connections{stroke:#78916e;stroke-width:1.2;fill:none;opacity:.65}
.field-connections circle{fill:#78916e;stroke:none}
.fragment-motion{transform-box:fill-box;transform-origin:center;filter:none;opacity:1;transform:none;transition:transform 1458ms linear,opacity 1003ms linear;transition-delay:var(--lag,0ms)}
.fragment-1{--turn:-26deg;--blur:10px;--lag:0ms}
.fragment-2{--turn:18deg;--blur:13px;--lag:78ms}
.fragment-3{--turn:-21deg;--blur:10px;--lag:155ms}
.fragment-4{--turn:23deg;--blur:12px;--lag:50ms}
.fragment-5{--turn:-16deg;--blur:14px;--lag:215ms}
.fragment-6{--turn:29deg;--blur:11px;--lag:105ms}
.fragment-7{--turn:-24deg;--blur:12px;--lag:178ms}
.fragment-8{--turn:20deg;--blur:13px;--lag:260ms}
.fragment-9{--turn:-18deg;--blur:10px;--lag:137ms}
.focus-art[data-state="scattered"] .fragment-motion{transform:translate(var(--dx),var(--dy)) rotate(var(--turn));filter:blur(var(--blur));opacity:.62}
.focus-art[data-state="waiting"] .fragment-motion{visibility:hidden}
/* Half the blur clears during travel; the rest clears in 450ms after landing. */
.focus-art[data-state="arriving"] .fragment-motion{animation:fragment-focus 1908ms linear var(--lag,0ms) both}
@keyframes fragment-focus{0%{filter:blur(var(--blur))}76.4151%{filter:blur(calc(var(--blur) * .5))}100%{filter:blur(0px)}}
/* Separate phases: land, fade the grid, then draw the connections. */
.field-guides{transition:opacity 300ms ease}
.focus-art:is([data-state="waiting"],[data-state="scattered"],[data-state="arriving"]) .field-guides{opacity:0}
.field-connections path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 550ms cubic-bezier(.4,0,.2,1) 200ms}
.field-connections circle{transform-box:fill-box;transform-origin:center;transform:scale(1);opacity:1}
.focus-art[data-state="connecting"] .field-connections circle{animation:connection-dot-in 250ms both}
@keyframes connection-dot-in{0%{transform:scale(0);opacity:0}65%{transform:scale(1.3);opacity:1}100%{transform:scale(1);opacity:1}}
.focus-art:is([data-state="waiting"],[data-state="scattered"],[data-state="arriving"],[data-state="grid"]) .field-connections path{stroke-dashoffset:1}
.focus-art:is([data-state="waiting"],[data-state="scattered"],[data-state="arriving"],[data-state="grid"]) .field-connections circle{transform:scale(0);opacity:0}
.focus-art.is-resetting *{transition:none!important;animation:none!important}
.focus-controls{display:flex;justify-content:space-between;align-items:center;min-height:40px;margin:12px 22px 0;border-top:1px solid #e0e4dc;padding-top:14px;gap:12px}
.focus-status{color:#687166;font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.focus-replay{font:12px 'DM Sans',sans-serif;border:0;border-bottom:1px solid #bbc5b6;padding:5px 0;background:none;color:#426a50;cursor:pointer}
.focus-replay span{margin-right:6px;font-size:16px}
.focus-replay:hover{color:#253c2b;border-color:currentColor}
.focus-replay[hidden]{display:none}
@media(max-width:900px){.focus-section{gap:24px;grid-template-columns:1fr 1fr;min-height:600px}.focus-controls{margin-inline:4px}}
@media(max-width:650px){.focus-section{display:flex;gap:34px;padding-block:40px 36px;min-height:0}.focus-art{width:100%}.focus-stage{max-width:480px;margin-inline:auto}.focus-controls{margin-top:0}.focus-status{font-size:10px}}
@media(prefers-reduced-motion:reduce){.focus-art *{transition:none!important;animation:none!important}.focus-art .fragment-motion{transform:none!important;filter:none!important;opacity:1!important;visibility:visible!important}.focus-art .field-guides{opacity:.8!important}.focus-art .field-connections{opacity:.65!important}.focus-art .field-connections path{stroke-dashoffset:0!important}.focus-art .field-connections circle{transform:none!important;opacity:1!important}.focus-replay{display:none!important}}

/* The assembled information, grid and connectors become one foundation. */
.foundation{position:relative;padding-block:48px}
.foundation-layout{display:grid;grid-template-columns:1fr 1.12fr;gap:46px;align-items:center}
.foundation-copy{position:relative;z-index:3}
.foundation h2{max-width:470px}
.foundation-base{height:244px;position:relative;align-self:center}
.foundation-static{position:absolute;left:0;top:50px;width:100%;height:138px}
.focus-art[data-foundation] .focus-controls{opacity:calc(1 - var(--foundation-fade,0))}
.has-foundation-motion .foundation-static{visibility:hidden}
@media(max-width:900px){.foundation-layout{gap:24px;grid-template-columns:1fr 1fr}}
@media(max-width:650px){.foundation-layout{display:flex;flex-direction:column;align-items:stretch;gap:14px}.foundation-base{width:100%;height:220px}.foundation{padding-block:36px}.foundation h2{max-width:none}}
@media(prefers-reduced-motion:reduce){.foundation-static{visibility:visible!important}.foundation-cell{transform:none!important}}

/* Preserve the weight of the structural edges as their cells compress. */
.field-guides path,.field-guides rect,.field-connections path{vector-effect:non-scaling-stroke}

/* Two midpoint dots close the finished foundation into one continuous outline. */
.foundation-outline{position:absolute;left:0;right:0;top:50px;height:138px;pointer-events:none}
.foundation-outline svg{display:block;width:100%;height:100%;overflow:visible}
.foundation-outline path{stroke:#52775b;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.foundation-node{position:absolute;top:50%;width:6px;height:6px;margin:-3px;background:#52775b;border-radius:50%;z-index:1;opacity:0;transform:scale(0)}
.node-left{left:0}.node-right{left:100%}
.has-foundation-motion .foundation-base:not(.is-unified) .foundation-node{opacity:0;transform:scale(0)}
.has-foundation-motion .foundation-base:not(.is-unified) .foundation-outline path{stroke-dashoffset:1;visibility:hidden}
.has-foundation-motion .foundation-base.is-unified .foundation-node{animation:foundation-node-in 900ms ease-in-out both}
.has-foundation-motion .foundation-base.is-unified .foundation-outline path{animation:foundation-outline-in 700ms ease-in-out 200ms both}
@keyframes foundation-node-in{0%{opacity:0;transform:scale(0)}22%{opacity:1;transform:scale(1.3)}38%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}
@keyframes foundation-outline-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.foundation-outline *{animation:none!important}.foundation-node{opacity:0!important;transform:scale(0)!important}.foundation-outline path{stroke-dashoffset:0!important;visibility:visible!important}}

/* The slab cures with the perimeter; its final quarter settles after the lines meet. */
.foundation-base::before{content:"";position:absolute;left:0;right:0;top:50px;height:138px;background:rgb(82 119 91 / 12%);pointer-events:none}
.has-foundation-motion .foundation-base:not(.is-unified)::before{opacity:0}
.has-foundation-motion .foundation-base.is-unified::before{animation:foundation-cure 933.333ms linear 200ms both}
@keyframes foundation-cure{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.foundation-base::before{animation:none!important;opacity:1!important}}