/* Article graphics: still drawings in the language of the homepage figures, drawn by
   scripts/build_article_art.py. The search space is a forest whose branches thin toward the rim;
   accent green is the search done now, sage is what has been learned, coral is memory, and
   cognition is one plain ink dot at the root of the search. Every colour is a site theme token, so
   both themes work. */

.article-art { --art-bg: var(--paper); display: block; width: 100%; height: 100%; overflow: visible; }

/* The search space. Each band of branches is a group of paths that carries the band's opacity, so
   crossing branches are not drawn darker where they meet. */
.aa-tw { fill: none; stroke: var(--ink); }
.aa-tw--1 { opacity: .7; stroke-width: 1.25; }
.aa-tw--2 { opacity: .58; stroke-width: 1.05; }
.aa-tw--3 { opacity: .45; stroke-width: .85; }
.aa-tw--4 { opacity: .34; stroke-width: .7; }
.aa-knot { fill: var(--ink); fill-opacity: .6; }
.aa-node { fill: var(--art-bg); stroke: var(--ink); stroke-opacity: .5; stroke-width: 1.15; }
.aa-node--mem { stroke: var(--coral); stroke-opacity: 1; }
.aa-root { fill: var(--ink); }
.aa-line { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.1; }
.aa-axis { fill: none; stroke: var(--ink); stroke-opacity: .5; stroke-width: 1.6; }
.aa-block { fill: var(--ink); fill-opacity: .82; }
.aa-ghost { fill: none; stroke: var(--ink); stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 2.5 2.5; }
.aa-flow { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: .9; }
.aa-orbit { fill: none; stroke: var(--ink); stroke-opacity: .8; stroke-width: 1.6; }
.aa-tick { fill: none; stroke: var(--ink); stroke-opacity: .75; stroke-width: 1.4; stroke-linecap: round; }
/* A head that runs along a line when its tile is hovered; the still never shows it. */
.aa-head { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; opacity: 0; }

/* What has been learned, in sage. */
.aa-lt { fill: none; stroke: rgb(var(--field-glow-rgb)); }
.aa-lt--1 { opacity: .95; stroke-width: 1.2; }
.aa-lt--2 { opacity: .85; stroke-width: 1; }
.aa-lt--3 { opacity: .75; stroke-width: .85; }
.aa-lt--4 { opacity: .65; stroke-width: .7; }
.aa-recall { fill: none; stroke: rgb(var(--field-glow-rgb)); stroke-width: 2.4; }
.aa-recall--bold { stroke-width: 3.4; }
.aa-ray { fill: none; stroke: rgb(var(--field-glow-rgb)); stroke-width: .9; stroke-opacity: .55; }
.aa-zone { fill: none; stroke: rgb(var(--field-glow-rgb)); stroke-width: .9; stroke-opacity: .7; stroke-dasharray: 3 3; }

