/* Act 2, unease (builder T). Glass trail, motion round.
   One lit object per side on a studio ground, reflection below; both sides
   share one grid (viewBox 560x400, floor y 330).
   js/tension.js reads the pin's progress, smooths it (v += (target - v) * .18)
   and scrubs the beats below by writing SVG transforms and a few opacity
   vars. The markup holds the END frame, so no-JS and reduced motion read the
   outcome. Left colours come only from the --sc-* tokens (greys).

   BEAT TABLE (pin progress p, desktop and phones alike; 0.10 overlap)
   Past (left, one beat at a time, dull):
     L1 print   0.04-0.18  receipt slides up out of the stack
     L2 tag     0.20-0.34  DISPUTED tag drops, lands with a dull settle
     L3 hold    0.36-0.48  translucent hold layer unrolls over the lower half
                           (scaleX from the card's left edge + 0.3 -> 1
                           opacity, a dull leading edge; never a loose slab)
        lock    0.47-0.54  shackle clicks shut (body 1.06 -> 1)
     L4 dim     0.58-0.68  the stack dims one step (money held)
   Future (right, fluid, one continuous move):
     R1 enter   0.02-0.12  coin leaves the origin slit at the divider-side
                           edge at slot size, grows to full size once clear
     R2 travel  0.12-0.36  coin glides along the rail, the lit rail follows
        flip    0.18-0.27  scaleX flip fiat -> crypto, mid-rail
        sweep   0.26-0.34  a light band crosses the coin face
     R3 slot    0.34-0.44  coin accelerates, shrinks to the slot height over
                           the last stretch and passes behind the device
                           face through the slot, light trail behind
     R4 screen  0.44-0.54  the wallet screen lights from bottom to top
     R5 check   0.52-0.60  the check draws
     R6 dots    0.60-0.72  three confirmation dots ignite left to right, pulse
     R7 pulse   0.74-0.84  the whole device gives one 1.03 -> 1 received pulse
*/

#act-unease {
  /* text reveal scale, matched to the cue windows on the lines */
  --uth: clamp(0, calc((var(--sc-p, 0) + 0.04) / 0.04), 1);
  --uts: clamp(0, calc((var(--sc-p, 0) + 0.02) / 0.04), 1);
  --utc: clamp(0, calc((var(--sc-p, 0) - 0.7) / 0.08), 1);
}

/* ------------------------------------------------------------- layout -- */
.u-col { width: 100%; max-width: 36rem; }
.side--card .u-col { margin-left: auto; }
.side--vp .u-col { margin-right: auto; }

/* type fallbacks (H defines the shared ones in base.css; same tokens) */
#act-unease .u-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-unease .u-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-unease .u-cap {
  margin: 16px 0 0;
  max-width: 640px;
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--sc-ink-soft);
}
.u-line--h > * { transform: scale(calc(0.96 + 0.04 * var(--uth))); transform-origin: 0 50%; }
.u-line--s > * { transform: scale(calc(0.96 + 0.04 * var(--uts))); transform-origin: 0 50%; }
.u-line--c > * { transform: scale(calc(0.96 + 0.04 * var(--utc))); transform-origin: 0 50%; }

.u-fig {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  max-height: 46vh;
  margin: 64px 0 0;
  overflow: visible;
}

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

