@import "./dunn.dev/reference/tokens/motion.css";

:root {
  /* talk 03: burnt ochre. --sig-text is the darkened cut for words (7.1:1 on paper); --sig stays for rules, hatching and lamps (4.6:1) */
  --sig:      #8a4b12;
  --sig-text: #733e0f;

  /* the tally: five strokes, ochre on the gate; laid paper; woodcut weight */
  --rule-every: 5; --rule-on: 4; --rule-rate: .13;
  --hatch-rate: .15; --hatch-w: 2.5;
  --f-stroke: 2;
  --paper-tooth:
    repeating-linear-gradient(90deg, rgba(21,18,12,.034) 0 1px, transparent 1px 23px),
    repeating-linear-gradient(0deg, rgba(21,18,12,.012) 0 1px, transparent 1px 3px);
}

/* --shape, --probe and --gate are the reader's hand, written on that figure's own host */
@property --shape { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --probe { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --gate  { syntax: "<number>"; inherits: true;  initial-value: 1; }

.ink-recede { transform-box: fill-box; transform-origin: 50% 50%;
  transform: translate(calc(var(--e) * var(--dx, 0px)), calc(var(--e) * var(--dy, 0px)))
             scale(calc(1 - .85 * var(--e)));
  opacity: calc(1 - 1.6 * var(--e)); }
.ink-land  { transform-box: fill-box; transform-origin: 100% 50%;
  transform: scale(calc(1 + .12 * (1 - var(--e)))); opacity: var(--e); }

.at-shape { opacity: calc(clamp(0, var(--shape) - var(--n) + 1, 1)
                        * clamp(0, var(--n) + 1 - var(--shape), 1)); }
.shape-ride { offset-distance: calc(var(--shape) * 100%); offset-rotate: 0deg; }
.at-any { opacity: clamp(0, var(--shape) + 1, 1); }
/* a bar whose height is read off the position the toggle stands on */
.shape-bar { transform-box: fill-box; transform-origin: 50% 100%;
             transform: scaleY(var(--h, 1)); }

/* chapter 4: --probe is which retrieval probe is on (0 for none), carried by marks in --n; the fade is on opacity because an eased index would sweep through the probes between */
.at-probe { opacity: calc(clamp(0, var(--probe) - var(--n) + 1, 1)
                        * clamp(0, var(--n) + 1 - var(--probe), 1));
            transition: opacity var(--dur-slow) var(--ease-out); }
@keyframes probe-jiggle {
  0%   { transform: translateX(0); }
  22%  { transform: translateX(7px); }
  48%  { transform: translateX(-5px); }
  74%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
.jiggle { animation: probe-jiggle .62s cubic-bezier(.3,.8,.4,1) both; }

/* chapter 7: --gate is 0 for the agent alone, 1 with the gate. A readout belonging to one position carries it in --n; the arms give way rather than swap. The walk under the gate is drawn in the dim ink --ink-2, not faded: a mark in the dim ink is a finished mark. Nested inside the scroll's marks so the two drivers compose. */
.at-gate   { opacity: calc(clamp(0, var(--gate) - var(--n) + 1, 1)
                         * clamp(0, var(--n) + 1 - var(--gate), 1)); }
.gate-arm  { opacity: var(--gate); }
.gate-walk .f-vertex-hot { stroke: color-mix(in srgb, var(--sig), var(--ink-2) calc(var(--gate) * 100%)); }
.gate-walk .f-mark { fill: color-mix(in srgb, var(--sig), var(--paper-2) calc(var(--gate) * 100%));
                     stroke: color-mix(in srgb, var(--ink), var(--ink-2) calc(var(--gate) * 100%)); }

/* ── engraving: this talk's marks beyond the chrome's ── */

.f-file     { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.2; }
.f-stamp    { fill: none; stroke: var(--sig); stroke-width: 1.4; }
.f-bucket   { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.f-tally    { stroke: var(--ink-2); stroke-width: 1.2; }
.f-tally-sig{ stroke: var(--sig); stroke-width: 1.4; }
.f-stage    { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.f-stage-lit{ fill: var(--paper-2); stroke: var(--sig); stroke-width: 2.2; }
.f-needle   { fill: var(--sig); stroke: var(--ink); stroke-width: 1.4; }
.f-rail     { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.f-mark     { fill: var(--sig); stroke: var(--ink); stroke-width: 1.6; }
.f-edge     { stroke: var(--ink-2); stroke-width: 1.4; fill: none; }
.f-edge-lit { stroke: var(--sig); stroke-width: 2.2; fill: none; }
.f-vertex   { fill: var(--paper); stroke: var(--ink); stroke-width: 1.8; }
.f-vertex-lit { fill: var(--paper); stroke: var(--sig); stroke-width: 2.4; }
/* relighting a box already on the plate: stroke only, so the word under it
   is never covered by a second fill */
.f-vertex-hot { fill: none; stroke: var(--sig); stroke-width: 2.4; }
.f-bar      { stroke: var(--ink); stroke-width: 1.2; }
.f-bar-sig  { fill: var(--sig); stroke: var(--sig); stroke-width: 1.2; }
.f-bar-cost { fill: none; stroke: var(--ink-2); stroke-width: 1.4;
              stroke-dasharray: 3 3; }
.f-card     { fill: var(--paper-2); stroke: var(--ink); stroke-width: 2; }
.f-rung     { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.4; }
.f-rung-lit { fill: var(--paper-2); stroke: var(--sig); stroke-width: 2.2; }
/* the lesson's hit and miss rings: a value the prompt held is ringed solid in the signal ink, one it did not hold dashed */
.f-hit      { fill: none; stroke: var(--sig); stroke-width: 1.6; }
.f-miss     { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-dasharray: 2 2; }
.f-thr      { stroke: var(--sig); stroke-width: 2.4; stroke-dasharray: 6 5; fill: none; }
.f-read     { font-family: var(--mono); font-size: 30px; letter-spacing: .01em;
              fill: var(--ink); }

@media print, (prefers-reduced-motion: reduce), (max-width: 860px) {
  body { --shape: 1; --probe: 0; --gate: 1; }
  [id^="mount-"] { transition: none !important; }
}
@media print {
  #mount-3 { --shape: 1 !important; } #mount-4 { --probe: 0 !important; } #mount-7 { --gate: 1 !important; }
}

/* the reader's hand: chapter 3's needle travels rather than jumps and
   chapter 7's arms give way, on the registered property itself, so the one
   declaration in .shape-ride still describes where the needle is */
#mount-3 { transition: --shape var(--dur-base) var(--ease-out); }
#mount-7 { transition: --gate var(--dur-base) var(--ease-out); }

/* the cover's lesson link: the page's ink, and free to break on a phone */
.course a, .out-note a { color: inherit; overflow-wrap: anywhere; }