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

:root {
  --sig:      #c0331d;
  --sig-text: #8f2313;
  /* the plan: a weekly rule, red on the Sunday, on graph paper; the chrome's defaults are this talk's */
  --course-max: 72ch;
}

@property --wk    { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --gate  { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --tweak { syntax: "<number>"; inherits: true; initial-value: 0; }

/* --wk is chapter 1's week, 1 to 6; --gate and --tweak are chapter 6's */
.wk { --t: clamp(0, (var(--wk) - var(--a)) * var(--r), 1);
      --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
      --el: var(--e); }
.on-tweak   { opacity: var(--tweak); }
.on-approve { opacity: calc(1 - var(--tweak)); }
/* the marker rides the lane only as far as the open gates: 0.49 is the first gate, 0.94 the second */
.gate-ride { offset-distance:
    calc(clamp(0, min(var(--e), 0.49 + var(--gate) * 0.45), 1) * 100%);
  offset-rotate: 0deg; }
.gate-open-1 { opacity: clamp(0, var(--gate), 1); }
.gate-open-2 { opacity: clamp(0, var(--gate) - 1, 1); }
.gate-shut-1 { opacity: calc(1 - clamp(0, var(--gate), 1)); }
.gate-shut-2 { opacity: calc(1 - clamp(0, var(--gate) - 1, 1)); }
.stage-inner { transition: --wk var(--dur-base) var(--ease-out), --tweak var(--dur-base) var(--ease-out); }
html { transition: --gate var(--dur-base) var(--ease-out); }

.out-ask a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--sig); }

.ctrl { margin: 0 0 26px; }
.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; }

.fig-gate { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--sig-text); min-width: 6ch; }

.f-hatch    { fill: url(#hatch); }
.f-strike   { stroke: var(--sig); stroke-width: 1.6; }
.f-wrong    { stroke: var(--sig); stroke-width: 2; fill: none; }
.f-right    { stroke: var(--ink); stroke-width: 2; fill: none; }
.f-gate     { stroke: var(--sig); stroke-width: 2.4; fill: none; }

@media print, (prefers-reduced-motion: reduce), (max-width: 860px) {
  html, .stage-inner { transition: none !important; }
  body { --wk: 6; --gate: 2; --tweak: 0; }
}
@media print {
  .ctrl { display: none; }
  html { --gate: 2 !important; }
  .stage-inner { --wk: 6 !important; --tweak: 0 !important; }
}