/* Explicit search: the selected path, in accent green. */
.aa-sel { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.aa-axis--sel { stroke: var(--accent); stroke-opacity: 1; stroke-width: 3; }
.aa-sel-node { fill: var(--accent); stroke: var(--art-bg); stroke-width: 1.4; }
.aa-sel-node--head { opacity: 0; }  /* the bright head that leads a climb; the still never shows it */
.aa-goal circle { fill: var(--art-bg); stroke: var(--accent); stroke-width: 1.5; }
.aa-goal path { fill: none; stroke: var(--accent); stroke-width: 1.7; }
.aa-x { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.aa-x--lg { stroke-width: 1.6; }
/* A wrong answer: the check's circle, crossed, in ink. */
.aa-miss circle { fill: var(--art-bg); stroke: var(--ink); stroke-opacity: .6; stroke-width: 1.5; }
.aa-miss path { fill: none; stroke: var(--ink); stroke-opacity: .75; stroke-width: 1.7; }

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

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

/* Labels in the graphic, in the site's heading face; the script sets their size. The fixed axes'
   names are muted, and the name of what moves is in accent. */
.aa-label { fill: var(--muted-text); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: -.01em; }
.aa-label--sel { fill: var(--accent-text); letter-spacing: .02em; }

/* A tagline set in the graphic, in the site's heading face, with its key word in accent. */
.aa-tag { fill: var(--ink); font: 400 20px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.02em; }
.aa-tag-em { fill: var(--accent-text); }

/* On the research and blog indexes the graphic replaces the tile's picture. */
.tiled-index .blog-card-art--graphic { background: var(--paper); }
.tiled-index .blog-card-art--graphic .article-art {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 7%;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.tiled-index .blog-card-art--graphic .article-art--wide { padding: 5% 6%; }
.article-index .blog-card-link:is(:hover, :focus-visible) .blog-card-art--graphic .article-art { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
  .tiled-index .blog-card-art--graphic .article-art { transition: none; }
  .article-index .blog-card-link:is(:hover, :focus-visible) .blog-card-art--graphic .article-art { transform: none; }
}

/* On the research and blog indexes a tile's graphic builds itself when its card is hovered or
   focused, and rests on the finished drawing otherwise, so touch screens, reduced motion and the
   sharing images show the still. Each mark that moves names its kind of step as a class (aa-a-draw,
   -pop, -in, -nope, -pulse, -tint, -settle, -climb, -run) and carries its start, length and easing
   as --t, --d and --e, set by scripts/build_article_art.py. Each step plays once: its first frame
   holds until it starts, and its last frame is the finished drawing, apart from the dot's colours
   (tint and settle), which hold until the hover ends. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .article-index .blog-card-link:is(:hover, :focus-visible) .article-art .aa-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;
  }
  .article-index .blog-card-link:is(:hover, :focus-visible) .article-art .aa-a-draw { animation-name: aa-draw; stroke-dasharray: 1; }
  .article-index .blog-card-link:is(:hover, :focus-visible) .article-art .aa-a-pop { animation-name: aa-pop; animation-timing-function: var(--e, ease-out); }
  .article-index .blog-card-link:is(:hover, :focus-visible) .article-art .aa-a-in { animation-name: aa-in; }
  .article-index .blog-card-link:is(:hover, :focus-visible) .article-art .aa-a-nope { animation-name: aa-nope; }
  .article-index .blog-card-link:is(:hover, :focus-visible) .article-art .aa-a-pulse { animation-name: aa-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. */
  .article-index .blog-card-link:is(:hover, :focus-visible) .article-art .aa-a-tint { animation-name: aa-tint, aa-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; }
  .article-index .blog-card-link:is(:hover, :focus-visible) .article-art .aa-a-settle { animation-name: aa-tint; animation-timing-function: ease-in-out; }
  .article-index .blog-card-link:is(:hover, :focus-visible) .article-art .aa-a-climb { animation-name: aa-climb; }
  /* 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. */
  .article-index .blog-card-link:is(:hover, :focus-visible) .article-art .aa-a-run { animation-name: aa-run; stroke-dasharray: var(--dash) 2; }
}
@keyframes aa-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aa-pop { 0% { transform: scale(0); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes aa-in { from { opacity: 0; } }
@keyframes aa-nope {
  0% { transform: translateX(0) scale(0); }
  22% { transform: translateX(0) scale(1.3); }
  34% { transform: translateX(0) scale(1); }
  46% { transform: translateX(-4px) scale(1); }
  58% { transform: translateX(4px) scale(1); }
  70% { transform: translateX(-3px) scale(1); }
  82% { transform: translateX(3px) scale(1); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes aa-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.7); } }
@keyframes aa-tint { from { opacity: 0; } to { opacity: 1; } }
@keyframes aa-beat { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.45); } }
/* The head waits unseen under the dot, and shows only once it sets off. */
@keyframes aa-climb { 0% { opacity: 0; transform: translateY(0); } 4%, 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--dy, 0px)); } }
@keyframes aa-run { 0% { opacity: 0; stroke-dashoffset: 0; } 6%, 94% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }

/* Sharing images are seen small, so their lines are drawn a little heavier. */
.article-art--share .aa-tw--1 { stroke-width: 1.6; }
.article-art--share .aa-tw--2 { stroke-width: 1.35; }
.article-art--share .aa-tw--3 { stroke-width: 1.1; }
.article-art--share .aa-tw--4 { stroke-width: .9; }
.article-art--share :is(.aa-line, .aa-flow) { stroke-width: 1.4; }
.article-art--share .aa-sel { stroke-width: 3; }
.article-art--share .aa-mem { stroke-width: 2.8; }
.article-art--share .aa-recall { stroke-width: 3; }