/* The homepage system introduction, between the hypothesis and results. */
.ttc-bridge {
  background:var(--cream);
  padding:64px 0 0;
  margin:0 0 76px;
}

.ttc-bridge-grid {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:90px;
  padding:30px 0 50px;
  align-items:center;
}

.ttc-copy h2 {
  margin:0 0 23px;
  font:400 clamp(42px,4.8vw,68px)/1.03 var(--sans);
  letter-spacing:-.052em;
}

.ttc-copy em {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}

.ttc-lead {
  font:400 clamp(21px,2vw,28px)/1.35 var(--sans);
  letter-spacing:-.025em;
  margin:0 0 20px;
}

.ttc-body {
  font:400 17px/1.65 var(--sans);
  color:var(--muted-text);
  margin:0 0 20px;
  max-width:570px;
}

/* The graphic, drawn by scripts/build_ttc_figure.py: the agent above, and the Test Time Cognition
   layer, where cognition (the dot at the root of the search) coordinates the model's learned weights
   (sage), memory of past episodes (coral) and a new search (accent green). Every colour is a site
   theme token, so the light (sage and coral) and dark (graphite and chalk) themes both work. */
.ttc-figure { margin:0; width:100%; }
.ttc-art { --art-bg:var(--paper); display:block; width:100%; height:auto; overflow:visible; }

.ttc-art .tc-frame { fill:var(--paper); stroke:var(--accent); stroke-width:1.2; }
.ttc-art .tc-rule { fill:none; stroke:var(--rule); stroke-width:1; }
.ttc-art .tc-card { fill:var(--cream); stroke:var(--rule); stroke-width:1; }
.ttc-art .tc-on-card { --art-bg:var(--cream); }
.ttc-art .tc-dot { fill:var(--ink); }  /* the layer's name, marked with cognition's dot */

.ttc-art .tc-mono { font:11px/1 var(--mono); letter-spacing:1.2px; fill:var(--ink); }
.ttc-art .tc-mono--small { font-size:9.5px; letter-spacing:1px; }
.ttc-art .tc-mono--muted { fill:var(--muted-text); }
.ttc-art .tc-mono--accent { fill:var(--accent-text); }
.ttc-art .tc-mono--coral { fill:var(--coral); }
.ttc-art .tc-sans { font:13px/1 var(--sans); fill:var(--muted-text); }

.ttc-art .tc-task { fill:none; stroke:var(--ink); stroke-opacity:.6; stroke-width:1.2; }
.ttc-art .tc-answer { fill:none; stroke:var(--accent); stroke-width:1.8; }

/* The model: a small network, with the pathway its weights have learned in sage. */
.ttc-art .tc-edge { fill:none; stroke:var(--ink); stroke-opacity:.075; stroke-width:.7; }
.ttc-art .tc-neuron { fill:var(--cream); stroke:var(--ink); stroke-opacity:.35; stroke-width:1; }
.ttc-art .tc-neuron--prior { fill:rgb(var(--field-glow-rgb)); stroke:rgb(var(--field-glow-rgb)); stroke-opacity:1; }
.ttc-art .tc-prior { fill:none; stroke:rgb(var(--field-glow-rgb)); stroke-width:2.4; }

/* Guidance into cognition, and the outcome kept for next time. */
.ttc-art .tc-guide { fill:none; stroke-width:1.6; stroke-dasharray:1 4; }
.ttc-art .tc-guide--weights { stroke:rgb(var(--field-glow-rgb)); stroke-width:2.2; }
.ttc-art .tc-guide--memory { stroke:var(--coral); }
.ttc-art .tc-keep { fill:none; stroke:var(--coral); stroke-width:1.3; stroke-dasharray:3 3.5; stroke-opacity:.8; }
/* A bright head that runs along a line while the graphic plays; the still never shows it. */
.ttc-art .tc-head { fill:none; stroke-width:4; stroke-linecap:round; opacity:0; }
.ttc-art .tc-head--task { stroke:var(--ink); }
.ttc-art .tc-head--weights { stroke:rgb(var(--field-glow-rgb)); stroke-width:5; }
.ttc-art .tc-head--memory { stroke:var(--coral); }

/* The search space, drawn as a forest: branches thin and fade as they reach outward. */
.ttc-art .tc-tw { fill:none; stroke:var(--ink); }
.ttc-art .tc-tw--1 { opacity:.7; stroke-width:1.25; }
.ttc-art .tc-tw--2 { opacity:.58; stroke-width:1.05; }
.ttc-art .tc-tw--3 { opacity:.45; stroke-width:.85; }
.ttc-art .tc-tw--4 { opacity:.34; stroke-width:.7; }
.ttc-art .tc-knot { fill:var(--ink); fill-opacity:.6; }
.ttc-art .tc-ray { fill:none; stroke:rgb(var(--field-glow-rgb)); stroke-width:.9; stroke-opacity:.55; }

/* The new search, in accent green, and the checked answer. */
.ttc-art .tc-sel { fill:none; stroke:var(--accent); stroke-width:2.4; }
.ttc-art .tc-sel-node { fill:var(--accent); stroke:var(--paper); stroke-width:1.4; }
.ttc-art .tc-goal circle { fill:var(--paper); stroke:var(--accent); stroke-width:1.5; }
.ttc-art .tc-goal path { fill:none; stroke:var(--accent); stroke-width:1.7; }
.ttc-art .tc-x { fill:none; stroke:var(--muted); stroke-width:1.2; }

/* Memory, in coral. */
.ttc-art .tc-mem { fill:none; stroke:var(--coral); stroke-width:2.2; }
.ttc-art .tc-mem-node { fill:var(--coral); stroke:var(--art-bg); stroke-width:1.4; }
.ttc-art .tc-mem-node--sm { stroke-width:.8; }

/* Cognition: one dot at the root of the search. While the graphic plays, a copy in the colour of
   whoever is at work (learned weights, memory, search) comes in over it, and a last ink copy brings
   it back; the still shows only the ink dot. */
.ttc-art .tc-root { fill:var(--ink); }
.ttc-art .tc-root--weights { fill:rgb(var(--field-glow-rgb)); opacity:0; }
.ttc-art .tc-root--memory { fill:var(--coral); opacity:0; }
.ttc-art .tc-root--search { fill:var(--accent); opacity:0; }
.ttc-art .tc-root--ink { opacity:0; }  /* the ink it settles back to */

