/* Builder T: act 3, two clocks. A purely visual comparison of payout time.
   Left (the past, bank-hours era, engraving linework): the payment is posted
   through a teller's cage into a vault door with a hand-wheel, a wall calendar
   crosses off blank days and tears pages away, a brass hourglass runs, a slice
   drops into a strongbox under a padlock. Right (the future): the payment
   converts, climbs the confirmation blocks and lands in the wallet early with
   light-trail ticks lit behind it, then rests.
   js/tension.js writes the --tn-* values from scroll. Every fallback below is
   the END state, so no-JS and reduced motion read the outcome. Left colours
   come only from the --sc-* tokens so variant B re-themes it. */

/* ------------------------------------------------------------ layout -- */
.tn .side { min-width: 0; }
.tn-h { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 3rem); line-height: 1.04; }
.tn-small {
  margin: 0.65rem 0 0; max-width: 34rem;
  font-size: var(--sc-t-sm); line-height: 1.45; color: var(--sc-ink-soft);
}
.tn-foot .tn-small { margin-top: 0; }
.tn-fig { margin: 0; width: 100%; max-width: 36rem; color: var(--sc-ink); }
.tn-svg { display: block; width: 100%; height: auto; overflow: visible; }

@media (min-width: 760px) {
  /* Three shared rows (head, drawing, foot) so both drawings sit on the
     same line and the two clocks read as one time axis. */
  .tn .split { grid-template-rows: auto auto auto; }
  .tn .side {
    display: grid;
    grid-row: 1 / span 3;
    grid-template-rows: subgrid;
    row-gap: clamp(1.75rem, 3.2vw, 3rem);
    align-content: start;
  }
  /* The divider winds up to 2.5vw either side of 50%: stay 6.5vw clear. */
  .tn .side--card { padding-right: 6.5vw; }
  .tn .side--vp { padding-left: 6.5vw; }
  .tn .side--card .tn-fig { justify-self: end; }
}
@media (max-width: 759.98px) {
  .tn-fig { margin-top: 1.5rem; max-width: 30rem; }
  .tn-foot .tn-small { margin-top: 1.25rem; }
  .tn-foot:empty { display: none; }
}

