/* ==========================================================================
   Piece 02 — Capabilities
   Seven practices as full-bleed editorial rows, not a card grid.
   Ambient motion: the procedural isometric lattice (21s, seamless).
   ========================================================================== */

.cap{position:relative;overflow:hidden}

/* --- The living lattice ------------------------------------------------- */
.cap-field{
  position:absolute;top:0;left:0;right:0;
  height:min(760px,78vh);
  pointer-events:none;
  opacity:.62;
  /* Terminating edge, not a dissolve. design-system.md section 4 (amended):
     artwork is bounded, never atmospheric. The field is clipped by its own
     container and closed with a hairline instead of fading into the page. */
  overflow:hidden;
  border-bottom:1px solid var(--hairline);
}
.cap-field canvas{width:100%;height:100%;display:block}

/* --- Header ------------------------------------------------------------- */
.cap-head{position:relative;padding-top:24px}
.cap-title{margin-top:28px;max-width:16ch}
.cap-intro{
  margin-top:32px;
  max-width:58ch;
  margin-left:auto;
  padding-left:var(--gutter);
  border-left:1px solid var(--hairline);
}
@media (min-width:1100px){
  .cap-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);
            gap:var(--gutter);align-items:end}
  .cap-head .t-meta--tick{grid-column:1/-1}
  .cap-title{grid-column:1;margin-top:28px}
  .cap-intro{grid-column:2;margin-top:0;margin-bottom:10px}
}

/* --- Rows --------------------------------------------------------------- */
.cap-rows{
  position:relative;
  margin-top:clamp(72px,10vw,140px);
  border-top:1px solid var(--hairline);
}
.cap-rows > li{border-bottom:1px solid var(--hairline)}

.cap-row{
  position:relative;
  display:grid;
  grid-template-columns:56px 64px minmax(0,1fr) minmax(0,1.05fr) 32px;
  gap:var(--gutter);
  align-items:center;
  padding-block:clamp(26px,3.2vw,40px);
  color:var(--primary);
  transition:background var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
/* Violet edge rule — appears only on the hovered row, so the resting page
   never carries more than the eyebrow tick in violet. */
.cap-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--violet-lit);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform var(--dur) var(--ease);
}
.cap-row:hover{background:var(--wall)}
.cap-row:hover::before,.cap-row:focus-visible::before{transform:scaleY(1)}

.cap-idx{color:var(--muted);transition:color var(--dur) var(--ease)}
.cap-row:hover .cap-idx{color:var(--violet-lit)}

.cap-glyph{
  width:48px;height:48px;color:var(--muted);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.cap-glyph svg{width:48px;height:48px}
.cap-row:hover .cap-glyph{color:var(--violet-lit);transform:translateY(-3px)}

/* Trace runs and the Breach closes — both only while the row is engaged */
.gl-trace{stroke-dasharray:5 5;stroke-dashoffset:0}
.cap-row:hover .gl-trace{animation:trace-run var(--loop-a) linear infinite}
.cap-row:hover .gl-breach{stroke-dasharray:3 3;animation:breathe var(--loop-a) var(--ease) infinite}

.cap-name{letter-spacing:-.03em;transition:transform var(--dur) var(--ease)}
.cap-row:hover .cap-name{transform:translateX(6px)}

.cap-desc{color:var(--muted);transition:color var(--dur) var(--ease)}
.cap-row:hover .cap-desc{color:var(--secondary)}

.cap-arrow{
  width:24px;height:24px;color:var(--muted);justify-self:end;
  transition:transform var(--dur) var(--ease),color var(--dur) var(--ease);
}
.cap-row:hover .cap-arrow{transform:translateX(6px);color:var(--primary)}

/* --- Responsive --------------------------------------------------------- */
@media (max-width:1100px){
  .cap-row{grid-template-columns:44px 44px minmax(0,1fr) 24px;row-gap:14px}
  .cap-glyph,.cap-glyph svg{width:44px;height:44px}
  .cap-name{grid-column:3/4}
  .cap-desc{grid-column:3/4;grid-row:2}
  .cap-arrow{grid-column:4;grid-row:1}
}
@media (max-width:640px){
  .cap-row{grid-template-columns:40px minmax(0,1fr) 20px;row-gap:12px;gap:14px}
  .cap-glyph{grid-column:1;grid-row:2}
  .cap-glyph,.cap-glyph svg{width:40px;height:40px}
  .cap-name{grid-column:2;grid-row:1}
  .cap-desc{grid-column:2;grid-row:2}
  .cap-arrow{grid-column:3;grid-row:1}
  .cap-field{height:min(520px,64vh)}
  .cap-intro{padding-left:16px}
}

/* Motion off / reduced motion: the lattice holds a composed frame,
   handled by the engine. Glyph animations simply stop. */
.motion-off .gl-trace,.motion-off .gl-breach{animation:none !important}