/* /platform page-local rules: the custody orb (the old homepage's vault hero, compact) as the page header's visual.
   The drawing, its motion and its words are the old hero's (home-engine.js / index.html at 0c83134); only the frame,
   the type and the colours are the new site's. The engine is /assets/pages/platform-orb.js; it reads the ring's size and
   centre from .orb-dial's box, so this file is the one source of the geometry (no layout is ever set from script). */

/* ── the stage ──
   --oh     the stage's height (desktop: the height of the lede, the ask and the facts beside it, at most 480px)
   --or     the ring's radius: the old hero's R was .26 x its height; here it is what fits the stage (cq units: the stage)
   --dr     the dial's radius (the old dial was 1.1325 R)
   --ocx / --ocy  the ring's centre in the stage
   --bleed  how far the stage runs past the column on the right: to the screen's edge, as the old hero's lanes did (the
            page header clips it, so the page never scrolls sideways) */
.orb{--oh:300px;--or:clamp(60px,min(30cqh,26cqw),150px);--dr:calc(var(--or) * 1.1325);--ocx:max(calc(var(--dr) + 20px),28%);--ocy:50%;
  --bleed:calc(var(--pad) + max(0px,(100vw - 1440px) / 2));
  position:relative;margin:40px 0 0;min-width:0}
.orb-stage{position:relative;height:var(--oh);margin-right:calc(-1 * var(--bleed));container-type:size;isolation:isolate}
/* the vault's own night behind the ring: the old hero stood on a darker ground than this header's violet, and its
   filaments need it; the violet bloom is the old hero's */
.orb-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at var(--ocx) var(--ocy),rgba(96,70,235,.30),rgba(96,70,235,0) min(calc(var(--or) * 1.9),var(--ocx))),
    radial-gradient(ellipse calc(var(--ocx) + var(--or) * .7) 47% at calc(var(--ocx) + var(--or) * .7) var(--ocy),rgba(9,6,22,.74),rgba(9,6,22,.56) 30%,rgba(9,6,22,.24) 66%,rgba(9,6,22,0) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px),linear-gradient(180deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 28px),linear-gradient(180deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-composite:intersect}
/* the stream enters through a soft edge (it starts at the stage's side, not at the screen's) */
.orb-stage canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px),linear-gradient(180deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 28px),linear-gradient(180deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-composite:intersect}

