/* Cameras page figures. CSS-only; assets/js/figures.js adds .play on scroll
   into view, or .still under reduced motion (finished frame, nothing moves).
   The card shell, .cpin and heading marks come from figures.css. */

/* ------------------------------------------------------------ 1. workflow */

.fig-flow .stage { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start; gap: 0; padding: 26px 22px 22px; }
.fig-flow .step { text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; transition-delay: var(--d); }
.fig-flow.play .step, .fig-flow.still .step { opacity: 1; transform: none; }
.fig-flow .ico { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 18px; background: #f3f4f7; display: flex; align-items: center; justify-content: center; }
.fig-flow .ico svg { width: 38px; height: 38px; }
.fig-flow .k { font-size: 13.5px; font-weight: 750; color: var(--ink); letter-spacing: -.2px; }
.fig-flow .e { font-size: 11.5px; color: var(--sub); margin-top: 2px; line-height: 1.3; }
.fig-flow .join { width: 34px; height: 2px; margin: 31px 4px 0; background: rgba(0, 0, 0, .12); transform-origin: left center; transform: scaleX(0); transition: transform .45s ease-out; transition-delay: var(--d); position: relative; }
.fig-flow .join::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: rgba(0, 0, 0, .18); border-right: 0; }
.fig-flow.play .join, .fig-flow.still .join { transform: scaleX(1); }
@media (max-width: 640px) {
  .fig-flow .stage { grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 20px 14px; }
  .fig-flow .join { display: none; }
}

/* ------------------------------------------------------------ 2. the clock */

