/* ============================================================
   blueprints.css — SVG illustration styling
   Thin strokes. Sharp corners. Architectural drawings.
   ============================================================ */

.blueprint {
  width: 100%;
  height: 100%;
  display: block;
  font-family: 'Inter', sans-serif;
}

.blueprint--bordered {
  border: 1px solid var(--rule);
  padding: clamp(0.875rem, 1.8vw, 1.5rem);
  background:
    linear-gradient(rgba(26, 24, 18, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 24, 18, 0.025) 1px, transparent 1px);
  background-size: 24px 24px;
  background-color: var(--canvas-tint);
}

.blueprint svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- Strokes ---------- */
.bp-stroke       { stroke: var(--ink); stroke-width: 1; fill: none; }
.bp-stroke-soft  { stroke: var(--ink); stroke-width: 1; stroke-opacity: 0.35; fill: none; }
.bp-stroke-faint { stroke: var(--ink); stroke-width: 1; stroke-opacity: 0.18; fill: none; }
.bp-stroke-punch       { stroke: var(--punch); stroke-width: 1.2; fill: none; }
.bp-stroke-punch-bold  { stroke: var(--punch); stroke-width: 1.8; fill: none; }

.bp-dash       { stroke-dasharray: 4 4; }
.bp-dash-tight { stroke-dasharray: 2 3; }
.bp-dash-wide  { stroke-dasharray: 8 6; }

/* Continuous "flow" animation on dashed connectors (lines & paths only,
   not the rect outlines) — fires only on the active slide so hidden
   slides don't burn CPU. Each pattern animates at its own cycle distance
   so the loop is seamless. */
@keyframes bp-dash-flow       { to { stroke-dashoffset: -8;  } }
@keyframes bp-dash-flow-tight { to { stroke-dashoffset: -5;  } }
@keyframes bp-dash-flow-wide  { to { stroke-dashoffset: -14; } }

.slide.active line.bp-dash,
.slide.active path.bp-dash {
  animation: bp-dash-flow 0.9s linear infinite;
}

.slide.active line.bp-dash-tight,
.slide.active path.bp-dash-tight {
  animation: bp-dash-flow-tight 0.6s linear infinite;
}

.slide.active line.bp-dash-wide,
.slide.active path.bp-dash-wide {
  animation: bp-dash-flow-wide 1.3s linear infinite;
}

/* ---------- Fills ---------- */
.bp-fill-canvas { fill: var(--canvas); }
.bp-fill-tint   { fill: var(--canvas-tint); }
.bp-fill-deeper { fill: var(--canvas-2); }
.bp-fill-punch  { fill: var(--punch); }
.bp-fill-ink    { fill: var(--ink); }

/* ---------- Labels ---------- */
.bp-label {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  letter-spacing: -0.005em;
  fill: var(--ink-2);
  font-weight: 500;
}

.bp-label-sm {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--ink-muted);
  font-weight: 500;
}

.bp-label-lg {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  letter-spacing: -0.02em;
  fill: var(--ink);
  font-weight: 500;
}

.bp-label-punch {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--punch);
  font-weight: 500;
}

.bp-label-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  fill: var(--ink-3);
}

/* Readable annotation / callout text (sentence-case, not uppercase). */
.bp-note {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  fill: var(--ink-3);
  font-weight: 400;
}

.bp-note-punch {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  fill: var(--punch);
  font-weight: 500;
}

/* Node-internal text */
.bp-node-label {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  letter-spacing: -0.015em;
  fill: var(--ink);
  font-weight: 500;
}

.bp-sub-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  fill: var(--ink-muted);
  font-weight: 400;
}

/* ---------- Nodes (for diagrams) ---------- */
.bp-node {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-opacity: 0.4;
  fill: var(--canvas-tint);
}

.bp-node--punch {
  stroke: var(--punch);
  stroke-width: 1.4;
  fill: rgba(196, 74, 46, 0.05);
}

.bp-node--central {
  stroke: var(--ink);
  stroke-width: 1.4;
  fill: var(--canvas-2);
}

.bp-node--inverse {
  fill: var(--ink);
  stroke: var(--ink);
}

/* ---------- Animated drawing on slide enter ---------- */
.bp-draw {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}

.slide.active .bp-draw {
  stroke-dashoffset: 0;
}

.bp-draw[data-delay="1"] { transition-delay: 0.2s; }
.bp-draw[data-delay="2"] { transition-delay: 0.35s; }
.bp-draw[data-delay="3"] { transition-delay: 0.5s; }
.bp-draw[data-delay="4"] { transition-delay: 0.65s; }
.bp-draw[data-delay="5"] { transition-delay: 0.8s; }

/* ---------- Wireframe UI blocks ---------- */
.ui-frame {
  position: relative;
  border: 1px solid var(--rule-2);
  background: var(--canvas-tint);
  padding: 0;
  overflow: hidden;
}

.ui-frame__chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  background: var(--canvas-2);
}

.ui-frame__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rule-strong);
}

.ui-frame__url {
  margin-left: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0;
}

.ui-frame__body {
  padding: clamp(0.75rem, 1.3vw, 1.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ui-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ui-bar {
  height: 6px;
  background: var(--rule-2);
  border-radius: 0;
}

.ui-bar--punch { background: var(--punch); opacity: 0.7; }
.ui-bar--soft  { background: var(--rule); }
.ui-bar--tall  { height: 9px; }

.ui-box {
  border: 1px dashed var(--rule-strong);
  background: var(--canvas);
}

.ui-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 0.65rem;
  border: 1px solid var(--rule-2);
  font-family: 'Geist', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--canvas);
  font-weight: 500;
}

.ui-pill--punch {
  color: var(--punch);
  border-color: var(--punch);
  background: rgba(196, 74, 46, 0.04);
}

/* ---------- Path arrows ---------- */
.bp-arrow {
  fill: var(--ink);
  fill-opacity: 0.6;
}

.bp-arrow--punch { fill: var(--punch); fill-opacity: 1; }

/* ---------- Highlight pulse ---------- */
@keyframes bp-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.bp-pulse {
  animation: bp-pulse 2.4s var(--ease) infinite;
}

/* ---------- Callout (dotted annotation) ---------- */
.bp-callout {
  stroke: var(--punch);
  stroke-width: 0.75;
  stroke-dasharray: 2 3;
  fill: none;
}

/* ---------- Service-icon SVGs (24x24 viewBox, 1.5 stroke) ---------- */
.svc-icon { width: 22px; height: 22px; }
.svc-icon * { stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }