/* URSY Markets - animated hero.
   Installed verbatim from design_handoff_ursy_hero/ursy-hero.html
   (the <style> block of the supplied prototype). Do not hand-edit:
   re-export from the design bundle instead. Everything is scoped
   under .ursy-hero and cannot leak into the surrounding stylesheet. */
/* ==========================================================================
   URSY MARKETS — ANIMATED HERO
   The right-hand side is one live exchange panel, not a scatter of shapes:
   an open request appears, selling agents bid against it, one wins, and the
   contract stamps through agreed → evidence → accepted → settled. Then the
   next request opens. Fixed rows, nothing floats, nothing overlaps.

   Vanilla JS + CSS. No framework, no build, no dependencies but the fonts.
   All CSS scoped under .ursy-hero. Re-theme with --uh-h1 / --uh-h2.
   ========================================================================== */
.ursy-hero{
  --uh-h1:195; --uh-h2:300; --uh-c:.15;
  --uh-bg:oklch(.985 .004 250);
  --uh-sf:#fff;
  --uh-sf2:oklch(.962 .008 250);
  --uh-ink:oklch(.19 .02 265);
  --uh-ink2:oklch(.43 .02 265);
  --uh-ink3:oklch(.58 .02 265);
  --uh-line:oklch(.19 .02 265/.08);
  --uh-line2:oklch(.19 .02 265/.16);
  --uh-acc:oklch(.62 var(--uh-c) var(--uh-h1));
  --uh-acc2:oklch(.6 var(--uh-c) var(--uh-h2));
  --uh-acc-text:oklch(.4 .13 var(--uh-h1));
  --uh-acc-soft:oklch(.62 var(--uh-c) var(--uh-h1)/.14);
  --uh-acc2-text:oklch(.4 .14 var(--uh-h2));
  --uh-acc2-soft:oklch(.6 var(--uh-c) var(--uh-h2)/.14);
  --uh-ok:oklch(.52 .14 150);
  --uh-ok-text:oklch(.38 .11 150);
  --uh-ok-soft:oklch(.6 .14 150/.15);
  --uh-warn:oklch(.66 .15 70);
  --uh-warn-text:oklch(.42 .11 65);
  --uh-warn-soft:oklch(.75 .15 75/.22);
  --uh-glass:oklch(1 0 0/.74);
  --uh-shadow:0 1px 2px oklch(.19 .02 265/.05),0 24px 48px -32px oklch(.19 .02 265/.28);
  --uh-r2:14px;

  position:relative;box-sizing:border-box;color:var(--uh-ink);background:var(--uh-bg);
  background-image:
    radial-gradient(1000px 520px at 12% -8%, oklch(.9 .08 var(--uh-h1)/.85), transparent 60%),
    radial-gradient(900px 560px at 92% -6%, oklch(.9 .08 var(--uh-h2)/.75), transparent 60%),
    radial-gradient(700px 420px at 55% 6%, oklch(.94 .06 150/.6), transparent 60%);
  background-repeat:no-repeat;
  font:400 16px/1.5 "Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;
}
.ursy-hero[data-profile="orchard"]{--uh-h1:145;--uh-h2:95}
.ursy-hero[data-profile="ember"]  {--uh-h1:40; --uh-h2:350}
.ursy-hero[data-profile="slate"]  {--uh-h1:250;--uh-h2:220;--uh-c:.06}
.ursy-hero[data-profile="ocean"]  {--uh-h1:250;--uh-h2:200}
.ursy-hero[data-profile="ice"]    {--uh-h1:215;--uh-h2:280;--uh-c:.1}
.ursy-hero[data-mode="dark"]{
  --uh-bg:oklch(.15 .015 265); --uh-sf:oklch(.19 .015 265); --uh-sf2:oklch(.235 .015 265);
  --uh-ink:oklch(.96 .005 250); --uh-ink2:oklch(.76 .01 260); --uh-ink3:oklch(.62 .01 260);
  --uh-line:oklch(1 0 0/.09); --uh-line2:oklch(1 0 0/.16);
  --uh-acc-text:oklch(.82 .1 var(--uh-h1)); --uh-acc-soft:oklch(.62 var(--uh-c) var(--uh-h1)/.24);
  --uh-acc2-text:oklch(.82 .1 var(--uh-h2)); --uh-acc2-soft:oklch(.6 var(--uh-c) var(--uh-h2)/.24);
  --uh-ok-text:oklch(.82 .12 150); --uh-ok-soft:oklch(.6 .14 150/.24);
  --uh-warn-text:oklch(.86 .12 75); --uh-glass:oklch(.2 .015 265/.72);
  --uh-shadow:0 30px 60px -40px rgba(0,0,0,.8);
  background-image:
    radial-gradient(1000px 520px at 12% -8%, oklch(.35 .09 var(--uh-h1)/.7), transparent 60%),
    radial-gradient(900px 560px at 92% -6%, oklch(.33 .09 var(--uh-h2)/.7), transparent 60%);
}
.ursy-hero *,.ursy-hero *::before,.ursy-hero *::after{box-sizing:border-box}

.ursy-hero__wrap{
  position:relative;z-index:2;max-width:1320px;margin:0 auto;
  padding:clamp(24px,4vw,64px) clamp(16px,4vw,32px) clamp(78px,9vw,100px);
  display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:1fr;align-items:start;
}
@media (min-width:940px){
  .ursy-hero__wrap{grid-template-columns:minmax(0,1fr) minmax(380px,472px);align-items:stretch}
  .ursy-hero__copy{justify-content:space-between}
  .uh-panel{margin-top:1cm}
}

/* ---------- copy ---------- */
.ursy-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.ursy-hero__badge{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:10px;
  background:var(--uh-glass);border:1px solid var(--uh-line2);
  font:700 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;color:var(--uh-ink2);
  animation:uh-rise .6s ease-out both;
}
.ursy-hero__dot{width:7px;height:7px;border-radius:50%;background:var(--uh-ok);animation:uh-pulse 1.6s ease-in-out infinite;flex:none}
.ursy-hero h1{
  margin:0;font:500 clamp(36px,5.6vw,68px)/1.02 "Bricolage Grotesque",system-ui,sans-serif;
  letter-spacing:-.04em;text-wrap:balance;animation:uh-rise .7s .05s ease-out both;
}
.ursy-hero h1 em{font:italic 400 1em/1 "Instrument Serif",Georgia,serif;letter-spacing:-.02em;color:var(--uh-acc-text)}
.ursy-hero__lead{
  margin:0;max-width:32em;font-size:clamp(15px,2vw,18px);line-height:1.5;color:var(--uh-ink2);
  text-wrap:pretty;animation:uh-rise .7s .1s ease-out both;
}
.ursy-hero__cta{display:grid;grid-template-columns:1fr;gap:10px;width:100%;max-width:540px;animation:uh-rise .7s .15s ease-out both}
@media (min-width:520px){ .ursy-hero__cta{grid-template-columns:1fr 1fr} }
.ursy-hero__door{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:16px;text-align:left;
  border:1px solid var(--uh-line2);border-radius:var(--uh-r2);background:var(--uh-glass);
  backdrop-filter:blur(10px);color:var(--uh-ink);text-decoration:none;
  box-shadow:var(--uh-shadow);transition:transform .25s ease;
}
.ursy-hero__door:hover,.ursy-hero__door:focus-visible{transform:translateY(-3px)}
.ursy-hero__door--ink{background:var(--uh-ink);color:var(--uh-bg);border-color:transparent}
.ursy-hero__door span:first-child{font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--uh-acc-text)}
.ursy-hero__door--ink span:first-child{color:inherit;opacity:.65}
.ursy-hero__door b{font:600 19px/1.1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.02em}
.ursy-hero__door small{font-size:13px;line-height:1.4;color:var(--uh-ink2)}
.ursy-hero__door--ink small{color:inherit;opacity:.72}
.ursy-hero__door code{
  font:600 11px "JetBrains Mono",monospace;padding:6px 8px;border-radius:6px;background:oklch(1 0 0/.12);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ursy-hero__more{margin-top:2px;font-weight:600;color:var(--uh-acc-text)}

.ursy-hero__counters{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;animation:uh-rise .7s .2s ease-out both}
.ursy-hero__counter{padding:10px 14px;border-radius:12px;background:var(--uh-glass);border:1px solid var(--uh-line2);min-width:104px}
.ursy-hero__counter b{display:block;font:500 22px/1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ursy-hero__counter span{display:block;margin-top:6px;font:700 9px "JetBrains Mono",monospace;letter-spacing:.11em;color:var(--uh-ink3)}

/* ==========================================================================
   THE EXCHANGE PANEL
   ========================================================================== */
.uh-panel{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:12px;
  border:1px solid var(--uh-line2);border-radius:20px;background:var(--uh-glass);
  backdrop-filter:blur(14px);box-shadow:var(--uh-shadow);
  animation:uh-rise .7s .12s ease-out both;
}
.uh-panel__bar{
  display:flex;align-items:center;gap:8px;padding:2px 4px 0;
  font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--uh-ink3);
}
.uh-panel__bar b{color:var(--uh-ink2);letter-spacing:.12em}
.uh-panel__bar .uh-live{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--uh-ok-text);
}
.uh-panel__bar .uh-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--uh-ok);animation:uh-pulse 1.6s ease-in-out infinite}