.fig-clock .stage { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 260px; }
.fig-clock .map { position: relative; overflow: hidden; background: #f6f3ec; }
.fig-clock .map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fig-clock .anc { --ring: var(--certain); }
/* the camera pins start dragged down the street by the wrong clock; the
   correction slides them back along the track and turns them green */
.fig-clock .cam { --ring: var(--likely); z-index: 5; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); }
.fig-clock.play .cam { animation: cam-fix 9s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes cam-fix {
  0%, 44%   { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); box-shadow: 0 0 0 2.5px var(--likely), 0 3px 9px rgba(0,0,0,.3); }
  60%       { transform: translate(-50%, -50%); box-shadow: 0 0 0 2.5px var(--likely), 0 3px 9px rgba(0,0,0,.3); }
  66%, 88%  { transform: translate(-50%, -50%); box-shadow: 0 0 0 2.5px var(--certain), 0 3px 9px rgba(0,0,0,.3); }
  96%, 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); box-shadow: 0 0 0 2.5px var(--likely), 0 3px 9px rgba(0,0,0,.3); }
}
.fig-clock.still .cam { transform: translate(-50%, -50%); --ring: var(--certain); }
/* the ghost where each pin *should* be, visible while the pin is wrong */
.fig-clock .ghost { position: absolute; z-index: 3; width: 28px; height: 28px; border-radius: 50%; border: 2px dashed rgba(47, 209, 90, .8); transform: translate(-50%, -50%); }
.fig-clock.play .ghost { animation: ghost 9s ease infinite; }
@keyframes ghost { 0%, 56% { opacity: 1; } 64%, 90% { opacity: 0; } 98%, 100% { opacity: 1; } }
.fig-clock.still .ghost { opacity: 0; }
.fig-clock .off {
  position: absolute; left: 10px; top: 10px; z-index: 6;
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 9px; color: #fff; background: #c98508;
}
.fig-clock .off.ok { background: #1f9e44; opacity: 0; }
.fig-clock.play .off.wrong { animation: tag-wrong 9s ease infinite; }
.fig-clock.play .off.ok { animation: tag-ok 9s ease infinite; }
@keyframes tag-wrong { 0%, 56% { opacity: 1; } 62%, 92% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes tag-ok { 0%, 62% { opacity: 0; } 68%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
.fig-clock.still .off.wrong { display: none; }
.fig-clock.still .off.ok { opacity: 1; }

/* right: the offset slider and the alignment histogram behind it */
.fig-clock .panel { padding: 18px 20px 16px; border-left: 1px solid rgba(0, 0, 0, .06); display: flex; flex-direction: column; gap: 14px; }
.fig-clock .ph { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--sub); }
.fig-clock .hist { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.fig-clock .hist i { flex: 1; background: #e6e8ec; border-radius: 3px 3px 0 0; height: var(--h); transition: background .3s ease; }
.fig-clock .hist i.peak { background: rgba(255, 176, 32, .55); }
.fig-clock.play .hist i.peak { animation: peak 9s ease infinite; }
@keyframes peak { 0%, 40% { background: rgba(255, 176, 32, .55); } 46%, 88% { background: var(--certain); } 94%, 100% { background: rgba(255, 176, 32, .55); } }
.fig-clock.still .hist i.peak { background: var(--certain); }
.fig-clock .slider { position: relative; height: 34px; margin-top: 4px; }
.fig-clock .slider .rail { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 2px; background: #e6e8ec; }
.fig-clock .slider .rail::after { content: ''; position: absolute; left: 50%; top: -3px; width: 2px; height: 10px; background: #c2c7ce; }
.fig-clock .slider .lbl { position: absolute; top: 24px; font-size: 10px; font-weight: 700; color: var(--sub); transform: translateX(-50%); white-space: nowrap; }
.fig-clock .slider .thumb {
  position: absolute; top: 5px; left: 50%; width: 24px; height: 24px; border-radius: 50%; margin-left: -12px;
  background: #fff; border: 2px solid var(--likely); box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}
.fig-clock.play .slider .thumb { animation: thumb 9s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes thumb {
  0%, 20%   { left: 50%; border-color: var(--likely); }
  40%       { left: var(--to); border-color: var(--likely); }
  44%       { left: calc(var(--to) + 1.5%); }
  46%, 88%  { left: var(--to); border-color: var(--certain); }
  96%, 100% { left: 50%; border-color: var(--likely); }
}
.fig-clock.still .slider .thumb { left: var(--to); border-color: var(--certain); }
.fig-clock .val { display: flex; align-items: baseline; gap: 8px; }
.fig-clock .val .num { font-size: 26px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; position: relative; min-width: 84px; height: 30px; }
.fig-clock .val .num span { position: absolute; left: 0; top: 0; }
.fig-clock .val .num .a { color: #c98508; }
.fig-clock .val .num .b { color: #1f9e44; opacity: 0; }
.fig-clock.play .val .num .a { animation: tag-wrong 9s ease infinite; }
.fig-clock.play .val .num .b { animation: tag-ok 9s ease infinite; }
.fig-clock.still .val .num .a { display: none; }
.fig-clock.still .val .num .b { opacity: 1; }
.fig-clock .val .note { font-size: 11.5px; color: var(--sub); }
.fig-clock .btn { align-self: flex-start; font-size: 12.5px; font-weight: 750; padding: 8px 14px; border-radius: 11px; background: var(--pill); color: #fff; }
@media (max-width: 640px) {
  .fig-clock .stage { grid-template-columns: 1fr; }
  .fig-clock .map { height: 210px; }
  .fig-clock .panel { border-left: 0; border-top: 1px solid rgba(0, 0, 0, .06); }
}

/* ------------------------------------------------------------ 3. one offset per camera */

.fig-offsets .stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px; }
.fig-offsets .cam { border-radius: 14px; background: #f7f7f9; border: 1px solid rgba(0, 0, 0, .05); padding: 14px 14px 12px; display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; }
.fig-offsets .clock { position: relative; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 2px solid rgba(0, 0, 0, .1); box-shadow: inset 0 0 0 4px #fff; }
.fig-offsets .clock::before { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); z-index: 2; }
.fig-offsets .clock i { position: absolute; left: 50%; bottom: 50%; width: 2.5px; border-radius: 2px; transform-origin: bottom center; background: var(--ink); }
.fig-offsets .clock .h { height: 14px; margin-left: -1.25px; transform: rotate(var(--h0)); }
.fig-offsets .clock .m { height: 20px; margin-left: -1.25px; width: 2px; transform: rotate(var(--m0)); }
/* the ghost hands: where the true time is */
.fig-offsets .clock .h.t, .fig-offsets .clock .m.t { background: rgba(31, 158, 68, .55); }
.fig-offsets .clock .h.t { transform: rotate(var(--h1)); }
.fig-offsets .clock .m.t { transform: rotate(var(--m1)); }
.fig-offsets .clock .h.w, .fig-offsets .clock .m.w { transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); transition-delay: var(--d); }
.fig-offsets.play .clock .h.w, .fig-offsets.still .clock .h.w { transform: rotate(var(--h1)); }
.fig-offsets.play .clock .m.w, .fig-offsets.still .clock .m.w { transform: rotate(var(--m1)); }
.fig-offsets .n { font-size: 13px; font-weight: 750; letter-spacing: -.2px; }
.fig-offsets .f { font-size: 11px; color: var(--sub); font-family: ui-monospace, "SF Mono", Menlo, monospace; margin-top: 1px; }
.fig-offsets .chip { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 8px; color: #fff; background: var(--pill); font-variant-numeric: tabular-nums; }
.fig-offsets .chip.zero { background: #1f9e44; }
@media (max-width: 640px) { .fig-offsets .stage { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ 4. GPX */

.fig-gpx .stage { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 22px; padding: 22px 26px; }
.fig-gpx .file { position: relative; height: 130px; border-radius: 14px; background: #f7f7f9; border: 1px solid rgba(0, 0, 0, .06); overflow: hidden; }
.fig-gpx .file svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fig-gpx .file .trk { stroke-dasharray: 260; stroke-dashoffset: 260; }
.fig-gpx.play .file .trk { animation: trk 1.6s ease-out .3s 1 forwards; }
.fig-gpx.still .file .trk { stroke-dashoffset: 0; }
@keyframes trk { to { stroke-dashoffset: 0; } }
.fig-gpx .file .name { position: absolute; left: 10px; bottom: 8px; font-size: 11px; font-weight: 800; font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); background: rgba(255,255,255,.9); padding: 3px 8px; border-radius: 7px; }
.fig-gpx .to { display: flex; flex-direction: column; gap: 10px; }
.fig-gpx .to .row { display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateX(-8px); transition: opacity .4s ease, transform .4s ease; transition-delay: var(--d); }
.fig-gpx.play .to .row, .fig-gpx.still .to .row { opacity: 1; transform: none; }
.fig-gpx .to .arr { width: 28px; height: 2px; background: rgba(0, 0, 0, .14); position: relative; }
.fig-gpx .to .arr::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: rgba(0, 0, 0, .22); border-right: 0; }
.fig-gpx .to .app { font-size: 13px; font-weight: 750; padding: 7px 12px; border-radius: 10px; background: #f3f4f7; border: 1px solid rgba(0, 0, 0, .05); }
.fig-gpx .to .app small { display: block; font-size: 10.5px; color: var(--sub); font-weight: 600; }
.fig-gpx .lock { font-size: 11.5px; color: var(--sub); margin-top: 4px; }
.fig-gpx .lock b { color: #1f9e44; }
@media (max-width: 560px) { .fig-gpx .stage { grid-template-columns: 1fr; } }