/* ============================================================================
   exotic — css/motion-live.css · scroll-driven and finger-driven motion
   Two of these run entirely on the compositor via `animation-timeline: view()`.
   ========================================================================== */

/* ============================================================================
   1 · THE WORLD CLOCK
   ========================================================================== */
.lv-clock{position:relative;height:clamp(150px,20vw,210px);cursor:grab;
  touch-action:pan-y;                    /* a vertical swipe still scrolls */
  border-radius:var(--rad-2,12px);overflow:hidden;background:var(--bg-sunken)}
.lv-clock.lv-grab{cursor:grabbing}
.lv-read{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:13px}
.lv-read .t{font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:29px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);line-height:1}
.lv-read .z{font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;
  letter-spacing:var(--track-caps,.07em);color:var(--muted)}
.lv-read .back{margin-left:auto;font-family:var(--font-num);font-size:9.5px;
  text-transform:uppercase;letter-spacing:var(--track-caps,.07em);color:var(--muted);
  opacity:0;transition:opacity var(--t-med,.24s) var(--ease-out)}
.lv-read.scrubbed .back{opacity:1}

.lv-venues{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.lv-v{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
  border:1px solid var(--hairline);border-radius:var(--rad-pill,999px);
  font-family:var(--font-num);font-size:10.5px;color:var(--muted);background:var(--surface);
  transition:color var(--t-med,.24s) var(--ease-out),
             border-color var(--t-med,.24s) var(--ease-out)}
.lv-v i{width:6px;height:6px;border-radius:50%;background:var(--hairline);display:block;
  flex:0 0 auto;transition:background var(--t-med,.24s) var(--ease-out)}
.lv-v.on{color:var(--ink);border-color:color-mix(in oklab,var(--g4) 46%,var(--hairline))}
.lv-v.on i{background:var(--g4)}
/* the closed-market gap is the point of the whole graphic, so it gets a chip */
.lv-v.us{margin-left:auto;border-style:dashed}
.lv-gap{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
  border-radius:var(--rad-pill,999px);font-family:var(--font-num);font-size:10.5px;
  color:var(--ink);background:var(--surface);box-shadow:var(--crisp);
  border:1px solid color-mix(in oklab,var(--g4) 46%,var(--hairline))}
.lv-gap .mk{width:13px;height:13px;line-height:0;flex:0 0 auto}
.lv-gap .mk svg{display:block;width:100%;height:100%}

/* ============================================================================
   2 · SCRUB — the line is a clip-path wipe on a view() timeline
   The story-kit law: line reveals are clip wipes, never dash animations —
   dasharray computes in screen space and breaks under non-scaling-stroke.
   ========================================================================== */
.lv-sc{position:relative;height:clamp(120px,17vw,180px);width:100%;display:block}
.lv-sc-svg{position:absolute;inset:0;width:100%;height:100%;display:block;
  clip-path:inset(0 0 0 0)}
@supports (animation-timeline: view()){
  /* LONGHANDS ON PURPOSE. The `animation` shorthand resets animation-duration
     to 0s, and a scroll-driven animation needs `auto` (which maps to the
     timeline's own duration). With 0s it completes instantly at progress 0 and,
     with fill both, just paints the END state — a line that looks drawn and
     never moves. Nothing warns you; it simply does nothing. */
  .lv-sc-svg{
    animation-name:lvDraw;
    animation-duration:auto;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:view(block);
    animation-range:entry 12% cover 46%;
  }
}
@keyframes lvDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.lv-sc-out{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.lv-sc-out .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:26px;font-weight:600;letter-spacing:-0.028em;color:var(--ink);line-height:1}
.lv-sc-pct{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:13px;
  font-weight:600;color:var(--muted)}
.lv-sc-pct.up{color:var(--up)} .lv-sc-pct.down{color:var(--down)}

/* ============================================================================
   3 · KINETIC — every word on its own slice of one shared view() timeline.
   The stagger is scroll-POSITIONAL: scroll back up and the words un-reveal in
   order. A time-based stagger cannot do that at any price.
   ========================================================================== */
.lv-kt{font-size:15px;line-height:1.62;color:var(--ink-2);max-width:56ch;
  text-wrap:pretty;margin:0}
.lv-kt span{display:inline-block;will-change:opacity,transform,filter}
@supports (animation-timeline: view()){
  /* the per-word animation-range is written by js/motion-live.js when it splits
     the text: `animation-range` does not accept calc() over a custom property,
     so the index has to be resolved before it reaches CSS. The animation itself
     is still native and still runs on the compositor. */
  .lv-kt span{
    opacity:.14;
    animation-name:lvWord;
    animation-duration:auto;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:view(block);
  }
}
@keyframes lvWord{
  from{opacity:.14;transform:translateY(.24em);filter:blur(3px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* ============================================================================
   4 · ODO — a digit column translated by −10% per digit
   ========================================================================== */
.lv-odo{display:inline-flex;align-items:baseline;font-family:var(--font-num);
  font-variant-numeric:tabular-nums;font-size:34px;font-weight:600;
  letter-spacing:-0.03em;line-height:1;color:var(--ink)}
.lv-odo i{font-style:normal;display:inline-block}
.lv-odo i.d{position:relative;overflow:hidden;height:1em;width:.62em;vertical-align:baseline}
.lv-odo i.d b{position:absolute;left:0;top:0;display:block;font-weight:inherit;
  white-space:pre;text-align:center;width:100%;line-height:1;
  transition:transform 620ms var(--ease-emph,cubic-bezier(.16,1,.3,1))}
.lv-odo i.sep{opacity:.55;padding:0 .02em}
/* the column that just moved keeps a hair of the ramp for a beat — the carry,
   made visible, and the only thing that says WHICH digit changed */
.lv-odo i.d.rolled b{color:var(--g4)}
.lv-odo i.d b{color:inherit;transition:transform 620ms var(--ease-emph,cubic-bezier(.16,1,.3,1)),
  color 900ms var(--ease-out) 240ms}

/* ============================================================================
   REDUCED MOTION — curated
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  /* the clock keeps every state; only the drag goes, so the hour is always now */
  .lv-clock{cursor:default}
  /* scroll-driven pieces resolve to their finished state instead of tracking */
  .lv-sc-svg{animation:none;clip-path:inset(0 0 0 0)}
  .lv-kt span{animation:none;opacity:1;transform:none;filter:none}
  /* the roll becomes a swap — the number is information, the spin is not */
  .lv-odo i.d b{transition:none}
  .lv-odo i.d.rolled b{color:inherit}
}
html.mk-reduce .lv-clock{cursor:default}
html.mk-reduce .lv-sc-svg{animation:none;clip-path:inset(0 0 0 0)}
html.mk-reduce .lv-kt span{animation:none;opacity:1;transform:none;filter:none}
html.mk-reduce .lv-odo i.d b{transition:none}
html.mk-reduce .lv-odo i.d.rolled b{color:inherit}

/* the DD grab pattern: while any finger-drag in this file's components is
   live, the page must not select or show a text cursor */
html.lv-grabbing, html.lv-grabbing *{user-select:none;-webkit-user-select:none}
html.lv-grabbing{cursor:grabbing}