/* The unit headers of a book's contents page, the same in every book: a strip of chalkboard per unit, with the unit's
   label and title and a sketch of its ideas (UNIT_ART, from the book's own unit-art.js) drawn in the unit colour --c.
   Markup and the scroll observer are in units.js. Uses the contents page's --book, --ui, --chalk and --ease. */
.unit { position: relative; max-width: 1212px; margin: 0 auto; padding: 28px 16px 0; }
.unit h2 { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-height: 168px; margin: 0 0 16px; padding-top: 130px; font: 500 28px/1.2 var(--book); }
.unit .grid { position: relative; }
.unit::before { content: ""; position: absolute; inset: 0 16px auto; height: 208px; border-radius: 22px; pointer-events: none;
  background: radial-gradient(ellipse 46% 90% at 74% 55%, color-mix(in srgb, var(--c) 11%, transparent), transparent 70%); }
.unit-art { position: absolute; top: 20px; right: 28px; width: min(580px, 56%); height: auto; overflow: visible; pointer-events: none;
  color: var(--c); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .78; }
.unit-art text { fill: currentColor; stroke: none; font-family: var(--book); font-style: italic; }
.unit-art .a { color: var(--chalk); opacity: .55; }
.unit-art .faint { opacity: .22; }
.unit-art .d { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.unit-art .t { opacity: 0; }
.seen .unit-art .d { animation: art-draw 1.1s cubic-bezier(.5, 0, .3, 1) forwards; animation-delay: calc(var(--k) * 55ms + 120ms); }
.seen .unit-art .t { animation: art-fade .6s ease-out forwards; animation-delay: calc(var(--k) * 55ms + 300ms); }
.seen .unit-art .a.t { animation-name: art-fade-a; }
@keyframes art-draw { to { stroke-dashoffset: 0; } }
@keyframes art-fade { to { opacity: 1; } }
@keyframes art-fade-a { to { opacity: .55; } }
/* After the drawing, each sketch keeps one small motion that belongs to its topic. */
.unit-art g { transform-box: fill-box; }
.seen .unit-art .swap-a { animation: swap-a 6s var(--ease) 2.4s infinite; }
.seen .unit-art .swap-b { animation: swap-b 6s var(--ease) 2.4s infinite; }
@keyframes swap-a { 0%, 30%, 100% { transform: none; } 45%, 80% { transform: translate(80px, 0); } 37% { transform: translate(40px, -30px); } 88% { transform: translate(40px, 30px); } }
@keyframes swap-b { 0%, 30%, 100% { transform: none; } 45%, 80% { transform: translate(-80px, 0); } 37% { transform: translate(-40px, 30px); } 88% { transform: translate(-40px, -30px); } }
.seen .unit-art .step { animation: art-fade .6s ease-out forwards, step 4s ease-in-out infinite; animation-delay: calc(var(--k) * 55ms + 300ms), calc(var(--k) * 300ms + 2s); }
@keyframes step { 0%, 20%, 100% { fill-opacity: 1; } 10% { fill-opacity: .3; } }
.unit-art .hop, .unit-art .ride { offset-rotate: 0deg; }
.seen .unit-art .hop { animation: art-fade .4s ease-out 2s forwards, along 3.4s linear 2s infinite; }
.unit-art .orbit { offset-rotate: 0deg; }
.seen .unit-art .orbit { animation: art-fade .4s ease-out 2s forwards, along 9s linear 2s infinite; }
.seen .unit-art .ride { animation: art-fade .4s ease-out 2s forwards, along 4s ease-in-out 2s infinite alternate; }
@keyframes along { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.unit-art .pie { stroke: currentColor; stroke-linecap: butt; stroke-dasharray: 0 100; }
.seen .unit-art .pie { animation: art-fade .4s ease-out 1.6s forwards, pie 5s var(--ease) 1.6s infinite; }
@keyframes pie { 0% { stroke-dasharray: 0 100; } 35%, 85% { stroke-dasharray: 25 100; } 100% { stroke-dasharray: 0 100; } }
.seen .unit-art .tilt { transform-box: view-box; transform-origin: 300px 72px; animation: tilt 4.8s ease-in-out 2s infinite; }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 60% { transform: rotate(2deg); } }
.seen .unit-art .spin { transform-box: view-box; transform-origin: 320px 95px; animation: spin 5s cubic-bezier(.2, .7, .2, 1) 2s infinite; }
@keyframes spin { from { transform: rotate(0); } 70%, to { transform: rotate(1530deg); } }
.seen .unit-art .feed-in { animation: feed-in 4s ease-in-out 2s infinite; }
.seen .unit-art .feed-out { opacity: 0; animation: feed-out 4s ease-in-out 2s infinite; }
@keyframes feed-in { 0% { transform: none; opacity: 1; } 40% { transform: translate(100px, 0); opacity: 0; } 41%, 100% { transform: none; opacity: 0; } 95% { opacity: 1; } }
@keyframes feed-out { 0%, 45% { transform: translate(-40px, 0); opacity: 0; } 70%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.unit-art .cell { opacity: .25; }
.seen .unit-art .cell { animation: cell 5s ease-in-out infinite; animation-delay: calc(var(--j) * .5s + 2s); }
@keyframes cell { 0%, 100% { opacity: .25; } 15%, 60% { opacity: 1; } }
.unit-art .cut, .unit-art .shade { opacity: 0; }
.seen .unit-art .cut { animation: cut 4s ease-in-out 2s infinite; }
@keyframes cut { 0%, 100% { opacity: 0; } 30%, 70% { opacity: .5; } }
.seen .unit-art .shade { animation: shade 1s ease-out 1.6s forwards; }
@keyframes shade { to { opacity: .14; } }
.seen .unit-art .diag { animation: art-draw 1.1s cubic-bezier(.5, 0, .3, 1) forwards, redraw 4s ease-in-out 2.5s infinite; }
@keyframes redraw { 0%, 15% { stroke-dashoffset: 1; } 50%, 100% { stroke-dashoffset: 0; } }
.seen .unit-art .root { animation: art-fade .4s ease-out 1.8s forwards, root 2.4s ease-in-out 2.2s infinite; }
@keyframes root { 0%, 100% { r: 7px; } 50% { r: 11px; } }
.seen .unit-art .breathe { transform-box: view-box; transform-origin: 380px 140px; animation: breathe 4s ease-in-out 2s infinite alternate; }
@keyframes breathe { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
/* The label and the title share a line when they fit; a long title wraps below the label instead of running off. */
.unit h2 .title { min-width: 0; text-wrap: balance; }
.unit h2 .label { font: 600 14px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--c); white-space: nowrap; }
/* Keep the sketches cheap: each is its own layer, so its loop repaints only itself, and loops pause while their unit is
   off screen or under the sticky bar (units.js toggles .live), so the bar's blur is not redrawn every frame. */
.unit-art { will-change: transform; contain: layout style; }
.unit:not(.live) .unit-art, .unit:not(.live) .unit-art * { animation-play-state: paused; }
@media (max-width: 560px) {
  .unit-art { width: calc(100% - 32px); right: 16px; opacity: .32; }
  .unit h2 { min-height: 0; padding-top: 104px; font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .unit-art * { animation: none !important; }
  .unit-art .d { stroke-dashoffset: 0; }
  .unit-art .t, .unit-art .cell { opacity: 1; }
  .unit-art .a.t { opacity: .55; }
  .unit-art .shade { opacity: .14; }
  .unit-art .pie { stroke-dasharray: 25 100; }
}