/* RIVET · /agents costume (agents.html only, body.costume-terminal)
   The page wears a "terminal" costume, after ClickUp's /brain/skills: pure black, a static
   scanline + grain layer, Plex Mono labels and numerals, and ruled hairline grids.
   The brand does not change: Plex Sans headings, tokens from brand-tokens.css, registered duos
   only (one per bounded surface), magenta kept for the page's one conversion button.
   Motion is the UI tier (--dur-*, --ease-*); every loop pauses and stops; reduced motion
   gets the final frame. Loads after type.css. */

/* ---- 0 · Ground and the static texture --------------------------------------------- */
html[data-mode="dark"] body.costume-terminal{ background:#000; }
body.costume-terminal .bg-field{ display:none; }
body.costume-terminal .section--alt{ background:#000; }
/* Both layers are static: no sweep band, no flicker, no jitter. Scanlines add at most +3% to
   black, so slate-on-dark body text (#9A9BBD) stays AA. */
body.costume-terminal::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:2147483000;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 4px); }
body.costume-terminal::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:2147483001; opacity:.05; mix-blend-mode:overlay;
  background:url("grain.svg") repeat; background-size:180px; }
@media print{ body.costume-terminal::before, body.costume-terminal::after{ content:none; } }
/* The bento's spinner and glowing pulse were inline spans that rendered as slivers, and a
   glow is off-brand: the costume drops those two decorations (the cells keep their copy). */
.costume-terminal .bcell__viz:has(> .vz-ring, > .vz-dot){ display:none; }

/* Ruled grid: cells sit in one 1px elev-4 hairline frame with no gap between them (the
   /brain blueprint grid). The frame is a hairline, not a card border. */
.ruled{ display:grid; gap:1px; background:var(--elev-4); border:1px solid var(--elev-4); border-radius:var(--radius-card); overflow:hidden; }
.ruled > *{ background:#000; }

.costume-terminal .sec-open{ margin-bottom:0; }

/* ---- 1 · Hero: copy, the ghost 33, the shelf of packs -------------------------------- */
.costume-terminal .ahero{ background:none; padding-top:clamp(40px,3.4vw,48px); padding-bottom:clamp(32px,5vw,72px); }
.ahero .ovhero__copy{ gap:20px; }
.ahero .t-eyebrow{ color:var(--slate-on-dark); }
.ahero .t-lead-hero{ max-width:60ch; margin:0; }
.ahero .ovhero__cta{ margin-top:6px; }

.shelf{ position:relative; max-width:1180px; margin:clamp(20px,1.7vw,24px) auto 0; }
/* The ghost numeral is a graphic, not type (the web ramp tops out at 96). It sits behind the
   spine pack, raised so the top two-thirds of both 3s clear the pack tops and read as "33"
   (the glyphs run from y 47 to 214 in the 240 box). */
.shelf__ghost{ position:absolute; left:50%; top:-20px; width:400px; height:240px; translate:-50% 0; pointer-events:none; z-index:0; overflow:visible; }
.shelf__ghost text{ font-family:var(--font-mono); font-weight:500; font-size:240px; letter-spacing:-.03em; fill:var(--elev-2); }

.shelf__row{ position:relative; z-index:1; list-style:none; margin:0; padding:136px 0 0; display:flex; justify-content:center; align-items:flex-end; gap:clamp(18px,3vw,44px);
  perspective:1000px; perspective-origin:50% -40%; }
.shelf{ --k:.8; }
.pack{ --w:calc(184px * var(--k)); --h:calc(232px * var(--k)); --d:calc(58px * var(--k)); --ry:0deg; flex:none; width:var(--w); transform-style:preserve-3d; }
.pack:nth-child(1), .pack:nth-child(5){ --w:calc(176px * var(--k)); --h:calc(208px * var(--k)); }
.pack:nth-child(1), .pack:nth-child(2){ --ry:-18deg; }
.pack:nth-child(4), .pack:nth-child(5){ --ry:18deg; }
.pack--spine{ --w:calc(228px * var(--k)); --h:calc(288px * var(--k)); --d:calc(64px * var(--k)); z-index:2; }

.pack__box{ position:relative; display:block; width:var(--w); height:var(--h); transform-style:preserve-3d; color:var(--on-duo-ink); text-decoration:none; outline:none;
  rotate:y var(--ry); translate:0 0;
  transition:translate var(--dur-quick) var(--ease-standard), rotate var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard); }
