/* Act 3, tension (builder T). Two clocks as glass objects, a purely visual
   comparison of payout time. Motion round: both drawings share one grid
   (viewBox 0 60 560 360, floor y 320); every connector runs station edge to
   station edge; nothing floats.
   Past (left, greys only): calendar, pending tray and reserve vault stand on
   the floor; a grey token drops into the tray, a slice slides along the
   floor rail into the vault, the vault locks, then the calendar pages fill
   and fold over their binding one at a time while the token rests. The
   past runs slower than the future (paced so nothing on the left moves more
   than ~40px per 40px of scroll).
   Future (right): the coin rides the rail through a glass conversion ring
   and four confirmation tiles (each lights as the coin passes) into the
   wallet; the screen fills, a check, the stopwatch above the wallet stops.
   js/tension.js scrubs both from a local time t (smoothed) and writes SVG
   transforms + a few opacity vars. Markup and every fallback below are the
   END frame, so no-JS and reduced motion read the outcome. The beat table is
   at the top of js/tension.js. */

/* ------------------------------------------------------------ layout -- */
.tn .side { min-width: 0; }
.tn-head { max-width: 820px; }
#act-tension .tn-h {
  margin: 0;
  max-width: 820px;
  font-family: var(--sc-font-display);
  font-size: var(--t-head);
  font-weight: 600;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.003em;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--sc-ink);
}
#act-tension .tn-sub {
  margin: 24px 0 0;
  max-width: 640px;
  font-family: var(--sc-font-text);
  font-size: var(--t-sub);
  font-weight: 500;
  letter-spacing: 0.009em;
  line-height: 1.33;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
#act-tension .tn-cap {
  margin: 0;
  max-width: 640px;
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--sc-ink-soft);
}
.tn-fig { margin: 64px 0 0; width: 100%; max-width: 29rem; color: var(--sc-ink); }
.tn-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tn-foot { margin-top: 16px; }
.tn-foot:empty { display: none; }

/* text reveal: scale + rise per line, subtext a beat later */
.tn [data-sc-in] {
  transform: scale(0.96) translateY(12px);
  transform-origin: 0 50%;
  transition: opacity 600ms var(--ease-fade), transform 600ms var(--ease-fade);
}
.tn .tn-sub[data-sc-in] { transition-delay: 120ms; }
.tn [data-sc-in].sc-in { transform: none; }

@media (min-width: 900px) and (min-height: 500.02px) {
  /* Split. Each side flows on its own (head, sub, 64px, object, foot) with
     the shared gutter on both sides, so the text edges line up with the
     other acts and the subtext->object gap is the same left and right. */
  .tn .side { display: flex; flex-direction: column; align-items: flex-start; padding-block: 160px; }
  .tn .side--card { align-items: flex-end; }
  .tn .side--card .tn-head, .tn .side--card .tn-fig, .tn .side--card .tn-foot { width: 100%; max-width: 29rem; }
}
/* Stacked (below 900px, and landscape phones): past copy, past object,
   future copy, future object + caption, each band on its own ground with
   the shared rhythm: 96 top/bottom, head->sub 24, sub->object 64. */
@media (max-width: 899.98px), (max-height: 500px) {
  #act-tension .side[data-label] { padding-top: calc(var(--band, 2.75rem) + 6rem); padding-bottom: 6rem; }
  #act-tension .tn-h { text-wrap: pretty; }
  .tn-fig { max-width: 29rem; }
  .tn-reflect, .tn-studio { display: none; }
}
/* landscape phones: every block fits a 390px-tall viewport, so the drawing
   is capped by height and centred in its band */
@media (max-height: 500px) {
  .tn-fig { max-width: none; }
  .tn-svg { height: 58vh; }
}

