/* Act 2, unease: one sample payment narrated on both rails, line by line.
   Each ledger has a drawn companion that moves with the same cues.
   Card (the past, paper-slip era, engraving linework): a flat-bed card
   imprinter sweeps its slider over a carbon slip, the slip is pulled through,
   comes back under the clerk's rubber stamp (DISPUTED), part of it is clamped
   and hatched as held, then it tears.
   VanPay (the future): the token converts, slides into the wallet with a light
   trail that stretches while it moves, confirmations tick.
   Left colours come only from the --sc-* tokens so variant B re-themes it. */

#act-unease {
  /* One value per ledger cue (rows at p 0.08, 0.26, 0.44). */
  --u1: clamp(0, calc((var(--sc-p, 0) - 0.08) / 0.14), 1);
  --u2: clamp(0, calc((var(--sc-p, 0) - 0.26) / 0.14), 1);
  --u3: clamp(0, calc((var(--sc-p, 0) - 0.44) / 0.16), 1);
  /* halves of the first two cues: sweep then pull, stamp then clamp */
  --u1a: clamp(0, calc(var(--u1) * 2), 1);
  --u1b: clamp(0, calc(var(--u1) * 2 - 1), 1);
  --u2a: clamp(0, calc(var(--u2) * 2), 1);
  --u2b: clamp(0, calc(var(--u2) * 2 - 1), 1);
  /* how fast the VanPay token is moving right now (0 at rest, 1 mid-move) */
  --u-v: calc(2 * min(var(--u1), 1 - var(--u1)) + 2 * min(var(--u2), 1 - var(--u2)));
}

.unease-fig {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-bottom: var(--sc-5);
  overflow: visible;
}
.side--card .unease-fig { margin-left: auto; }
.u-paper { fill: var(--sc-canvas); }
.side--card .u-paper { fill: var(--sc-surface); }
.u-grid { opacity: 0.6; }