/* ------------------------------------------------------ drawing kit -- */
.tn-ln {
  fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.tn-ln--soft { stroke: var(--sc-ink-soft); }
.tn-ln--accent { stroke: var(--sc-accent); }
.tn-ln--dash { stroke-dasharray: 3 5; }
.tn-solid { fill: var(--sc-canvas); }
.tn-solid--none { fill: none; }
.tn-grid__ln { fill: none; stroke: var(--sc-hairline); stroke-width: 0.6; }
.tn-hatch__ln { fill: none; stroke: var(--sc-hairline-strong); stroke-width: 0.8; }

/* Era kit. Past: heavier ink, square caps, cross-hatched shadows (own
   fallback for the shared .ln--ink). Future: thin precise strokes, round caps. */
.tn-fig--card .tn-ln { stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
.tn-fig--card .tn-ln--soft { stroke-width: 1.1; }
.tn-fig--card .tn-ln--dash { stroke-dasharray: 2 4; stroke-linecap: butt; }
.tn-fig--card .tn-hatch__ln { stroke: var(--sc-ink); }
.tn-fig--card .tn-hatch { opacity: 0.38; }
.tn-fig--card .tn-steel { opacity: 0.55; }
.tn-shadow { fill: url(#tn-hatch-c); stroke: none; opacity: 0.6; }
.tn-rules { opacity: 0.5; }
/* small era flourish when the trail capsule is in the bank era (H sets it);
   the drawing is complete without it */
html[data-era="bank"] .tn-rules { opacity: 0.7; }
html[data-era="bank"] .tn-fig--card .tn-hatch { opacity: 0.46; }
.tn-rivets { fill: currentColor; }
.tn-slot { fill: var(--sc-canvas); }
.tn-fig--vp .tn-ln { stroke-width: 1; }
.tn-fig--vp .tn-ln--soft { stroke-width: 0.9; }
.tn-node--fill { fill: currentColor; }
.tn-node--accent { fill: var(--sc-accent); }
.tn-gap { fill: var(--sc-canvas); }
.tn-lbl {
  font-family: var(--sc-font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; fill: var(--sc-ink-soft);
}

/* planes: back grid and foreground callouts drift against each other */
.tn-back  { transform: translateY(calc(var(--tn-back, 0) * 1px)); }
.tn-front { transform: translateY(calc(var(--tn-front, 0) * 1px)); }

/* the payment token */
.tn-tok__fill { fill: var(--sc-accent); }
.tn-tok__ring { fill: none; stroke: var(--sc-canvas); stroke-width: 1.4; }

/* the shared time ruler */
.tn-bar { transform-box: fill-box; transform-origin: 0 50%; }
.tn-bar--wait { fill: color-mix(in oklab, var(--sc-ink-soft) 55%, transparent); transform: scaleX(var(--tn-wait, 1)); }
.tn-bar--done { fill: var(--sc-accent); transform: scaleX(var(--tn-done, 0.46)); }
.tn-cur { transform: translateX(calc(var(--tn-cur, 480) * 1px)); }
.tn-cur__head { fill: currentColor; }
.tn-arrive__dot { fill: var(--sc-accent); }
.tn-arrive__tick { fill: none; stroke: var(--sc-accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tn-arrive {
  transform-box: fill-box; transform-origin: 50% 50%;
  opacity: var(--tn-arrive, 1);
  transform: scale(calc(0.5 + var(--tn-arrive, 1) * 0.5));
}

/* --------------------------------------------------------- card side -- */
/* the vault's hand-wheel turns while the payment waits */
.tn-wheel { transform-box: view-box; transform-origin: 346px 248px; transform: rotate(calc(var(--tn-gear, 0) * 1deg)); }
/* the hourglass: top sand drains, bottom sand rises, a stream while it runs */
.tn-sand { fill: var(--sc-ink-soft); stroke: none; transform-box: fill-box; transform-origin: 50% 100%; }
.tn-sand--top { transform: scaleY(calc(1 - var(--tn-sand, 1))); }
.tn-sand--bot { transform: scaleY(var(--tn-sand, 1)); }
.tn-stream { opacity: clamp(0, calc(min(var(--tn-sand, 1), 1 - var(--tn-sand, 1)) * 10), 1); }

.tn-page { transform-box: fill-box; transform-origin: 50% 0; }
.tn-page__sheet { fill: var(--sc-surface); stroke: currentColor; stroke-width: 1.5; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.tn-c { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.tn-ring { fill: var(--sc-canvas); }
.tn-pile { fill: var(--sc-surface); stroke: var(--sc-ink-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }

.tn-page--0 { transform: scaleY(calc(1 - var(--tn-f0, 1))); opacity: calc(1 - var(--tn-f0, 1) * 0.5); }
.tn-page--1 { transform: scaleY(calc(1 - var(--tn-f1, 1))); opacity: calc(1 - var(--tn-f1, 1) * 0.5); }
.tn-page--2 { transform: scaleY(calc(1 - var(--tn-f2, 1))); opacity: calc(1 - var(--tn-f2, 1) * 0.5); }
.tn-page--3 { transform: scaleY(calc(1 - var(--tn-f3, 1))); opacity: calc(1 - var(--tn-f3, 1) * 0.5); }
.tn-page--4 { transform: scaleY(calc(1 - var(--tn-f4, 0))); opacity: calc(1 - var(--tn-f4, 0) * 0.5); }
/* days cross off one cell at a time */
.tn-c:nth-child(1) { --i: 1; }
.tn-c:nth-child(2) { --i: 2; }
.tn-c:nth-child(3) { --i: 3; }
.tn-c:nth-child(4) { --i: 4; }
.tn-c:nth-child(5) { --i: 5; }
.tn-c:nth-child(6) { --i: 6; }
.tn-c:nth-child(7) { --i: 7; }
.tn-c:nth-child(8) { --i: 8; }
.tn-c:nth-child(9) { --i: 9; }
.tn-c:nth-child(10) { --i: 10; }
.tn-c:nth-child(11) { --i: 11; }
.tn-c:nth-child(12) { --i: 12; }
.tn-c:nth-child(13) { --i: 13; }
.tn-c:nth-child(14) { --i: 14; }
.tn-c:nth-child(15) { --i: 15; }
.tn-c:nth-child(16) { --i: 16; }
.tn-c:nth-child(17) { --i: 17; }
.tn-c:nth-child(18) { --i: 18; }
.tn-c:nth-child(19) { --i: 19; }
.tn-c:nth-child(20) { --i: 20; }
.tn-c:nth-child(21) { --i: 21; }
.tn-c:nth-child(22) { --i: 22; }
.tn-c:nth-child(23) { --i: 23; }
.tn-c:nth-child(24) { --i: 24; }
.tn-c:nth-child(25) { --i: 25; }
.tn-c:nth-child(26) { --i: 26; }
.tn-c:nth-child(27) { --i: 27; }
.tn-c:nth-child(28) { --i: 28; }
.tn-page--0 .tn-c { opacity: clamp(0, calc(var(--tn-x0, 1) * 28 - var(--i) + 1), 1); }
.tn-page--1 .tn-c { opacity: clamp(0, calc(var(--tn-x1, 1) * 28 - var(--i) + 1), 1); }
.tn-page--2 .tn-c { opacity: clamp(0, calc(var(--tn-x2, 1) * 28 - var(--i) + 1), 1); }
.tn-page--3 .tn-c { opacity: clamp(0, calc(var(--tn-x3, 1) * 28 - var(--i) + 1), 1); }
.tn-page--4 .tn-c { opacity: clamp(0, calc(var(--tn-x4, 0.6) * 28 - var(--i) + 1), 1); }
.tn-pile--0 { opacity: var(--tn-f0, 1); transform: translateY(calc((1 - var(--tn-f0, 1)) * -16px)); }
.tn-pile--1 { opacity: var(--tn-f1, 1); transform: translateY(calc((1 - var(--tn-f1, 1)) * -16px)); }
.tn-pile--2 { opacity: var(--tn-f2, 1); transform: translateY(calc((1 - var(--tn-f2, 1)) * -16px)); }
.tn-pile--3 { opacity: var(--tn-f3, 1); transform: translateY(calc((1 - var(--tn-f3, 1)) * -16px)); }

.tn-door { opacity: var(--tn-door, 1); transform: translateY(calc((1 - var(--tn-door, 1)) * -10px)); }
.tn-strap { stroke-width: 2.2; }
.tn-lock__body { fill: currentColor; }
.tn-lock__shackle { stroke-width: 2.2; transform: translateY(calc((1 - var(--tn-lock, 1)) * -6px)); }

/* ------------------------------------------------------ VanPay side -- */
.tn-mark { fill: var(--sc-accent); }
.tn-mark--soft { opacity: 0.45; }
.tn-orbit {
  stroke-dasharray: 2 7; opacity: 0.55; stroke-width: 0.9;
  transform-box: view-box; transform-origin: 180px 70px;
  transform: rotate(calc(var(--tn-orbit, 90) * 1deg));
}
/* light-trail ticks along the route, lit up to where the token has reached:
   the mask is the same route drawn as one dash whose length is --tn-s */
.tn-ticks {
  fill: none; stroke: var(--sc-accent); stroke-width: 5; opacity: 0.5;
  stroke-dasharray: 0.004 0.021;
}
.tn-reveal {
  fill: none; stroke: white; stroke-width: 10; stroke-linecap: butt;
  stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--tn-s, 1));
}
/* twin trails behind the token: tension.js sets rotate + scale from speed */
.tn-trail__ln {
  fill: none; stroke: var(--sc-accent); stroke-width: 1.6; stroke-linecap: round;
  opacity: 0.6; vector-effect: non-scaling-stroke;
}
.tn-trail__ln--2 { stroke-width: 1; opacity: 0.35; }
.tn-fiat, .tn-coin { transform-box: fill-box; transform-origin: 50% 50%; }
.tn-fiat { transform: scaleX(max(0, calc(1 - var(--tn-swap, 1) * 2))); }
.tn-coin { transform: scaleX(max(0, calc(var(--tn-swap, 1) * 2 - 1))); }
.tn-tok__fiat { opacity: calc(1 - var(--tn-coin, 1)); }
.tn-tok__coin { opacity: var(--tn-coin, 1); }

.tn-blk__lit { fill: var(--sc-accent); }
.tn-blk--0 .tn-blk__lit { opacity: calc(var(--tn-b0, 1) * 0.85); }
.tn-blk--1 .tn-blk__lit { opacity: calc(var(--tn-b1, 1) * 0.85); }
.tn-blk--2 .tn-blk__lit { opacity: calc(var(--tn-b2, 1) * 0.85); }
.tn-blk--3 .tn-blk__lit { opacity: calc(var(--tn-b3, 1) * 0.85); }
.tn-blk--0 { transform: translateY(calc(var(--tn-b0, 1) * -3px)); }
.tn-blk--1 { transform: translateY(calc(var(--tn-b1, 1) * -3px)); }
.tn-blk--2 { transform: translateY(calc(var(--tn-b2, 1) * -3px)); }
.tn-blk--3 { transform: translateY(calc(var(--tn-b3, 1) * -3px)); }

.tn-wallet__fill {
  fill: color-mix(in oklab, var(--sc-accent) 32%, transparent);
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scaleY(var(--tn-fill, 1));
}
.tn-wallet__tab { fill: var(--sc-canvas); }
.tn-wcheck {
  transform-box: fill-box; transform-origin: 50% 50%;
  opacity: var(--tn-check, 1);
  transform: scale(calc(0.5 + var(--tn-check, 1) * 0.5));
}
.tn-wcheck__tick { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--tn-check, 1)); }

.tn-sw__ticks { fill: none; stroke: var(--sc-ink-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tn-sw__arc {
  fill: none; stroke: var(--sc-accent); stroke-width: 6; opacity: 0.35;
  stroke-dasharray: 1 1; stroke-dashoffset: var(--tn-arc, 0.64);
}
.tn-sw__hand {
  stroke: var(--sc-accent); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke;
  transform-box: view-box; transform-origin: 125px 245px;
  transform: rotate(calc(var(--tn-hand, 130) * 1deg));
}
.tn-crown { transform: translateY(calc(var(--tn-press, 1) * 3px)); }

/* ------------------------------------------------------------ mobile -- */
@media (max-width: 759.98px) {
  .tn-lbl { font-size: 17px; letter-spacing: 0.03em; }
  .tn-glass, .tn-ruler path.tn-ln--soft { opacity: 0.8; }
}