/* =====================================================================
   The argument — a sliding outline crossing each paragraph as it arrives.

   Not a filled block sweeping over the type: a hairline frame drawn in
   from the left, crossing, and clearing off the right. Nothing is
   filled, nothing is knocked out to paper, nothing washes over the copy.

   NOTHING HERE HIDES ANYTHING BY ITSELF. Every rule that starts an
   element invisible is scoped to .js-argue, which include/argue.js adds
   only once it has decided it is going to run. With JavaScript off, or
   with reduced motion on, the whole argument is simply present.
   ===================================================================== */

.argue{
  /* Warmer and more luminous than the ink rust, because this is a light
     crossing the page rather than a mark made on it. Pushed any brighter
     it tips into neon. */
  --frame: hsl(15 80% 47%);
  --argue-in: cubic-bezier(.2,.8,.25,1);
}

/* ---- the legend ------------------------------------------------------
   Three token colours, and each is a real distinction in the argument
   rather than decoration. The bar exists so that is legible. */
.argue__legend{
  position: sticky;
  top: 92px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 11px 0;
  margin: 0 0 40px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.argue__legend b{ font-weight: 500; }
.argue__key{ display: inline-flex; align-items: center; gap: 8px; }
.argue__key i{ width: 9px; height: 9px; display: block; font-style: normal; }

/* The tokens themselves. */
.t-plat{ color: var(--accent); }              /* the platform and products */
.t-fig { color: #97690F; font-variant-numeric: tabular-nums; }  /* the figures */
.t-ops { color: #1D6B66; }                    /* the operations they run */
.k-plat{ background: var(--accent); }
.k-fig { background: #97690F; }
.k-ops { background: #1D6B66; }

@media (prefers-color-scheme: dark){
  .t-fig, .k-fig{ color: #D8A73A; }
  .k-fig{ background: #D8A73A; }
  .t-ops, .k-ops{ color: #57B3AC; }
  .k-ops{ background: #57B3AC; }
}
:root[data-theme="dark"] .t-fig{ color: #D8A73A; }
:root[data-theme="dark"] .t-ops{ color: #57B3AC; }
:root[data-theme="dark"] .k-fig{ background: #D8A73A; }
:root[data-theme="dark"] .k-ops{ background: #57B3AC; }

/* ---- the block ------------------------------------------------------- */
.blk{ position: relative; }

/* The frame must default to opacity 0, not merely be clipped. Clipped
   alone it paints once in full before its animation applies, which is a
   flash of a complete orange box around the paragraph. */
.blk__frame{
  position: absolute;
  inset: -0.55rem -0.8rem;
  border: 1.5px solid var(--frame);
  border-radius: 0;          /* square: a rounded rust box reads as a chip */
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
.js-argue .blk.is-in .blk__frame{
  animation: argue-cross 1500ms forwards;
}

/* THE ONE THAT MATTERS.

   A timing function applies between EVERY pair of keyframes, not across
   the whole animation. A single symmetrical curve therefore decelerates
   into the 50% mark and accelerates out of it — a visible hitch at
   exactly the moment the frame is fully drawn.

   Splitting it means the first half finishes at full speed and the
   second half starts at full speed. The velocities match where they
   meet, so it accelerates in, runs level through the middle and settles
   away: one continuous gesture. No hold at the midpoint. */
@keyframes argue-cross{
  0%{
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    animation-timing-function: cubic-bezier(.4, 0, 1, 1);
  }
  50%{
    opacity: 1;
    clip-path: inset(0 0 0 0);
    animation-timing-function: cubic-bezier(0, 0, .25, 1);
  }
  100%{
    opacity: 1;
    clip-path: inset(0 0 0 100%);
  }
}

/* The copy is deliberately NOT tied to the frame. It just arrives. Tying
   it to the frame's edge makes a long paragraph read far too slowly, and
   the frame becomes a progress bar for reading. */
.js-argue .blk > p,
.js-argue .blk > .argue__rows{ opacity: 0; }
.js-argue .blk.is-in > p,
.js-argue .blk.is-in > .argue__rows{
  animation: argue-rise 540ms var(--argue-in) 60ms forwards;
}
@keyframes argue-rise{
  from{ opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: none; }
}

/* Headings get no frame. */
.argue h2{ position: relative; }

/* ---- the closing industry rows ---------------------------------------- */
.argue__rows{
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.argue__rows li{
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
}
.argue__rows li::before{
  content: "\2192";
  color: var(--accent);
}
.argue__rows b{ color: var(--text); font-weight: 600; }

@media (prefers-reduced-motion: reduce){
  .js-argue .blk > p,
  .js-argue .blk > .argue__rows{ opacity: 1; animation: none; transform: none; }
  .blk__frame{ display: none; }
}