.pack__front{ position:absolute; inset:0; transform:translateZ(calc(var(--d) / 2)); border-radius:6px; padding:16px 14px 18px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:start; backface-visibility:hidden; }
.pack__top{ position:absolute; left:0; top:0; width:100%; height:var(--d); background:var(--elev-3); border-radius:6px 6px 0 0; transform-origin:50% 0; transform:translateZ(calc(var(--d) / 2)) rotateX(-90deg); }
.pack__side{ position:absolute; top:0; left:calc(-1 * var(--d)); width:var(--d); height:100%; background:var(--elev-2); transform-origin:100% 50%; transform:translateZ(calc(var(--d) / 2)) rotateY(-90deg);
  display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl;
  font:500 var(--t-micro)/1 var(--font-mono); letter-spacing:var(--tr-label,.08em); text-transform:uppercase; color:var(--slate-on-dark); white-space:nowrap; overflow:hidden; }
/* the spine label sits on the inner side, the one the fan turns toward the reader */
.pack:nth-child(1) .pack__side, .pack:nth-child(2) .pack__side, .pack:nth-child(3) .pack__side{ left:100%; transform-origin:0 50%; transform:translateZ(calc(var(--d) / 2)) rotateY(90deg); }
/* Duo fronts carry the pipeline zones; the gradient runs 135deg with the anchor top-left,
   under the text. Depth, Dusk, Graphite: text anywhere. Growth, Ascent: text in the anchor half. */
.pack--depth .pack__front{ background:var(--duo-depth); }
.pack--dusk .pack__front{ background:var(--duo-dusk); }
.pack--graphite .pack__front{ background:var(--duo-graphite); }
.pack--growth .pack__front{ background:var(--duo-growth); }
.pack--ascent .pack__front{ background:var(--duo-ascent); }
/* Right to left (the Arabic twin sets html dir="rtl"): the flex row flips, so the fan, the
   inner-edge spine labels and the duo angles mirror with it. 135deg becomes 225deg so each
   anchor sits under Arabic text, which starts on the right. */
