/* ============================================================
   INCUSON — Technical illustration system
   Line tokens + blueprint frames + draw-on-scroll classes.
   Pairs with illustrations.js. Color follows foreground via
   currentColor, so it is automatically theme-aware.
   ============================================================ */

.tech-illo { color: var(--paper); width: 100%; height: auto; display: block; overflow: visible; }
.tech-illo .ln {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.tech-illo .ln.heavy { stroke-width: 2.2; }
.tech-illo .thin {
  fill: none; stroke: currentColor; stroke-width: 0.9; opacity: 0.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.tech-illo .con {
  fill: none; stroke: currentColor; stroke-width: 0.9; opacity: 0.4;
  stroke-dasharray: 3 5; stroke-linecap: round;
}
.tech-illo .cyan-ln  { stroke: var(--cyan); }
.tech-illo .ember-ln { stroke: var(--ember); }
.tech-illo .dot-cyan  { fill: var(--cyan); }
.tech-illo .dot-ember { fill: var(--ember); }
.tech-illo .fillpart  { fill: var(--cyan); opacity: 0.10; }
.tech-illo .tlabel {
  fill: currentColor; opacity: 0.5;
  font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.06em;
}

/* Non-line elements (construction, labels, accent dots, fills) fade in
   after the structure strokes in. Stroke draw itself is JS-driven. */
.tech-draw .con, .tech-draw .thin, .tech-draw .tlabel,
.tech-draw .dot-cyan, .tech-draw .dot-ember, .tech-draw .fillpart {
  opacity: 0; transition: opacity 0.7s ease 0.85s;
}
.tech-draw.in-view .con { opacity: 0.4; }
.tech-draw.in-view .thin { opacity: 0.5; }
.tech-draw.in-view .tlabel { opacity: 0.5; }
.tech-draw.in-view .fillpart { opacity: 0.10; }
.tech-draw.in-view .dot-cyan, .tech-draw.in-view .dot-ember { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tech-draw .con, .tech-draw .thin, .tech-draw .tlabel,
  .tech-draw .dot-cyan, .tech-draw .dot-ember, .tech-draw .fillpart { transition: none; }
}

/* ---- Blueprint grid background (reusable) ---- */
.blueprint-grid {
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--ink-2);
}
.blueprint-grid.tight {
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 24px 100%,
    var(--ink);
}

/* ---- Hero side frame ---- */
.illo-frame {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; overflow: hidden;
}
.illo-frame .corner-tag {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--steel); text-transform: uppercase;
}

/* ---- Card illustration header ---- */
.illo-head {
  height: 150px; margin: -4px -4px 18px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid var(--line);
}
.illo-head .tech-illo { width: 78%; }

/* ---- Hero row (text + side illustration) ---- */
.illo-hero-row {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center;
}
.illo-hero-row .illo-frame { height: 360px; display: flex; align-items: center; justify-content: center; padding: 18px; }
.illo-hero-row .illo-frame [data-illo] { width: 280px; max-width: 100%; }
@media (max-width: 880px) {
  .illo-hero-row { grid-template-columns: 1fr; }
  .illo-hero-row .illo-frame { height: 300px; }
}

/* ---- Section divider strip ---- */
.illo-divider {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 18px 0; overflow: hidden;
}
.illo-divider .tech-illo { width: 100%; opacity: 0.85; }