/* ------------------------------------------------------- past (grey) -- */
.u-mt1 { stop-color: var(--sc-ink-soft); }
.u-mt2 { stop-color: color-mix(in oklab, var(--sc-ink-soft) 58%, var(--sc-canvas)); }
.u-mt3 { stop-color: color-mix(in oklab, var(--sc-ink-soft) 30%, var(--sc-canvas)); }
.u-pp1 { stop-color: color-mix(in oklab, var(--sc-ink) 72%, var(--sc-canvas)); }
.u-pp2 { stop-color: color-mix(in oklab, var(--sc-ink-soft) 70%, var(--sc-canvas)); }
.u-card--under { opacity: 0.7; }
.u-card--deep { opacity: 0.42; }
.u-print { fill: var(--sc-canvas); opacity: 0.35; }
.u-rprint { fill: var(--sc-canvas); opacity: 0.3; }
.u-rprint--strong { opacity: 0.55; }
.u-gl1 { stop-color: var(--sc-ink); stop-opacity: 0.16; }
.u-gl2 { stop-color: var(--sc-ink); stop-opacity: 0.06; }
.u-glass--m { fill: url(#u-l-glass); }
.u-glass__lip { fill: none; stroke: var(--sc-ink); stroke-width: 1; opacity: 0.35; }
.u-glass__edge { fill: none; stroke: var(--sc-ink); stroke-width: 1.5; opacity: 0; }
/* floor rail + origin plate: the past side's structure, dull greys */
.u-floor { fill: none; stroke: var(--sc-ink-soft); stroke-width: 2; stroke-linecap: butt; opacity: 0.35; }
.u-origin__slit--m { fill: var(--sc-ink-soft); opacity: 0.6; }
.u-lock__body { fill: var(--sc-ink-soft); }
.u-lock__shackle { fill: none; stroke: var(--sc-ink-soft); stroke-width: 2.6; stroke-linecap: round; }
.u-tag__fill { fill: var(--sc-canvas); opacity: 0.82; }
.u-tag__sheen { opacity: 0.6; }
.u-tag__text {
  font-family: var(--sc-font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: var(--sc-ink);
}
.u-stack { opacity: var(--u-dim, 0.62); }
.u-lock { opacity: var(--u-lock, 1); }

/* ----------------------------------------------------- future (glass) -- */
.u-cn1 { stop-color: color-mix(in oklab, var(--sc-accent) 50%, white); }
.u-cn2 { stop-color: var(--vp-blue); }
.u-cn3 { stop-color: var(--vp-blue-lo); }
.u-dv1 { stop-color: color-mix(in oklab, var(--sc-ink) 16%, var(--sc-canvas)); }
.u-dv2 { stop-color: color-mix(in oklab, var(--sc-ink) 4%, var(--sc-canvas)); }
.u-screen { fill: var(--sc-ink); opacity: 0.06; }
.u-sc1 { stop-color: var(--sc-accent); stop-opacity: 0.55; }
.u-sc2 { stop-color: var(--sc-accent); stop-opacity: 0.12; }
.u-screen__lit { fill: url(#u-r-screen); }
.u-check__ring { fill: none; stroke: var(--sc-ink); stroke-width: 2; opacity: 0.9; }
.u-check__tick {
  fill: none; stroke: var(--sc-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1;
}
.u-check { opacity: var(--u-check, 1); }
/* the rail: a dim base track, the lit track draws from the start cap */
.u-rail { fill: none; stroke: var(--sc-ink-soft); stroke-width: 2; stroke-linecap: round; opacity: 0.35; }
.u-rail--lit { stroke: var(--sc-accent); opacity: 0.9; stroke-dasharray: 1 1; }
.u-origin__slit { opacity: 0.3; }
.u-tr1 { stop-color: var(--sc-accent); stop-opacity: 0; }
.u-tr2 { stop-color: color-mix(in oklab, var(--sc-accent) 60%, white); stop-opacity: 1; }
.u-trail__core { fill: url(#u-r-trail); }
.u-trail__glow { fill: url(#u-r-trail); opacity: 0.7; }
.u-slot { fill: var(--sc-accent); }
.u-edge__glow { fill: none; stroke: var(--sc-accent); stroke-width: 12; opacity: 0.55; }
.u-edge__rim { fill: none; stroke: url(#u-r-lit); stroke-width: 1; }
.u-edge { opacity: var(--u-edge, 1); }
.u-lit1 { stop-color: var(--sc-accent); stop-opacity: 0.9; }
.u-lit2 { stop-color: var(--sc-accent); stop-opacity: 0.1; }
.u-dot { fill: var(--sc-accent); }
.u-coin__shadow { fill: var(--sc-canvas); opacity: 0.6; }
.u-face__ink { fill: var(--sc-ink); opacity: 0.9; }
.u-face__cut { fill: var(--vp-blue-lo); }
.u-face--fiat { opacity: 0; }
.u-sw0 { stop-color: #fff; stop-opacity: 0; }
.u-sw1 { stop-color: #fff; stop-opacity: 0.55; }

/* --------------------------------------------------------------- mobile -- */
/* Stacked below 900px and on landscape phones (max-height 500): past copy,
   past object, future copy, future object (+ caption), each on its own
   ground. Pinned stage (phones, tablet portrait): the two sides share the
   100svh stage, the figure takes whatever is left (never hidden), and the
   future side keeps the ctabar clear. The drawings are re-framed for the
   small box: the studio light, ground shadow and reflection go, and the
   object group is scaled up to fill the figure's height (transform-box:
   view-box; the svg overflows visibly inside its own block). */
@media (max-width: 899.98px), (max-height: 500px) {
  .side--card .u-col, .side--vp .u-col { margin-inline: 0; max-width: none; }
  #act-unease .u-h { text-wrap: pretty; }
  #act-unease .u-sub { margin-top: 24px; }
  #act-unease .u-cap { margin-top: 8px; }
  .u-fig {
    max-width: none;
    height: auto;
    max-height: none;
    /* subtext -> object: 64 on roomy viewports, proportional on short ones */
    margin-top: clamp(1.5rem, 5vh, 4rem);
  }
  .u-reflect, .u-studio, .u-ground-shadow { display: none; }
  /* the object fills the figure box: each group is re-centred on its own
     bounds (incl. the moving parts at their extremes) and scaled up */
  .u-obj { transform-box: view-box; transform-origin: 0 0; }
  #u-l-obj { transform: translate(280px, 200px) scale(1.42) translate(-294px, -192px); }
  #u-r-obj { transform: translate(280px, 200px) scale(1.6) translate(-250px, -210px); }
  .u-floor-ext { display: none; }
}
/* pinned stage, stacked: the sides split the 100svh stage, figures flex */
@media (max-width: 899.98px) and (min-height: 500.02px) {
  #act-unease [data-sc-stage] .u-side { padding-bottom: 1rem; }
  /* the ctabar (3rem pill + 2 x 0.75rem) sits over the bottom of the stage */
  #act-unease [data-sc-stage] .side--vp { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
  #act-unease [data-sc-stage] .u-col { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  #act-unease [data-sc-stage] .u-fig {
    flex: 1 1 0;
    min-height: 3rem;
    max-height: max(11rem, 28vh);
  }
}
/* short phones (360x640): tighter rhythm so both halves, the caption and the
   ctabar all fit the stage; the figure keeps at least 3rem */
@media (max-width: 899.98px) and (min-height: 500.02px) and (max-height: 700px) {
  #act-unease [data-sc-stage] .u-side[data-label] { padding-top: calc(var(--band, 2.75rem) + 0.5rem); }
  #act-unease [data-sc-stage] .u-sub { margin-top: 16px; }
  #act-unease [data-sc-stage] .u-fig { margin-top: 16px; }
  #act-unease [data-sc-stage] .u-cap { margin-top: 4px; }
}
/* landscape phones: unpinned by main.js (flow), each block fits a 390px
   viewport: the figure is capped by height, the copy flows above it */
@media (max-height: 500px) {
  .u-fig { height: 58vh; margin-top: 1.5rem; }
}
@media (min-width: 900px) and (min-height: 500.02px) and (max-height: 760px) {
  .u-fig { max-height: 38vh; margin-top: 40px; }
}

/* ------------------------------------------------------- reduced motion -- */
/* Final states (js/tension.js renders the end frame): every line visible. */
@media (prefers-reduced-motion: reduce) {
  #act-unease { --uth: 1; --uts: 1; --utc: 1; }
  #act-unease [data-sc-cue] { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
}