/* The graphic rests on the finished frame and plays once while it is hovered, or while the
   section's link has keyboard focus, like the Join Us graphic: the task drops into cognition, the
   search space grows from it, the model's learned pathway lights and narrows the search, memory
   recalls a past episode's route, a short new search checks out, the answer rises to the agent, and
   the outcome runs back into memory. Cognition's dot takes the colour of whoever is at work along
   the way. Touch screens and reduced motion see the still. Each mark that moves names its kind of
   step as a class (tc-a-draw, -pop, -in, -tint, -settle, -pulse, -run) and carries its start, length
   and easing as --t, --d and --e, set by scripts/build_ttc_figure.py. Each step plays once: its
   first frame holds until it starts, and its last frame is the still, apart from the dot's colours
   (tint and settle), which hold until the hover ends. */
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  :is(.ttc-figure:hover, .ttc-bridge:has(.text-link:focus-visible) .ttc-figure) .tc-a {
    animation-delay:var(--t, 0s);
    animation-duration:var(--d, .4s);
    animation-timing-function:var(--e, ease);
    animation-fill-mode:both;
    transform-box:fill-box;
    transform-origin:center;
  }
  :is(.ttc-figure:hover, .ttc-bridge:has(.text-link:focus-visible) .ttc-figure) .tc-a-draw { animation-name:tc-draw; stroke-dasharray:1; }
  :is(.ttc-figure:hover, .ttc-bridge:has(.text-link:focus-visible) .ttc-figure) .tc-a-pop { animation-name:tc-pop; animation-timing-function:var(--e, ease-out); }
  :is(.ttc-figure:hover, .ttc-bridge:has(.text-link:focus-visible) .ttc-figure) .tc-a-in { animation-name:tc-in; }
  :is(.ttc-figure:hover, .ttc-bridge:has(.text-link:focus-visible) .ttc-figure) .tc-a-pulse { animation-name:tc-pulse; }
  /* A tint comes in over the colour before it, then swells the dot for a moment once it covers it;
     settling brings the ink back without a swell. */
  :is(.ttc-figure:hover, .ttc-bridge:has(.text-link:focus-visible) .ttc-figure) .tc-a-tint { animation-name:tc-tint, tc-beat; animation-duration:var(--d, .12s), .45s; animation-delay:var(--t, 0s), calc(var(--t, 0s) + var(--d, .12s)); animation-timing-function:ease-out, ease-in-out; }
  :is(.ttc-figure:hover, .ttc-bridge:has(.text-link:focus-visible) .ttc-figure) .tc-a-settle { animation-name:tc-tint; animation-timing-function:ease-in-out; }
  /* One dash, --dash long as a fraction of the line, with a gap longer than the line; it runs from
     the line's start until it has slipped off its end. */
  :is(.ttc-figure:hover, .ttc-bridge:has(.text-link:focus-visible) .ttc-figure) .tc-a-run { animation-name:tc-run; stroke-dasharray:var(--dash) 2; }
}
@keyframes tc-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes tc-pop { 0% { transform:scale(0); } 60% { transform:scale(1.5); } 100% { transform:scale(1); } }
@keyframes tc-in { from { opacity:0; } }
@keyframes tc-pulse { 0%, 100% { transform:scale(1); } 40% { transform:scale(1.7); } }
@keyframes tc-tint { from { opacity:0; } to { opacity:1; } }
@keyframes tc-beat { 0%, 100% { transform:scale(1); } 40% { transform:scale(1.45); } }
@keyframes tc-run { 0% { opacity:0; stroke-dashoffset:0; } 6%, 94% { opacity:1; } 100% { opacity:0; stroke-dashoffset:-1; } }

/* The labels are drawn in the graphic's own units, so where it is drawn smaller they are set larger
   to stay legible: a narrow desktop column, then phones. */
@media (max-width:1299px) and (min-width:1001px) {
  .ttc-art .tc-mono { font-size:13px; }
  .ttc-art .tc-mono--small { font-size:12px; }
  .ttc-art .tc-sans { font-size:15.5px; }
}

@media(max-width:1000px) {
  .ttc-bridge-grid { grid-template-columns:1fr; gap:40px; }
  .ttc-figure { max-width:640px; }
}

@media(max-width:760px) {
  .ttc-bridge { padding-top:40px; margin-bottom:55px; }
  .ttc-bridge-grid { gap:35px; padding:24px 0 32px; }
  .ttc-copy h2 { font-size:46px; }
  .ttc-lead { font-size:23px; }
  .ttc-art .tc-mono { font-size:14px; letter-spacing:1px; }
  .ttc-art .tc-mono--small { font-size:12.5px; letter-spacing:.9px; }
  .ttc-art .tc-sans { font-size:17px; }
}

@media(max-width:480px) {
  .ttc-art .tc-mono { font-size:16px; }
  .ttc-art .tc-mono--small { font-size:14px; letter-spacing:.8px; }
  .ttc-art .tc-sans { font-size:19px; }
}

@media(max-width:360px) {
  .ttc-art .tc-mono { font-size:17px; }
  .ttc-art .tc-mono--small { font-size:16px; }
  .ttc-art .tc-sans { font-size:21px; }
}