.uh-card{
  border:1px solid var(--uh-line2);border-radius:14px;background:var(--uh-sf);overflow:hidden;
  transition:border-color .4s ease,box-shadow .4s ease;
}
.uh-card__head{
  display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--uh-line);
  font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.11em;text-transform:uppercase;color:var(--uh-ink3);
}
.uh-card__head b{color:var(--uh-acc-text);letter-spacing:.11em}
.uh-chip{
  margin-left:auto;padding:3px 8px;border-radius:6px;white-space:nowrap;font-weight:700;letter-spacing:.09em;
  background:var(--uh-sf2);color:var(--uh-ink2);transition:background .3s ease,color .3s ease;
}

/* the open request */
.uh-req__body{padding:12px}
.uh-scope{
  margin:0;font:500 clamp(14px,1.35vw,16px)/1.35 "Instrument Sans",sans-serif;color:var(--uh-ink);
  letter-spacing:-.005em;min-height:2.7em;
}
.uh-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 0}
.uh-facts>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.uh-facts dt{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--uh-ink3)}
.uh-facts dd{
  margin:0;font:600 12.5px "JetBrains Mono",monospace;color:var(--uh-ink);
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* bids */
.uh-bids{display:flex;flex-direction:column;gap:6px}
.uh-bids__head{
  display:flex;align-items:center;gap:8px;padding:0 4px;
  font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.11em;color:var(--uh-ink3);
}
.uh-bids__head b{color:var(--uh-ink2);letter-spacing:.11em}
.uh-bids__head span{margin-left:auto;font-weight:500}
.uh-bid{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;align-items:center;gap:10px;
  padding:9px 12px 9px 9px;border:1px solid var(--uh-line);border-radius:12px;background:var(--uh-sf);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease,border-color .35s ease,box-shadow .35s ease,background .35s ease;
}
.uh-bid[data-in="1"]{opacity:1;transform:none}
.uh-bid[data-result="lost"]{opacity:.4}
.uh-bid[data-result="won"]{border-color:var(--uh-acc);box-shadow:0 0 0 3px var(--uh-acc-soft)}
.uh-bid__glyph{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;
  font:600 13px "JetBrains Mono",monospace;
}
.uh-bid__who{display:flex;flex-direction:column;gap:2px;min-width:0}
.uh-bid__who b{font:600 13px/1.15 "Instrument Sans",sans-serif;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uh-bid__who small{font:500 9.5px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--uh-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uh-bid__price{font:700 14px "JetBrains Mono",monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.uh-bid__tag{
  min-width:62px;text-align:center;padding:4px 8px;border-radius:6px;background:var(--uh-sf2);color:var(--uh-ink3);
  font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.08em;
}
.uh-bid[data-result="won"] .uh-bid__tag{background:var(--uh-acc);color:#fff}

/* contract */
.uh-card--contract{opacity:.42;transition:opacity .45s ease,border-color .4s ease,box-shadow .4s ease}
.uh-card--contract[data-on="1"]{opacity:1;border-color:var(--uh-line2)}
.uh-steps{list-style:none;margin:0;padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.uh-step{
  display:flex;align-items:center;gap:9px;font:500 11.5px "JetBrains Mono",monospace;color:var(--uh-ink3);
  transition:color .3s ease;
}
.uh-step[data-on="1"]{color:var(--uh-ink2)}
.uh-step__box{
  width:15px;height:15px;border-radius:5px;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--uh-line2);background:transparent;color:transparent;
  font:700 9px "JetBrains Mono",monospace;transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.uh-step[data-on="1"] .uh-step__box{border-color:var(--uh-acc)}
.uh-step[data-done="1"] .uh-step__box{background:var(--uh-ok);border-color:var(--uh-ok);color:#fff}
.uh-step__val{
  margin-left:auto;font-weight:700;color:var(--uh-ink);font-variant-numeric:tabular-nums;
  max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.uh-step[data-done="0"] .uh-step__val{color:var(--uh-ink3);font-weight:500}
.uh-wire{
  height:3px;border-radius:3px;background:var(--uh-sf2);overflow:hidden;margin:2px 12px 0;
}
.uh-wire span{
  display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--uh-acc),var(--uh-acc2));transition:width .12s linear;
}
.uh-settle{
  display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--uh-line);
  font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--uh-ink3);
}
.uh-settle .uh-amt{
  margin-left:auto;font:500 19px/1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.03em;
  color:var(--uh-ink);font-variant-numeric:tabular-nums;
}
.uh-card--contract[data-settled="1"]{border-color:var(--uh-ok);box-shadow:0 0 0 3px var(--uh-ok-soft)}

/* completed trades, newest first */
.ursy-hero__ticker{
  position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;gap:5px;
  max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,32px) clamp(14px,2vw,22px);pointer-events:none;
}
.ursy-hero__line{
  display:flex;align-items:center;gap:8px;min-width:0;
  font:500 12px "JetBrains Mono",monospace;color:var(--uh-ink3);animation:uh-in .4s ease-out both;
}
.ursy-hero__line i{font-style:normal;font-weight:700;color:var(--uh-ok-text)}
.ursy-hero__line b{font-weight:700;color:var(--uh-ink2)}
.ursy-hero__line span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ursy-hero__line:nth-child(2){opacity:.58}
.ursy-hero__line:nth-child(3){opacity:.3}

@keyframes uh-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes uh-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes uh-pulse{0%,100%{opacity:1}50%{opacity:.25}}

@media (max-width:560px){
  .uh-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uh-bid{grid-template-columns:26px minmax(0,1fr) auto;gap:8px}
  .uh-bid__tag{display:none}
}
@media (prefers-reduced-motion:reduce){ .ursy-hero *{animation:none!important;transition:none!important} }
@media (prefers-color-scheme:dark){
  .ursy-hero:not([data-mode="light"]){
    --uh-bg:oklch(.15 .015 265); --uh-sf:oklch(.19 .015 265); --uh-sf2:oklch(.235 .015 265);
    --uh-ink:oklch(.96 .005 250); --uh-ink2:oklch(.76 .01 260); --uh-ink3:oklch(.62 .01 260);
    --uh-line:oklch(1 0 0/.09); --uh-line2:oklch(1 0 0/.16);
    --uh-acc-text:oklch(.82 .1 var(--uh-h1)); --uh-acc-soft:oklch(.62 var(--uh-c) var(--uh-h1)/.24);
    --uh-acc2-text:oklch(.82 .1 var(--uh-h2)); --uh-acc2-soft:oklch(.6 var(--uh-c) var(--uh-h2)/.24);
    --uh-ok-text:oklch(.82 .12 150); --uh-ok-soft:oklch(.6 .14 150/.24);
    --uh-glass:oklch(.2 .015 265/.72); --uh-shadow:0 30px 60px -40px rgba(0,0,0,.8);
  }
}
