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

:root {
  --sig:      #1d4ea8;
  --sig-text: #1a4798;

  /* the meter: bars of four, blue on the downbeat; ruled ledger paper; fine drawing */
  --rule-every: 4; --rule-on: 3; --rule-rate: .34;
  --hatch-rate: .31; --hatch-w: 1.5;
  --f-stroke: 1.2;
  --paper-tooth: repeating-linear-gradient(0deg, rgba(21,18,12,.028) 0 1px, transparent 1px 9px);
}

/* --stop is the stop the chapter 2 and 3 sliders stand on, --thr chapter 6's
   minimum score, --pulse chapter 5's clock; each is written on its figure's host */
@property --stop  { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --thr   { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --pulse { syntax: "<number>"; inherits: true; initial-value: 0; }

.stage-inner { transition: --stop var(--dur-base) var(--ease-out); }

/* --n is the stop a mark belongs to, --span the last stop on that figure's rail */
.at-stop { opacity: calc(clamp(0, var(--stop) - var(--n) + 1, 1)
                       * clamp(0, var(--n) + 1 - var(--stop), 1)); }
.before-stop { opacity: clamp(0, var(--n) - var(--stop), 1); }
/* ink inside a text run: a tspan takes fill-opacity where a group takes opacity */
.ink-fill { fill-opacity: var(--e); }
.stop-ride { offset-distance: calc(var(--stop) / var(--span) * 100%);
             offset-rotate: 0deg; }
.stop-bar { transform-box: fill-box; transform-origin: 50% 100%;
            transform: scaleY(var(--h, 1)); }

/* a row carries its own score as --sc and the rule's window as --lo/--hi:
   the cheapest row that still clears the bar is the one that lights */
.thr-line { transform: translateX(calc(var(--thr) * var(--sw, 0px))); }
.under-bar { opacity: calc(.3 + .7 * clamp(0, (var(--sc) - var(--thr)) * 400 + 1, 1)); }
.lit { opacity: calc(clamp(0, (var(--thr) - var(--lo)) * 400, 1)
                   * clamp(0, (var(--hi) - var(--thr)) * 400 + 1, 1)); }
.none-clear { opacity: clamp(0, (var(--thr) - .9) * 400, 1); }
.pulse-ride { offset-distance: calc(var(--pulse) * 100%); offset-rotate: 0deg; }

.ctrl { margin: 0 0 12px; }
.ctrl-label { display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .04em;
  color: var(--ink-2); margin-bottom: 8px; }
.ctrl-value { font-size: 22px; letter-spacing: 0; color: var(--ink); }
/* the rotated thumb overhangs the track, so inset the control */
input[type=range] { -webkit-appearance: none; appearance: none;
  width: calc(100% - 10px); margin: 0 5px;
  height: 22px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--ink); border: 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -7px; background: var(--sig);
  border: 2px solid var(--ink); border-radius: 0; transform: rotate(45deg); }
input[type=range]::-moz-range-track { height: 2px; background: var(--ink); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; background: var(--sig);
  border: 2px solid var(--ink); border-radius: 0; }

/* the graph in chapters 1, 3 and 4: parts, requirements, connections */
.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; }
/* the bars in chapters 2 and 6: the score in the plate's own hatch, the tokens
   on the second paper under a dashed edge, so neither bar is ever an empty box */
.f-bar      { stroke: var(--ink); stroke-width: 1.2; }
.f-bar-cost { fill: var(--paper-2); stroke: var(--ink-2); stroke-width: 1.4;
              stroke-dasharray: 3 3; }
/* a frozen card: a result recorded elsewhere, quoted here whole */
.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-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 {
  .fig-controls { display: none; }
  #mount-2 { --stop: 2 !important; } #mount-3 { --stop: 3 !important; } #mount-6 { --thr: .4 !important; }
}