/* -------------------------------------------------------- shared kit -- */
.tn-st-m1 { stop-color: var(--sc-ink-soft); stop-opacity: 0.16; }
.tn-st-m2 { stop-color: var(--sc-ink-soft); stop-opacity: 0; }
.tn-st-b1 { stop-color: var(--sc-accent); stop-opacity: 0.2; }
.tn-st-b2 { stop-color: var(--sc-accent); stop-opacity: 0; }
.tn-ground-shadow { fill: var(--sc-canvas); opacity: 0.7; }
.tn-mk1 { stop-color: #fff; stop-opacity: 1; }
.tn-mk2 { stop-color: #fff; stop-opacity: 0; }
.tn-mk-on { fill: #fff; }
.tn-reflect { opacity: 0.35; }
.tn-rim { fill: none; stroke-width: 1; }
.tn-rim--m { stroke: url(#tn-l-rim); }
.tn-rim--b { stroke: url(#tn-r-rim); }
.tn-rim1 { stop-color: var(--sc-ink); stop-opacity: 0.55; }
.tn-rim2 { stop-color: var(--sc-ink); stop-opacity: 0; }
.tn-spec { fill: var(--sc-ink); }
.tn-spec--m { opacity: 0.25; }
.tn-spec--b { opacity: 0.6; }
.tn-gl1 { stop-color: var(--sc-ink); stop-opacity: 0.18; }
.tn-gl2 { stop-color: var(--sc-ink); stop-opacity: 0.07; }
.tn-glass--m { fill: url(#tn-l-glass); }
.tn-glass--b { fill: url(#tn-r-glass); }
.tn-glass__lip { fill: none; stroke: var(--sc-ink); stroke-width: 1; stroke-linecap: round; opacity: 0.3; }

/* planes: the studio light drifts a touch against the object */
.tn-back { transform: translateY(calc(var(--tn-back, 0) * 1px)); }

/* --------------------------------------------------------- card side -- */
.tn-mt1 { stop-color: var(--sc-ink-soft); }
.tn-mt2 { stop-color: color-mix(in oklab, var(--sc-ink-soft) 58%, var(--sc-canvas)); }
.tn-mt3 { stop-color: color-mix(in oklab, var(--sc-ink-soft) 30%, var(--sc-canvas)); }
.tn-sheet--under { opacity: 0.7; }
.tn-sheet--deep { opacity: 0.4; }
.tn-band { fill: var(--sc-canvas); opacity: 0.25; }
.tn-band__pill { fill: var(--sc-ink); opacity: 0.35; }
.tn-dots { fill: var(--sc-canvas); opacity: 0.3; }
.tn-c { fill: var(--sc-ink); opacity: 0.7; }
/* pages fold over their binding: js/tension.js writes the pivot (y 180)
   into the transform, so the origin stays at the user-space 0 0 */
.tn-page { transform-box: view-box; transform-origin: 0 0; }
.tn-front { opacity: 0.9; }
.tn-floor-rail { fill: none; stroke: var(--sc-ink-soft); stroke-width: 2; stroke-linecap: butt; opacity: 0.45; }
.tn-tok__shadow { fill: var(--sc-canvas); opacity: 0.6; }
.tn-tok__gap { fill: var(--sc-canvas); opacity: var(--tn-gap, 0.85); }
.tn-wedge__slice { opacity: 0.95; }
.tn-lock__body { fill: var(--sc-ink-soft); }
.tn-lock__shackle { fill: none; stroke: var(--sc-ink-soft); stroke-width: 2.4; stroke-linecap: round; }

/* ------------------------------------------------------ VanPay side -- */
.tn-cn1 { stop-color: color-mix(in oklab, var(--sc-accent) 50%, white); }
.tn-cn2 { stop-color: var(--vp-blue); }
.tn-cn3 { stop-color: var(--vp-blue-lo); }
.tn-dv1 { stop-color: color-mix(in oklab, var(--sc-ink) 16%, var(--sc-canvas)); }
.tn-dv2 { stop-color: color-mix(in oklab, var(--sc-ink) 4%, var(--sc-canvas)); }
.tn-screen { fill: var(--sc-ink); opacity: 0.06; }
.tn-sc1 { stop-color: var(--sc-accent); stop-opacity: 0.6; }
.tn-sc2 { stop-color: var(--sc-accent); stop-opacity: 0.12; }
.tn-screen__lit { fill: url(#tn-r-screen); }
/* the rail: dim base segments; the lit copy is revealed up to the coin */
.tn-rail { fill: none; stroke: var(--sc-ink-soft); stroke-width: 2; stroke-linecap: butt; opacity: 0.4; }
.tn-rail--lit { stroke: var(--sc-accent); opacity: 1; }
.tn-rail--stem { opacity: calc(0.4 + 0.6 * var(--tn-fill, 1)); stroke: var(--sc-accent); }
.tn-tr1 { stop-color: var(--sc-accent); stop-opacity: 0; }
.tn-tr2 { stop-color: color-mix(in oklab, var(--sc-accent) 60%, white); stop-opacity: 1; }
.tn-trail__core { fill: url(#tn-r-trail); }
.tn-trail__glow { fill: url(#tn-r-trail); opacity: 0.5; }

/* start socket */
.tn-socket { fill: url(#tn-r-glass); }

/* conversion ring */
.tn-ring__glass { fill: url(#tn-r-glass); }
.tn-ring__rim { fill: none; stroke: url(#tn-r-rim); stroke-width: 1; }
.tn-ring__rim--in { opacity: 0.6; }
.tn-orbit__arc { fill: none; stroke: url(#tn-r-comet); stroke-width: 1.5; stroke-linecap: round; }
.tn-orbit__light { fill: none; stroke: var(--sc-accent); stroke-width: 4; stroke-linecap: round; opacity: 0.4; }
.tn-cm1 { stop-color: var(--sc-accent); stop-opacity: 0; }
.tn-cm2 { stop-color: var(--sc-accent); stop-opacity: 1; }
.tn-face__ink { fill: var(--sc-ink); opacity: 0.9; }
.tn-face__cut { fill: var(--vp-blue-lo); }
.tn-face--fiat { opacity: 0; }

/* confirmation tiles */
.tn-blk__lit { fill: var(--sc-accent); opacity: 0.85; }

/* wallet device: slot, edge light, confirmation check */
.tn-slot { fill: var(--sc-accent); }
.tn-edge { opacity: var(--tn-fill, 1); }
.tn-edge__glow { fill: none; stroke: var(--sc-accent); stroke-width: 10; opacity: 0.55; }
.tn-edge__rim { fill: none; stroke: url(#tn-r-lit); stroke-width: 1; }
.tn-lit1 { stop-color: var(--sc-accent); stop-opacity: 0.9; }
.tn-lit2 { stop-color: var(--sc-accent); stop-opacity: 0.1; }
.tn-wcheck { opacity: var(--tn-check, 1); }
.tn-wcheck__disc { fill: var(--sc-accent); }
.tn-wcheck__tick {
  fill: none; stroke: var(--sc-accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1;
}

/* stopwatch: a slim glass dial on the wallet's centre line */
.tn-sw__glass { fill: url(#tn-r-glass); }
.tn-sw__arc {
  fill: none; stroke: url(#tn-r-arc); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 0.64;
}
.tn-sw__arc--shade { stroke: var(--sc-accent); stroke-width: 5; opacity: 0.45; }
.tn-ar1 { stop-color: color-mix(in oklab, var(--sc-accent) 55%, white); }
.tn-ar2 { stop-color: var(--sc-accent); }
.tn-sw__hand { stroke: var(--sc-ink); stroke-width: 2.2; stroke-linecap: round; }
.tn-sw__pin { fill: var(--sc-ink); }
.tn-crown { fill: var(--sc-ink-soft); }