/* ── the silo dial (the old hero's SVG, verbatim) ── */
.orb-dial{position:absolute;z-index:2;left:var(--ocx);top:var(--ocy);width:calc(var(--dr) * 2);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  view-timeline:--orb-v block}
.orb-dial svg{display:block;width:100%;height:100%;overflow:visible}
.orb-dial .dt,.orb-dial .dt2{stroke:rgba(243,238,228,.26);stroke-width:.22}
.orb-dial .dt-mj{stroke:#8F7BFF;stroke-width:.42;opacity:.95}
.orb-dial .dt2-mj{stroke:rgba(243,238,228,.5);stroke-width:.3}
.orb-dial .dial-rim{fill:none;stroke:rgba(243,238,228,.09);stroke-width:.18}
.orb-dial .dial-ok{fill:none;stroke:#43D69A;stroke-width:.7;stroke-linecap:round;opacity:.95}
.orb-dial .dial-idx{fill:var(--lilac)}
.orb-dial .dial-r1,.orb-dial .dial-r2{transform-origin:50% 50%;transform-box:view-box}
/* the dial turns with scroll where the browser can tie it to scroll, and drifts slowly where it cannot (as on the old hero) */
@supports (animation-timeline: view()){
  .orb-dial .dial-r1{animation:orbTurn linear both;animation-timeline:--orb-v;animation-range:cover 0% cover 100%}
  .orb-dial .dial-r2{animation:orbTurnB linear both;animation-timeline:--orb-v;animation-range:cover 0% cover 100%}
}
@supports not (animation-timeline: view()){
  .orb-dial .dial-r1{animation:orbDrift 110s linear infinite}
  .orb-dial .dial-r2{animation:orbDriftB 150s linear infinite}
}
@keyframes orbTurn{to{transform:rotate(210deg)}}
@keyframes orbTurnB{to{transform:rotate(-140deg)}}
@keyframes orbDrift{to{transform:rotate(360deg)}}
@keyframes orbDriftB{to{transform:rotate(-360deg)}}

/* ── the drawn annotations: the instrument explains itself (the old hero's lettering, set in Onest) ── */
.orb-ann{position:absolute;z-index:3;display:flex;font:600 10px/1.15 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  color:rgba(243,238,228,.55);text-shadow:0 0 8px rgba(9,6,22,1),0 0 3px rgba(9,6,22,1),0 0 1px rgba(9,6,22,1);opacity:0;animation:orbAnnIn 1.1s ease 1.9s forwards;pointer-events:none}
@keyframes orbAnnIn{to{opacity:1}}
/* under the sealed core, straddling its edge (the old hero: .5 R below the centre) */
.orb-core{left:var(--ocx);top:calc(var(--ocy) + var(--or) * .36);transform:translateX(-50%);flex-direction:column;align-items:center;gap:2px;text-align:center;letter-spacing:.24em;color:rgba(243,238,228,.52)}
.orb-core em{font-style:normal;color:rgba(243,238,228,.78)}
.orb-core .uh{color:rgba(145,230,198,.9);letter-spacing:.14em;margin-top:2px}
/* the buyers' dot, drawn: the character U+25CF is in none of the site's faces, so a glyph fell back to a different system
   font on every platform. The glyph's size and place (within 1px at 1440 and 390 wide) and its dark halo, in the legend's
   own colour; a radial gradient, so a box of a fractional size is still drawn round (a border-radius circle of .54em
   was rasterised as a 4x5 oval at 390px) */
.orb-core .uh-d{display:inline-block;width:.54em;height:.54em;margin-right:.66em;vertical-align:0;background:radial-gradient(circle closest-side,currentColor 92%,transparent 100%);filter:drop-shadow(0 0 2px rgba(9,6,22,1))}
/* the lanes' label: at their far end by the screen's edge, just above the top lane (the old hero: right 2.5%, .81 R above
   the centre), in two lines; its hairline leads into "400 sorted lanes" as the old one led into the label */
.orb-lanes{right:14px;bottom:calc(100% - var(--ocy) + var(--or) * .84);flex-direction:column;align-items:flex-end;gap:4px;letter-spacing:.16em}
.orb-lanes span{display:flex;align-items:center;gap:10px;color:rgba(145,230,198,.82)}
.orb-lanes i{display:block;height:1px;width:44px;flex:none;background:linear-gradient(90deg,rgba(67,214,154,0),rgba(67,214,154,.6))}
@container (max-width: 440px){ .orb-ann{font-size:9px} .orb-lanes{letter-spacing:.1em} .orb-lanes i{width:30px} .orb-core{letter-spacing:.2em;gap:2px} .orb-core .uh{letter-spacing:.1em} }
/* a smaller ring has no room for three lines on its edge (the gap under the core is .3 R; the label is ~40px, so it
   needs R of about 120px: a 480px-tall stage at least ~460px wide): the label runs under the ring instead, in two lines, where it never covers the band (the old hero hid it below 1080px) */
@container (max-width: 460px) or (max-height: 320px){
  .orb-core{top:calc(var(--ocy) + var(--dr) + 7px);flex-flow:row wrap;justify-content:center;gap:3px .6em;width:max-content;max-width:calc(2 * var(--ocx))}
  .orb-core .uh{flex-basis:100%;margin-top:0}
}

/* ── the readout: custody flow, live model (the old hero's instrument strip, in the site's row grammar) ──
   under the stage on a tablet or a phone; on desktop, one slim row under the lede and the orb, as the old strip ran */
.orb-read{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"note live" "counts counts";align-items:center;gap:12px 18px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
/* laser edge: a light streak sweeps the readout's top hairline (the old strip's) */
.orb-read::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(193,170,255,.95) 45%,rgba(145,230,198,.9) 55%,transparent) no-repeat;background-size:220px 1px;background-position:-220px 0;
  animation:orbSweep 7s ease-in-out 2.2s infinite}
@keyframes orbSweep{0%{background-position:-220px 0}55%{background-position:calc(100% + 220px) 0}100%{background-position:calc(100% + 220px) 0}}
.orb-note{grid-area:note;font:600 14px/1.35 var(--f-sans);letter-spacing:.02em;color:var(--acc)}
.orb-live{grid-area:live;display:flex;align-items:center;gap:8px;font:600 14px/1.35 var(--f-sans);color:var(--ok);white-space:nowrap}
.orb-live svg{display:block;flex:none}
.orb-live .ring{stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-dasharray:44;stroke-dashoffset:44;animation:orbDraw 1s cubic-bezier(.16,1,.3,1) 1.9s forwards}
.orb-live .tick{stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;animation:orbDraw .45s ease 2.7s forwards}
@keyframes orbDraw{to{stroke-dashoffset:0}}
.orb-counts{grid-area:counts;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.orb-counts>div{display:flex;flex-direction:column;min-width:0;padding:0 11px;border-left:1px solid var(--rule)}
.orb-counts>div:first-child{padding-left:0;border-left:0}
.orb-counts dd{order:1;font-family:var(--f-head);font-weight:450;font-size:28px;line-height:1;letter-spacing:-.01em;color:var(--head);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.orb-counts dt{order:2;margin-top:7px;font:500 14px/1.3 var(--f-sans);color:var(--label)}

/* paused with the canvas (off screen, or the tab hidden): the endless loops stop too */
.orb.is-paused .dial-r1,.orb.is-paused .dial-r2,.orb-read.is-paused::before{animation-play-state:paused}

/* ── desktop: beside the lede, under the full-width title ──
   The title keeps the full column; the lede, the ask and the facts take the left of the row and the orb the rest,
   running to the screen's edge. The stage is exactly as tall as that text (at most 480px), so it adds no height of its
   own; the readout follows as one row. Only where the column holds both: the site's grid narrows the column at 1200px
   (the rail widens), so from 1200 to 1299px the orb sits under the ask, as on a tablet. */
@media (min-width:1140px) and (max-width:1199px),(min-width:1300px){
  .orb-host{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,40%,420px);column-gap:28px;align-items:start}
  .orb-host>*{grid-column:1/-1}
  .orb-host>.lede,.orb-host>.ph-ctas,.orb-host>.facts{grid-column:1}
  .orb-host>.sh{grid-row:1}
  .orb-host>.lede:nth-of-type(1){grid-row:2}
  .orb-host>.lede:nth-of-type(2){grid-row:3}
  .orb-host>.ph-ctas{grid-row:4}
  .orb-host>.facts{grid-row:5}
  .orb-host>.orb{grid-column:2;grid-row:2/6;align-self:stretch;display:flex;flex-direction:column;justify-content:center;margin:28px 0 0 -22px}
  .orb-host>.orb .orb-stage{height:min(100%,480px)}
  .orb-host>.orb-read{grid-row:6;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"note counts live";gap:0 22px;margin-top:36px;padding-top:16px}
  .orb-host>.orb-read .orb-counts{grid-template-columns:repeat(4,auto);justify-content:start}
  .orb-host>.orb-read .orb-counts>div{padding:0 18px}
  .orb-host>.orb-read .orb-counts>div:first-child{padding-left:18px;border-left:1px solid var(--rule)}
  .orb-host>.index{grid-row:7}
}
/* 1300-1379px: the column is too narrow for the readout in one row, so it takes the tablet's two (no label wraps) */
@media (min-width:1300px) and (max-width:1379px){
  .orb-host>.orb-read{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"note live" "counts counts";gap:12px 18px}
  .orb-host>.orb-read .orb-counts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .orb-host>.orb-read .orb-counts>div{padding:0 14px}
  .orb-host>.orb-read .orb-counts>div:first-child{padding-left:0;border-left:0}
}
@media (min-width:1140px) and (max-width:1199px){
  .orb-host>.orb-read .orb-counts>div{padding:0 13px}
  .orb-host>.orb-read .orb-counts>div:first-child{padding-left:13px}
  .orb-host>.orb-read{gap:0 16px}
  .orb-host>.orb-read .orb-counts dt{font-size:13.5px}
}

/* ── phone: small (at most 260px), and still until it is on screen ──
   The ring sits a little high so the core's label fits under it. The readout wraps: note and attestation on one line
   where they fit, the counts under them */
@media (max-width:699px){
  .orb{--oh:236px;--or:68px;--ocx:max(calc(var(--dr) + 16px),26%);--ocy:45%;--bleed:18px;margin-top:34px}
  .orb-read{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:10px;gap:6px 12px}
  .orb-note,.orb-live{font-size:13px}
  .orb-counts{order:3;flex-basis:100%;margin-top:6px}
  .orb-counts>div{padding:0 8px}
  .orb-counts dd{font-size:23px}
  .orb-counts dt{margin-top:6px;font-size:12.5px}
}

@media (prefers-reduced-motion: reduce){
  .orb-dial .dial-r1,.orb-dial .dial-r2{animation:none}
  .orb-ann{animation:none;opacity:1}
  .orb-read::before{animation:none;display:none}
  .orb-live .ring,.orb-live .tick{animation:none;stroke-dashoffset:0}
}