/* How it works (docs/design/website-motion.md, revision 8). By default (no script, reduced motion, no WebGL2) the flat version: the
   record families, then the five stages as cards, cool to warm, each with the facts it finds on the example parcel, and the
   shortlist under Rank. landing-intake.js adds .gl when the 3D scene runs: a one-screen stage pinned through four screens of
   scroll, the canvas full bleed, and the same text as labels it places on projected points every frame. */
.engine { padding: 140px 0 150px; background: var(--g0); }
.engine > .sec-head, .intake-stage { max-width: min(1240px, 90%); margin-left: auto; margin-right: auto; }
.intake-gl { display: none; }
.intake-stage { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.75fr); gap: 10px 56px; align-items: start; }
.intake-fam { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.intake-fam li { padding: 7px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--g1); font-size: 13px; color: var(--tx-2); }
.intake-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.intake-steps > li { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: 12px 28px; padding: 18px 20px 20px;
  border: 1px solid var(--line-2); border-left: 2px solid var(--c); border-radius: 2px; background: var(--card); }
.st-cap { margin: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 6px; align-content: start; }
.st-cap b { font-weight: 500; font-size: 16px; color: var(--tx-1); }
.st-cap > span:last-child { grid-column: 2; font-size: 13px; line-height: 1.45; color: var(--tx-2); }
.st-n { font: 500 11px/1.9 var(--mono); color: var(--tx-4); }
.st-tags { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; align-content: start; }
.st-tags li { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 13px; color: var(--tx-1); }
.st-tags b { font: 500 10.5px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.tg-warm b { color: var(--warm); }
.tg-red, .tg-red b { color: var(--red-t); }
.tg-orange, .tg-orange b { color: var(--orange-t); }
.tg-water b { color: var(--blue-t); }
/* the shortlist: rank, address, score and the lead reason (invented addresses) */
.st-list { margin: 0; padding: 0; list-style: none; display: grid; }
.st-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; align-items: baseline; padding: 9px 0;
  border-top: 1px solid var(--line); }
.st-list li:first-child { padding-top: 0; border-top: 0; }
.sl-n { grid-row: 1 / 3; font: 500 11px var(--mono); color: var(--tx-4); }
.st-list b { font-weight: 500; font-size: 14px; color: var(--tx-1); }
.st-list small { margin-left: 6px; font-size: 12px; color: var(--tx-3); }
.sl-s { font: 500 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.sl-s strong { margin-left: 4px; font: 400 20px/1 var(--sans); letter-spacing: -.02em; color: var(--warm); }
.sl-why { grid-column: 2 / 4; font-size: 12.5px; color: var(--tx-2); }
/* each stage warms the stream: the cool white of the record to the warm white of what is being screened */
.intake-steps > li:nth-child(1) { --c: var(--cool); } .intake-steps > li:nth-child(2) { --c: color-mix(in srgb, var(--cool), var(--warm) 25%); }
.intake-steps > li:nth-child(3) { --c: color-mix(in srgb, var(--cool), var(--warm) 50%); } .intake-steps > li:nth-child(4) { --c: color-mix(in srgb, var(--cool), var(--warm) 75%); }
.intake-steps > li:nth-child(5) { --c: var(--warm); }
@media (max-width: 860px) {
  .intake-stage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .intake-steps > li { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
  .engine > .sec-head, .intake-stage { max-width: calc(100% - 32px); }
  .intake-steps > li { padding: 14px 12px 16px; }
  .st-tags li { grid-template-columns: 120px minmax(0, 1fr); }
}

/* ---------- the 3D scene */
.engine.gl { padding-bottom: 0; }
.gl .intake { height: 500svh; }
.gl .intake-stage { position: sticky; top: 0; display: block; max-width: none; height: 100svh; margin: 0; overflow: hidden; }
.gl .intake-gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.gl .intake-fam, .gl .intake-steps, .gl .intake-steps > li, .gl .st-tags { display: block; margin: 0; padding: 0; border: 0; background: none; }
.gl .intake-fam li, .gl .st-cap, .gl .st-tags > li, .gl .rk-mark { position: absolute; z-index: 2; left: 0; top: 0; opacity: 0; white-space: nowrap;
  pointer-events: none; will-change: transform, opacity; }
/* a soft vignette holds the eye on the record, under the labels */
.gl .intake-stage::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 55% 52%, rgb(28 33 39 / 0) 55%, rgb(28 33 39 / 55%)); }
.gl .intake-fam li { padding: 0; border: 0; background: none; font: 500 10.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
/* a stage: its number, its name, its line, and a leader to its point in the scene (landing-intake.js sets the leader's length) */
.gl .st-cap { display: block; width: 290px; white-space: normal; }
.gl .st-cap .st-n { display: block; margin-bottom: 10px; font: 500 11px/1 var(--sans); letter-spacing: .16em; color: var(--tx-3); }
.gl .st-cap b { display: block; margin-bottom: 8px; font: 400 32px/1.02 var(--sans); letter-spacing: -.035em; color: var(--tx-1); }
.gl .st-cap > span:last-child { display: block; font-size: 15px; line-height: 1.45; color: var(--tx-2); }
.gl .st-cap::after { content: ""; position: absolute; left: calc(100% + 12px); top: 50%; width: var(--lead, 40px); height: 1px;
  background: linear-gradient(90deg, rgb(138 149 164 / 0), var(--tx-3)); }
.gl .st-cap::before { content: ""; position: absolute; left: calc(100% + 10px + var(--lead, 40px)); top: calc(50% - 2px); width: 5px; height: 5px; background: var(--warm); }
/* a fact: a frosted glass chip, its key over its value in tabular figures, and a hairline leader from the chip's nearest edge to
   its point, ending in a dot (landing-intake.js sets where the leader starts, its length and angle, and where the point is) */
.gl .st-tags > li { display: block; padding: 7px 11px 8px; border: 1px solid rgb(232 238 245 / 13%); border-radius: 4px;
  background: rgb(22 26 31 / 62%); -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 10px 28px -12px rgb(0 0 0 / 60%), inset 0 1px 0 rgb(255 255 255 / 5%);
  font-size: 13px; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--tx-1); }