/* ------------------------------------------------- engraving kit (past) -- */
/* Own fallback for the shared era kit: heavier ink, square caps. */
.u-ink { stroke-width: 1.75px; stroke-linecap: square; stroke-linejoin: miter; color: var(--sc-ink); }
.u-xh__ln, .u-eng__ln { fill: none; stroke: var(--sc-ink); stroke-width: 0.7; }
.u-hatchfill { fill: url(#u-xh); stroke: none; opacity: 0.32; }
.u-hatchfill--dense { fill: url(#u-eng); opacity: 0.5; }
.u-shadow { fill: url(#u-xh); stroke: none; opacity: 0.55; }
.u-held { fill: url(#u-eng); stroke: none; }
.u-rules { opacity: 0.55; }
/* small era flourish when the trail capsule is in the slips era (H sets it);
   the drawing is complete without it */
html[data-era="slips"] .u-rules { opacity: 0.75; }
html[data-era="slips"] .u-hatchfill { opacity: 0.4; }
.u-emboss { stroke-width: 1.5px; }

/* ------------------------------------------------- future kit (VanPay) -- */
.u-fut { stroke-width: 0.9px; stroke-linecap: round; }
.u-node__orbit { stroke-dasharray: 2 6; opacity: 0.6; }

/* card: slider sweeps the imprinter, the slip pulls through, comes back under
   the stamp, a hold clamp and hatch appear, the receipt tears */
.u-stamp, .u-half, .u-slip, .u-tok__crypto, .u-slider, .u-stamp__handle, .u-node__orbit {
  transform-box: fill-box; transform-origin: 50% 50%;
}
.u-slider { transform: translate3d(calc(var(--u1a) * 126px), 0, 0); }
.u-carbon { opacity: calc(0.3 + 0.7 * var(--u1a)); }
.u-slip {
  transform-origin: 0 50%;
  transform: translate3d(calc(-176px + var(--u1b) * 176px - var(--u2a) * 14px), 0, 0) rotate(calc(var(--u2a) * -2deg));
}
.u-stamp {
  opacity: var(--u2a);
  transform: rotate(-8deg) scale(calc(1.25 - 0.25 * var(--u2a)));
}
.u-stamp__handle {
  opacity: calc(1 - var(--u2b));
  transform: translate3d(0, calc(-26px + var(--u2a) * 26px - var(--u2b) * 30px), 0);
}
.u-stamp__box { color: var(--sc-ink); stroke-width: 1.75px; fill: color-mix(in oklab, var(--sc-canvas) 82%, transparent); }
.u-stamp__text {
  font-family: var(--sc-font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  fill: var(--sc-ink);
}
.u-hold { opacity: var(--u2b); transform: translate3d(calc((1 - var(--u2b)) * 10px), 0, 0); }
.u-held { opacity: var(--u3); }
.u-half--top { transform: translate3d(0, calc(var(--u3) * -4px), 0) rotate(calc(var(--u3) * -2.5deg)); }
.u-half--bot { transform: translate3d(calc(var(--u3) * 6px), calc(var(--u3) * 10px), 0) rotate(calc(var(--u3) * 4deg)); }
.u-trace { opacity: calc(1 - var(--u3) * 0.6); }

/* VanPay: x = 28 + 168 (convert) + 214 (into the wallet) */
.u-tok {
  transform: translate(calc(28px + var(--u1) * 168px + var(--u2) * 214px), 80px);
}
.u-tok__fiat { opacity: calc(1 - var(--u1)); }
.u-tok__crypto { opacity: var(--u1); transform: scale(calc(0.6 + 0.4 * var(--u1))); }
.u-node { fill: var(--sc-surface); }
.u-node__ring { stroke-dasharray: 3 4; transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(calc(var(--u1) * 180deg)); }
.u-node__orbit { transform: rotate(calc(var(--u1) * -120deg)); }
.u-gem, .u-pip { fill: var(--sc-accent); }
.u-pip--1 { opacity: calc(0.2 + 0.8 * clamp(0, calc(var(--u3) * 3), 1)); }
.u-pip--2 { opacity: calc(0.2 + 0.8 * clamp(0, calc(var(--u3) * 3 - 1), 1)); }
.u-pip--3 { opacity: calc(0.2 + 0.8 * clamp(0, calc(var(--u3) * 3 - 2), 1)); }

/* twin light trails: they stretch while the token moves and relax at rest */
.u-trail { transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(var(--u-v)); }
.u-trail__ln {
  fill: none; stroke: var(--sc-accent); stroke-width: 1.6px; stroke-linecap: round;
  opacity: 0.6; vector-effect: non-scaling-stroke;
}
.u-trail__ln--2 { stroke-width: 1px; opacity: 0.35; }
/* ticks along the route light up behind the token */
.u-ticks {
  fill: none; stroke: var(--sc-accent); stroke-width: 5px;
  stroke-dasharray: 0.006 0.034; opacity: 0.5;
}
.u-reveal {
  fill: none; stroke: white; stroke-width: 10px; stroke-linecap: butt;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - (var(--u1) * 168 + var(--u2) * 214) / 338);
}

.unease__col {
  width: 100%;
  max-width: 31rem;
}
.side--card .unease__col { margin-left: auto; text-align: right; }
.side--vp .unease__col { margin-right: auto; }

.unease__title {
  margin-bottom: var(--sc-6);
  font-size: clamp(1.9rem, 1.2rem + 2vw, 3.1rem);
}
.side--card .unease__title { margin-left: auto; }

/* The ledger: a hairline table drawn like a schedule on a drawing sheet. */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--sc-hairline-strong);
  font-variant-numeric: tabular-nums;
}
.ledger__row {
  --pad: 0.85rem;
  --glyph: 1.25rem;
  position: relative;
  display: grid;
  align-items: start;
  column-gap: 0.85rem;
  padding-block: var(--pad);
  border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-base);
  line-height: 1.4;
}
.ledger__row:first-child { border-top-color: var(--sc-hairline-strong); }
.ledger__text { min-width: 0; text-wrap: pretty; }
.ledger__glyph {
  width: var(--glyph);
  height: var(--glyph);
  margin-top: calc((1.4em - var(--glyph)) / 2);
  overflow: visible;
}
.ledger__dot { fill: currentColor; stroke: none; }

/* Card rails: text trails toward the divider, glyphs sit against it. */
.ledger--card .ledger__row { grid-template-columns: minmax(0, 1fr) var(--glyph); }
.ledger--card .ledger__row:first-child .ledger__text { color: var(--sc-ink-soft); }
.ledger--card .ledger__row--warn .ledger__glyph { color: var(--sc-ink); }
.ledger--card .ledger__row:first-child .ledger__dot { fill: var(--sc-ink-soft); }

/* VanPay: glyphs lead from the divider, text runs outward. */
.ledger--vp .ledger__row { grid-template-columns: var(--glyph) minmax(0, 1fr); }
.ledger--vp .ledger__glyph { color: var(--sc-accent); }

/* Connectors between glyphs: a broken leader on card rails, a drawn route
   on VanPay. Each one belongs to its row, so it arrives with the row. */
.ledger__row:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--pad) + var(--glyph) + 0.25rem);
  bottom: calc(-1 * var(--pad) + 0.25rem);
  width: 0;
}
.ledger--card .ledger__row:not(:last-child)::after {
  right: calc(var(--glyph) / 2);
  border-right: 1px dashed var(--sc-ink-soft);
}
.ledger--vp .ledger__row:not(:last-child)::after {
  left: calc(var(--glyph) / 2 - 0.5px);
  border-left: 1px solid var(--sc-accent);
}

.unease__note {
  margin: var(--sc-4) 0 0;
  font-size: var(--sc-t-xs);
  line-height: 1.45;
  color: var(--sc-ink-soft);
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 759.98px) {
  .unease-fig { max-width: 15rem; margin-bottom: 0.5rem; }
  .side--card .unease-fig { margin-left: 0; }
  .side--card .unease__col { margin-left: 0; text-align: left; }
  .unease__col { max-width: 34rem; }
  .unease__title {
    margin-bottom: 0.7rem;
    font-size: clamp(1.2rem, 0.9rem + 1.6vw, 1.5rem);
    line-height: 1.05;
  }
  .ledger__row {
    --pad: 0.38rem;
    --glyph: 0.95rem;
    column-gap: 0.6rem;
    font-size: 0.85rem;
    line-height: 1.35;
  }
  .ledger__glyph { margin-top: calc((1.35em - var(--glyph)) / 2); }
  .ledger--card .ledger__row { grid-template-columns: var(--glyph) minmax(0, 1fr); }
  .ledger--card .ledger__glyph { order: -1; }
  .ledger--card .ledger__row:not(:last-child)::after { right: auto; left: calc(var(--glyph) / 2); }
  .unease__note { margin-top: 0.55rem; font-size: 0.7rem; }
}
@media (max-width: 759.98px) and (max-height: 760px) {
  .unease-fig { display: none; }
}
@media (min-width: 760px) and (max-height: 760px) {
  .unease-fig { max-width: 20rem; margin-bottom: var(--sc-3); }
}
@media (max-width: 759.98px) and (max-height: 700px) {
  .unease__side.side[data-label] { padding-top: calc(var(--band) + 0.7rem); padding-bottom: 0.6rem; }
  .unease__title { font-size: 1.15rem; }
  .ledger__row { --pad: 0.3rem; font-size: 0.76rem; }
}

/* ------------------------------------------------------- reduced motion -- */
/* The ledger is the meaning: under reduced motion every line is shown and the
   drawings sit in their era's end state (slip stamped, held and torn; token
   in the wallet, trail at rest). */
@media (prefers-reduced-motion: reduce) {
  #act-unease { --u1: 1; --u2: 1; --u3: 1; --u1a: 1; --u1b: 1; --u2a: 1; --u2b: 1; --u-v: 0; }
  #act-unease [data-sc-cue] { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
}