[dir="rtl"] .pack:nth-child(1), [dir="rtl"] .pack:nth-child(2){ --ry:18deg; }
[dir="rtl"] .pack:nth-child(4), [dir="rtl"] .pack:nth-child(5){ --ry:-18deg; }
[dir="rtl"] .pack:nth-child(-n+3) .pack__side{ left:calc(-1 * var(--d)); transform-origin:100% 50%; transform:translateZ(calc(var(--d) / 2)) rotateY(-90deg); }
[dir="rtl"] .pack:nth-child(n+4) .pack__side{ left:100%; transform-origin:0 50%; transform:translateZ(calc(var(--d) / 2)) rotateY(90deg); }
[dir="rtl"] .pack--depth .pack__front{ background:linear-gradient(225deg, var(--black,#000) 0%, var(--purple,#3B06D4) 100%); }
[dir="rtl"] .pack--dusk .pack__front{ background:linear-gradient(225deg, var(--slate,#4A4A68) 0%, var(--purple,#3B06D4) 100%); }
[dir="rtl"] .pack--graphite .pack__front{ background:linear-gradient(225deg, var(--black,#000) 0%, var(--slate,#4A4A68) 100%); }
[dir="rtl"] .pack--growth .pack__front{ background:linear-gradient(225deg, var(--black,#000) 0%, var(--green,#00D982) 100%); }
[dir="rtl"] .pack--ascent .pack__front{ background:linear-gradient(225deg, var(--purple,#3B06D4) 0%, var(--green,#00D982) 100%); }
.pack__k{ color:var(--on-duo-ink); }
.pack__n{ display:block; margin-top:2px; color:var(--on-duo-ink); }
.pack__t{ display:block; max-width:9ch; color:var(--on-duo-ink); font-size:var(--t-lead); line-height:1.15; }
.pack--spine .pack__t{ font-size:var(--role-card); }
.pack__box:hover, .pack__box:focus-visible{ translate:0 -6px; }
.pack__box:focus-visible .pack__front{ outline:3px solid var(--focus-ring-on-duo); outline-offset:2px; }
/* the shelf scales down as one object on narrower screens */
@media (max-width:1100px){ .shelf{ --k:.74; } .pack__front{ padding:14px 12px; } .pack__t, .pack--spine .pack__t{ font-size:var(--t-body); } }
@media (max-width:880px){ .shelf{ --k:.66; } .pack__front{ padding:12px 10px; } .pack__t, .pack--spine .pack__t{ font-size:var(--t-small); } }

/* Load: the spine rises 24px, then the side packs fade from .2 and fan out, 80ms apart.
   The start frame is gated on html.js (set in the head) so the packs never flash their final
   frame first. If agents-costume.js fails to load, the shelf-safe animation cuts to the final
   frame after 2.5s, so the shelf can never stay half-built. */
html.js .shelf:not(.is-in) .pack--spine .pack__box{ translate:0 24px; animation:shelf-safe 1ms linear 2.5s forwards; }
html.js .shelf:not(.is-in) .pack:not(.pack--spine) .pack__box{ opacity:.2; rotate:y 0deg; animation:shelf-safe 1ms linear 2.5s forwards; }
@keyframes shelf-safe{ to{ opacity:1; rotate:y var(--ry); translate:0 0; } }
.shelf.is-in:not(.is-done) .pack--spine .pack__box{ transition:translate var(--dur-slow) var(--ease-emphasized); }
.shelf.is-in:not(.is-done) .pack:not(.pack--spine) .pack__box{ transition:opacity var(--dur-base) var(--ease-standard) var(--dl), rotate var(--dur-base) var(--ease-standard) var(--dl), translate var(--dur-quick) var(--ease-standard); }
.pack:nth-child(2), .pack:nth-child(4){ --dl:var(--dur-slow); }
.pack:nth-child(1), .pack:nth-child(5){ --dl:calc(var(--dur-slow) + 80ms); }

.shelf__cap{ position:relative; z-index:1; margin:clamp(28px,3.4vw,48px) auto 0; text-align:center; color:var(--slate-on-dark); }
.shelf__cap b{ color:var(--fg); font-weight:500; }

@media (max-width:719px){
  .shelf{ margin-top:24px; }
  /* phones: the packs scroll, so the ghost 33 sits whole above the row, not behind a pack */
  .shelf__ghost{ top:0; width:234px; height:140px; }
  .shelf__row{ justify-content:flex-start; align-items:stretch; gap:12px; padding:112px var(--wrap-pad,20px) 12px; margin-inline:calc(var(--wrap-pad,20px) * -1);
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; perspective:none; }
  .shelf__row::-webkit-scrollbar{ display:none; }
  .pack, .pack:nth-child(n), .pack--spine{ --w:184px; --h:156px; transform-style:flat; scroll-snap-align:center; }
  .pack__box, html.js .shelf:not(.is-in) .pack .pack__box{ rotate:none; translate:0 0; opacity:1; transform-style:flat; animation:none; }
  .pack__top, .pack__side{ display:none; }
  .pack__front{ transform:none; padding:16px; box-shadow:inset 0 0 0 1px var(--elev-4); }
  .pack__t, .pack--spine .pack__t{ font-size:var(--t-h4); }
}

/* ---- 2 · Typed definition: one Mono statement line, the costume's own ------------------ */
.tdef{ padding-block:clamp(48px,7vw,104px); }
.typedef{ margin:0 auto; max-width:32ch; text-align:center; font:400 var(--t-h2)/1.35 var(--font-mono); letter-spacing:-.01em; color:#fff; text-wrap:balance; }
.typedef .tw{ white-space:nowrap; }
.typedef .tc{ display:inline-block; }
html.js .typedef.is-armed .tc{ opacity:0; translate:0 6px; }
html.js .typedef.is-armed.is-in .tc{ opacity:1; translate:0 0; transition:opacity var(--dur-quick) var(--ease-standard) var(--td), translate var(--dur-quick) var(--ease-standard) var(--td); }
:lang(ar) .typedef{ font-family:var(--font-arabic); line-height:1.6; letter-spacing:0; }

/* ---- 3 · How it works: three ruled steps ---------------------------------------------- */
.how__grid{ list-style:none; margin:clamp(28px,4vw,44px) 0 0; padding:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
.how__grid li{ display:flex; flex-direction:column; gap:10px; padding:clamp(22px,3vw,36px); }
.how__n{ color:var(--ink-mute); margin-bottom:clamp(8px,2vw,24px); }
.how__grid h3{ margin:0; color:var(--fg); }
.how__grid p{ margin:0; color:var(--fg-soft); max-width:36ch; }
@media (max-width:760px){ .how__grid{ grid-template-columns:1fr; } }

/* ---- 4 · Bento inside the ruled frame -------------------------------------------------- */
.bento.ruled{ gap:1px; margin-top:clamp(28px,4vw,44px); }
.bento.ruled .bcell{ border:0; border-radius:0; background:#000; padding:clamp(22px,2.6vw,32px); }
/* The two chip marquees scrolled forever with no pause (WCAG 2.2.2). The costume sets them as
   static wrapped rows and drops the repeats the loop needed. */
.bento.ruled .skillrows{ -webkit-mask-image:none; mask-image:none; overflow:visible; }
.bento.ruled .skillrow{ animation:none; width:auto; flex-wrap:wrap; }
.bento.ruled .skillrow:not(.skillrow--rev) span:nth-child(n+9), .bento.ruled .skillrow--rev span:nth-child(n+5){ display:none; }

/* ---- 6 · Stack hub --------------------------------------------------------------------- */
.hub__note{ margin:0; color:var(--fg-soft); }
.hub{ position:relative; display:block; margin:clamp(28px,4vw,44px) 0 0; padding:0; background:#000; }
.hub__stage{ position:relative; aspect-ratio:960 / 440; background:#000; }
.hub__wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hub__wires path{ fill:none; stroke:var(--slate-800); stroke-width:1; stroke-linecap:round; }
html.js .hub.is-armed .hub__wires path{ stroke-dasharray:1; stroke-dashoffset:1; }
html.js .hub.is-armed.is-in .hub__wires path{ stroke-dashoffset:0; transition:stroke-dashoffset var(--dur-slow) var(--ease-standard) var(--wd,0ms); }
.hub__dot{ fill:var(--cyan); opacity:0; }
.hub__dot.is-on{ opacity:1; }
.hub__chips{ list-style:none; margin:0; padding:0; }
.hchip{ position:absolute; left:var(--x); top:var(--y); translate:-50% -50%; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 12px;
  border-radius:999px; background:var(--elev-2); color:var(--fg); font:500 var(--t-small)/1 var(--font-sans); white-space:nowrap; }
.hchip img, .hchip svg{ flex:none; width:20px; height:20px; object-fit:contain; }
/* owner dim exception: tool marks are dim at rest and full colour when lit */
.hchip img, .hchip svg{ filter:grayscale(1); opacity:.7; transition:filter var(--dur-instant) var(--ease-standard), opacity var(--dur-instant) var(--ease-standard); }
.hchip.is-lit img, .hchip.is-lit svg, .hchip:hover img, .hchip:hover svg{ filter:none; opacity:1; }
.hchip--crm svg{ color:var(--cyan); }
.hchip em{ font-style:normal; color:var(--purple-on-dark); }
.hub__core{ position:absolute; left:50%; top:50%; translate:-50% -50%; }
.hub__mark{ display:grid; place-items:center; width:96px; height:96px; border-radius:var(--radius-base); background:var(--elev-2); }
.hub__mark img{ width:38px; height:auto; }
.hub__pill > span{ white-space:nowrap; }
.hub__pill{ position:absolute; top:calc(100% + 16px); left:50%; translate:-50% 0; white-space:nowrap; padding:6px 12px; border-radius:999px; background:var(--scrim);
  border:1px dashed var(--slate-700); color:var(--fg-soft); }
.hub__cap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:0; padding:14px 20px; border-top:1px solid var(--elev-4); padding-inline-end:120px; }
.hub__cap .t-micro{ color:var(--slate-on-dark); }
.hub__cap .t-small{ color:var(--fg-soft); }
.hub .loopctl{ position:absolute; inset-inline-end:14px; bottom:10px; }
@media (max-width:899px){
  .hub__stage{ aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; gap:28px; padding:32px 16px 28px; }
  .hub__wires{ display:none; }
  .hub__core{ position:relative; left:auto; top:auto; translate:none; order:-1; }
  .hub__pill{ position:static; translate:none; display:block; margin-top:14px; white-space:normal; text-align:center; max-width:100%; }
  .hub__core{ display:flex; flex-direction:column; align-items:center; }
  .hub__chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
  .hchip{ position:static; translate:none; }
  .hub__cap{ padding-inline-end:20px; }
  .hub .loopctl{ display:none; }
}

/* Loop control (WCAG 2.2.2): every loop over 5s has a visible pause. */
.loopctl{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:0; border-radius:999px; background:var(--elev-2); color:var(--fg-soft); cursor:pointer;
  font:500 var(--t-micro)/1 var(--font-mono); letter-spacing:var(--tr-label,.08em); text-transform:uppercase; }
.loopctl[hidden]{ display:none; }
.loopctl:hover{ background:var(--elev-3); color:var(--fg); }
.loopctl:focus-visible, .cf__btn:focus-visible, .cf__dots button:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.loopctl .loopctl__play, .loopctl[aria-pressed="true"] .loopctl__pause{ display:none; }
.loopctl[aria-pressed="true"] .loopctl__play{ display:inline; }

/* ---- 7 · Inside RIVET Labs: images keep the shadow, lose the border -------------------- */

/* ---- 8 · Roadmap: two tilted notes ---------------------------------------------------- */
.road__notes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,40px); align-items:start; margin-top:clamp(28px,4vw,44px); padding-inline:clamp(0px,1vw,12px); }
.note{ display:flex; flex-direction:column; gap:12px; padding:clamp(22px,3vw,32px); border-radius:var(--radius-card); background:var(--elev-2); rotate:-1.5deg;
  transition:translate var(--dur-quick) var(--ease-standard); }
.note--b{ rotate:1deg; }
.note:hover, .note:focus-within{ translate:0 -4px; }
html.js .ovpart .note[data-reveal], html.js .note[data-reveal]{ opacity:0; transform:scale(.96); transition:opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), translate var(--dur-quick) var(--ease-standard); }
html.js .note[data-reveal].in{ opacity:1; transform:none; }
.note__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.note__top .t-meta{ margin:0; color:var(--slate-on-dark); }
.soon{ padding:4px 10px; border:1px dashed var(--slate-600); border-radius:999px; color:var(--fg-soft); }
.note h3{ margin:0; color:var(--fg); }
.note > p{ margin:0; color:var(--fg-soft); }
.note .btn{ align-self:flex-start; margin-top:6px; }
.note__list{ list-style:none; margin:4px 0 0; padding:0; display:grid; }
.note__list li{ display:grid; gap:4px; padding:14px 0; border-top:1px solid var(--elev-4); }
.note__list li:last-child{ padding-bottom:0; }
.note__list b{ color:var(--fg); font-weight:600; }
.note__list span{ color:var(--fg-soft); font-size:var(--t-small); line-height:var(--lh-small,1.5); }
.note__list a{ justify-self:start; margin-top:2px; color:var(--purple-on-dark); text-decoration:none; }
.note__list a:hover{ text-decoration:underline; }
@media (max-width:820px){ .road__notes{ grid-template-columns:1fr; } .note, .note--b{ rotate:none; } }

/* ---- 9 · Closer: a person, a rosette, a tag ------------------------------------------- */
.ovcta.ovcta--human{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px); border:0; border-radius:var(--radius-base); background:var(--elev-1); }
.ovcta.ovcta--human::after{ content:none; }
.closer__art{ position:relative; justify-self:center; width:min(340px,100%); }
.closer__photo, .closer__photo img{ display:block; width:100%; height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover; }
.rosette{ position:absolute; inset-inline-end:-8%; top:2%; width:clamp(112px,40%,140px); aspect-ratio:1; display:grid; place-items:center; }
.rosette svg{ position:absolute; inset:0; width:100%; height:100%; }
.rosette__t{ position:relative; max-width:76%; text-align:center; line-height:1.35; color:var(--on-duo-ink); text-wrap:balance; }
.closer__tag{ position:absolute; inset-inline-start:2%; bottom:10%; padding:7px 12px; border-radius:6px; background:#000; color:#fff; white-space:nowrap; }
.closer__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.closer__copy h2{ margin:0; }
.closer__copy .t-lead{ margin:0; max-width:52ch; color:var(--fg-soft); }
.closer__copy .ovcta__prereq{ margin:0; }
.ovcta--human .ovcta__actions{ flex-direction:row; flex-wrap:wrap; gap:12px; margin-top:8px; }
@media (max-width:820px){
  .ovcta.ovcta--human{ grid-template-columns:1fr; }
  .closer__art{ width:min(260px,72%); }
}

/* ---- Reduced motion: final frames, no entrances, no travel --------------------------- */
@media (prefers-reduced-motion:reduce){
  .pack__box, .note, .hchip img, .hchip svg{ transition:none !important; }
  html.js .shelf:not(.is-in) .pack .pack__box{ translate:0 0; opacity:1; rotate:y var(--ry); animation:none; }
  html.js .typedef.is-armed .tc{ opacity:1; translate:0 0; transition:none; }
  html.js .hub.is-armed .hub__wires path{ stroke-dashoffset:0; transition:none; }
  html.js .note[data-reveal]{ opacity:1; transform:none; transition:none; }
  .pack__box:hover, .pack__box:focus-visible, .note:hover, .note:focus-within{ translate:0 0; }
}