.gl .st-tags b { display: block; margin-bottom: 3px; font: 500 9.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.gl .st-tags > li::before { content: ""; position: absolute; left: var(--ax, 0); top: var(--ay, 0); width: var(--len, 0); height: 1px;
  transform: rotate(var(--ang, 0rad)); transform-origin: 0 50%; background: linear-gradient(90deg, currentColor, rgb(232 238 245 / 35%)); opacity: .55; }
.gl .st-tags > li::after { content: ""; position: absolute; left: var(--ex, 0); top: var(--ey, 0); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgb(22 26 31 / 55%); }
.gl .tg-warm { color: var(--warm); border-color: rgb(244 233 214 / 26%); }
.gl .tg-water { color: var(--blue-t); border-color: rgb(138 187 255 / 26%); }
.gl .st-tags .tg-orange { border-color: rgb(200 118 25 / 50%); background: rgb(40 28 16 / 62%); }
.gl .st-tags .tg-red { border-color: rgb(205 66 70 / 50%); background: rgb(40 20 22 / 62%); }
.gl .st-tags .tg-orange b, .gl .st-tags .tg-red b { color: inherit; opacity: .85; }
.gl .rk-mark { padding-bottom: 8px; font: 500 11px/1 var(--mono); color: var(--warm); }
/* the shortlist rises beside the city */
.gl .st-list { position: absolute; z-index: 2; right: 5%; top: 50%; width: 372px; gap: 8px; transform: translateY(-50%); }
.gl .st-list li { padding: 13px 16px 14px; border: 1px solid var(--line-2); border-left: 2px solid var(--warm); border-radius: 2px; background: rgb(38 43 50 / 92%);
  opacity: 0; will-change: transform, opacity; }
.gl .st-list li:first-child { padding-top: 13px; border-top: 1px solid var(--line-2); }
/* a portrait screen (landing-intake.js sets .legend): the families as a legend along the foot of the stage, fading with the scroll */
.gl.legend .intake-fam { position: absolute; left: 16px; right: 16px; bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.gl.legend .intake-fam li { position: static; }
/* a portrait stage pins each stage's heading to the top, away from its point: no leader */
.gl.legend .st-cap::before, .gl.legend .st-cap::after { display: none; }
@media (max-width: 760px) {
  .gl .st-cap { width: calc(100vw - 32px); }
  .gl .st-cap::before, .gl .st-cap::after { display: none; }
  .gl .st-cap .st-n { margin-bottom: 8px; }
  .gl .st-cap b { margin-bottom: 6px; font-size: 26px; }
  .gl .st-cap > span:last-child { font-size: 14px; }
  /* a fact on a phone: a smaller chip; the record chips by their names only */
  .gl .st-tags > li { padding: 5px 8px 6px; font-size: 11.5px; }
  .gl .st-tags b { margin-bottom: 2px; font-size: 9px; }
  .gl .intake-steps > li:nth-child(1) .st-tags span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gl .intake-steps > li:nth-child(1) .st-tags b { margin: 0; }
  /* the chain on a phone: each entity by its role, the person by name (all of it stays in the page) */
  .gl .intake-steps > li:nth-child(2) .st-tags li:nth-child(-n + 3) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gl .intake-steps > li:nth-child(2) .st-tags li:nth-child(-n + 3) b { margin: 0; }
  .gl .st-list { top: auto; right: 16px; bottom: 16px; left: 16px; width: auto; gap: 6px; transform: none; }
  .gl .st-list li { padding: 9px 12px 10px; }
  .gl .st-list li:first-child { padding-top: 9px; }
}