/* ─────────────────────────────────────────────────────────────
   What We Do — page-specific components and diagram animations.
   Builds on assets/site.css; adds no new brand colours.
   ───────────────────────────────────────────────────────────── */

/* ── Service block scaffolding ────────────────────────────── */
.svc{ position:relative; padding-top:5.5rem; padding-bottom:5.5rem; }
@media (min-width:1024px){ .svc{ padding-top:7.5rem; padding-bottom:7.5rem; } }

.svc--alt{ background:var(--surface-elevated); }
.svc + .svc{ border-top:1px solid var(--hairline); }

/* Oversized outlined index numeral */
.svc-num{
  font-family:"Space Grotesk", sans-serif;
  font-weight:700;
  font-size:clamp(3.5rem, 9vw, 6.5rem);
  line-height:.8;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px color-mix(in oklab, var(--sig) 55%, transparent);
  user-select:none;
}

/* The diagram column is shorter than the prose column, which would leave a
   long void beside the copy. Pin it so it stays in view while the service
   text is read. Scoped to .svc so the page hero is unaffected. */
@media (min-width:1024px){
  .svc .svc-visual{
    position:sticky;
    top:100px;
    align-self:start;
  }
}

/* ── Diagram frame ────────────────────────────────────────── */
.diagram{
  position:relative;
  background:var(--surface-floating);
  border:1px solid var(--hairline);
  padding:1.5rem;
}
@media (min-width:1024px){ .diagram{ padding:2rem; } }

.diagram-cap{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1.5rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--hairline);
}

/* ── Deliverable list ─────────────────────────────────────── */
.delivers{ display:grid; gap:0; }
.delivers li{
  display:flex; gap:1rem;
  padding:1.05rem 0;
  border-bottom:1px solid var(--hairline);
}
.delivers li:first-child{ border-top:1px solid var(--hairline); }
.delivers .k{
  font-family:"IBM Plex Mono", monospace;
  font-size:.6875rem; color:var(--sig);
  padding-top:.28rem; flex:none; width:1.9rem;
}

/* ── AI / predictive callout ──────────────────────────────── */
.ai-note{
  position:relative;
  border:1px solid color-mix(in oklab, var(--sig) 34%, transparent);
  background:linear-gradient(115deg, rgba(55,179,74,.09), transparent 62%);
  padding:1.4rem 1.5rem;
}
.ai-note::before{
  content:'';
  position:absolute; left:-1px; top:-1px; bottom:-1px;
  width:2px; background:var(--sig);
}

/* ── Proxied client chips ─────────────────────────────────── */
.client-chip{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:1rem 1.15rem;
  border:1px solid var(--hairline);
  background:var(--surface-base);
  transition:border-color .45s var(--ease-out), transform .45s var(--ease-spring);
}
.svc--alt .client-chip{ background:var(--surface-elevated); }
.client-chip:hover{ border-color:color-mix(in oklab, var(--sig) 45%, transparent); transform:translateY(-2px); }
.client-chip .dot{
  width:6px; height:6px; margin-top:.55rem;
  background:var(--sig); flex:none;
}

/* ── Image placeholder slot ───────────────────────────────── */
.imgslot{
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.7rem;
  text-align:center;
  padding:2rem 1.5rem;
  border:1px dashed color-mix(in oklab, var(--steel) 62%, transparent);
  background:
    repeating-linear-gradient(135deg,
      rgba(229,229,229,.018) 0 12px,
      transparent 12px 24px),
    var(--surface-elevated);
  color:var(--tag-ink);
}
.imgslot::after{
  content:'';
  position:absolute; inset:.5rem;
  border:1px solid var(--hairline);
  pointer-events:none;
}

/* ═══════════════ Diagram animations ═══════════════════════ */
/* Each runs only once the diagram scrolls into view (.in). */

/* Travelling part on a line */
.part{ opacity:0; }
.in .part{ animation:partflow 4.4s linear infinite; }
@keyframes partflow{
  0%   { opacity:0; transform:translateX(0); }
  4%   { opacity:1; }
  96%  { opacity:1; }
  100% { opacity:0; transform:translateX(var(--travel, 560px)); }
}

/* Station scan beam */
.beam{ transform-origin:center; opacity:.0; }
.in .beam{ animation:beamsweep 4.4s ease-in-out infinite; }
@keyframes beamsweep{
  0%,42%,58%,100%{ opacity:0; }
  48%,52%{ opacity:.85; }
}

/* Bar growth */
.gbar{ transform:scaleY(0); transform-origin:bottom; }
.in .gbar{ animation:grow 1s var(--ease-spring) forwards; }
@keyframes grow{ to{ transform:scaleY(1); } }

/* Horizontal bar growth (SVG width) */
.wbar{ transform:scaleX(0); transform-origin:left; }
.in .wbar{ animation:growx 1.1s var(--ease-spring) forwards; }
@keyframes growx{ to{ transform:scaleX(1); } }

/* Radial sweep */
.in .sweep{ animation:spin 6s linear infinite; transform-origin:center; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Node pulse */
.in .pnode{ animation:pnode 3s ease-in-out infinite; }
@keyframes pnode{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

/* Heatmap cell reveal */
.cell{ opacity:0; }
.in .cell{ animation:cellin .55s var(--ease-out) forwards; }
@keyframes cellin{ to{ opacity:1; } }

/* Defect marker pop */
.mark{ opacity:0; transform-box:fill-box; transform-origin:center; }
.in .mark{ animation:markpop .6s var(--ease-spring) forwards; }
@keyframes markpop{ from{ opacity:0; transform:scale(.2); } to{ opacity:1; transform:scale(1); } }

/* Dashed path draw */
.draw{ stroke-dasharray:1200; stroke-dashoffset:1200; }
.in .draw{ animation:drawline 2.6s var(--ease-out) forwards; }
@keyframes drawline{ to{ stroke-dashoffset:0; } }

/* Lidar cone sweep for the AMR map */
.lidar{ transform-origin:center; }
.in .lidar{ animation:lidar 3.4s ease-in-out infinite; }
@keyframes lidar{
  0%,100%{ transform:rotate(-42deg); }
  50%    { transform:rotate(42deg); }
}

/* Stack layer slide-in */
.layer{ opacity:0; transform:translateX(-14px); }
.in .layer{ animation:layerin .7s var(--ease-spring) forwards; }
@keyframes layerin{ to{ opacity:1; transform:none; } }

/* Flowing energy stream */
.stream{ stroke-dasharray:5 7; }
.in .stream{ animation:streamflow 1.4s linear infinite; }
@keyframes streamflow{ to{ stroke-dashoffset:-24; } }

@media (prefers-reduced-motion: reduce){
  .part,.beam,.gbar,.wbar,.cell,.mark,.draw,.layer{
    opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important;
    animation:none !important;
  }
  .in .sweep,.in .pnode,.in .lidar,.in .stream,.in .part,.in .beam{ animation:none !important; }
}