/* ==========================================================================
   TAMENSAH Consulting: VISUAL-001 illustrations, project captures, and motion.
   Loaded after tc.css, only on the pages that carry drawings or captures
   (Home, Services, Training, Work), so other pages and every form keep
   exactly the stylesheet they had. Uses the tokens defined in tc.css.
   ========================================================================== */
/* ---------- Illustration family ------------------------------------------- */
.v-art { display: block; width: 100%; height: auto; overflow: visible; }
.v-art .v-s, .v-art .v-e, .v-art .v-c, .v-art .v-d { fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.v-art .v-s { stroke: var(--c-ink); stroke-width: 1.5; }
.v-art .v-e { stroke: var(--c-ink); stroke-width: 3; }
.v-art .v-c { stroke: var(--c-graphite); stroke-width: 1; stroke-opacity: 0.45; }
.v-art .v-d { stroke: var(--c-graphite); stroke-width: 1; stroke-opacity: 0.6; stroke-dasharray: 4 4; }
.v-art .v-dr { stroke-linecap: butt; }   /* a square cap would show a dot on a line that has not drawn yet */
.v-art .v-f { fill: var(--c-stone); stroke: var(--c-ink); stroke-width: 1.5; }
.v-art .v-p { fill: var(--c-paper); stroke: var(--c-ink); stroke-width: 1.5; }
.v-art .v-m { fill: var(--c-marker); }
.v-art .v-k { fill: var(--c-ink); }
.v-art .v-g { fill: var(--c-graphite); }
.v-art text { font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.v-art .v-t { fill: var(--c-graphite); }
.v-art .v-ti { fill: var(--c-ink); }
.section--panel .v-art .v-p { fill: var(--c-stone); }
.section--panel .v-art .v-f { fill: var(--c-paper); }

/* Variants: the full drawing, and a compact one for narrow columns. The
   choice follows the width the drawing actually has (a container query), so
   labels stay at about 10 px or more on phones and on tablets in landscape,
   where the two-column hero gives the drawing a narrow column. */
.v-wide { container-type: inline-size; }
.v-wide .v-art--m { display: none; }
@container (max-width: 419.98px) {
  .v-wide .v-art--d { display: none; }
  .v-wide .v-art--m { display: block; }
}

/* ---------- Hero and page-head drawings ----------------------------------- */
.vis-hero { margin: 0; width: 100%; max-width: 480px; }
@media (min-width: 960px) { .vis-hero { max-width: none; justify-self: end; } }
.hero__grid > .vis-hero { align-self: end; }
/* Below the two-column layout the drawing follows the buttons. A measured rule,
   the device the hero aside has always used, ties it to the hero above. */
@media (max-width: 959.98px) {
  .hero__grid { row-gap: var(--s-6); }
  .hero__grid > .vis-hero, .page-head__grid > .vis-hero { border-top: var(--measured-line) solid var(--c-ink); padding-top: var(--s-4); }
}

.page-head__grid { display: grid; gap: var(--s-7); }
@media (min-width: 960px) {
  .page-head__grid { grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr); align-items: end; }
}

/* ---------- Practice drawings --------------------------------------------- */
.vis-practice { margin: var(--s-6) 0 0; max-width: 360px; }
@media (min-width: 960px) { .vis-practice { max-width: 400px; } }
/* The drawing stays beside its own list on wide, tall screens. Sticky
   positioning cannot leave the section that contains it, and the drawing is
   not focusable, so it never covers the next section or the keyboard path. */
@media (min-width: 1024px) and (min-height: 760px) {
  .family--drawn > :first-child { position: sticky; top: 112px; align-self: start; }
}
.vis-plate { margin: 0 0 var(--s-4); max-width: 200px; }
@media (min-width: 1024px) { .vis-plate { max-width: none; } }
.vis-plate .v-art text { display: none; }   /* too small to read at plate size; the heading beside it carries the meaning */
.vis-plate .v-art .v-m { fill: var(--c-stone); }   /* four plates share one screen: Marker stays with one highlight per screen */

/* ---------- Scope-first process band -------------------------------------- */
.vis-process { margin: 0 0 var(--s-5); }
.vis-process .v-art--d { display: none; }
@media (min-width: 1024px) {
  .vis-process .v-art--d { display: block; }
  .vis-process .v-art--m { display: none; }
}
.vis-process .v-art--m { max-width: 480px; }

/* ---------- Authentic project captures ------------------------------------ */
.captures { list-style: none; margin: 0 0 var(--s-7); padding: 0; display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .captures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .captures--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.captures.captures--1 { grid-template-columns: minmax(0, 1fr); margin: 0; }
.capture { margin: 0; }
.capture__bar {
  display: flex; align-items: center; gap: var(--s-3); height: 28px; padding-inline: var(--s-3);
  border: 1px solid var(--c-ink); border-bottom: 0; background: var(--c-paper);
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.04em; color: var(--fg-muted);
  white-space: nowrap; overflow: hidden;
}
.capture__bar::before {
  content: ""; flex: none; width: 26px; height: 6px;
  background: radial-gradient(circle at 3px 3px, var(--c-graphite) 2.2px, transparent 2.6px) 0 0 / 10px 6px repeat-x;
}
.capture img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: top left; border: 1px solid var(--c-ink); background: var(--c-stone); }
.capture figcaption { padding-top: var(--s-3); display: grid; gap: 2px; }
.capture figcaption .ref { font-size: var(--fs-mono); }
.capture figcaption strong { font-weight: 600; }
.capture__note { font-size: var(--fs-small); color: var(--fg-muted); }

.role-capture { display: grid; gap: var(--s-5); margin-bottom: var(--s-7); }
@media (min-width: 840px) { .role-capture { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; } }

/* ---------- Motion --------------------------------------------------------
   The drawing's complete, legible state is what the SVG contains. Motion is
   added only with JavaScript and without a reduced-motion preference, plays
   once, and ends in that same state. Hero and page-head drawings follow the
   CSS-only intro; the process band draws when site.js reveals it. */
@keyframes v-draw { from { stroke-dashoffset: 1.01; } to { stroke-dashoffset: 0; } }
@keyframes v-scale { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: no-preference) {
  /* Only the variant shown at this width animates; the hidden one stays static.
     Every selector ends in a class, so matching stays cheap on pages without drawings. */
  @container (min-width: 420px) {
    .js .vis-hero .v-art--d .v-a1 .v-dr { stroke-dasharray: 1 2; animation: v-draw var(--dur-draw) var(--ease-draw) both; }
    .js .vis-hero .v-art--d .v-a1f { animation: tc-fade var(--dur-enter) var(--ease-out) both; }
    .js .vis-hero .v-art--d .v-a2 { animation: tc-enter var(--dur-enter) var(--ease-out) calc(var(--dur-draw) * 0.55) both; }
    .js .vis-hero .v-art--d .v-a3 .v-dr { stroke-dasharray: 1 2; animation: v-draw var(--dur-draw) var(--ease-draw) calc(var(--dur-draw) * 1.4) both; }
    .js .vis-hero .v-art--d .v-a3f { animation: tc-fade var(--dur-enter) var(--ease-out) calc(var(--dur-draw) * 1.7) both; }
    .js .vis-hero .v-art--d .v-a4 .v-m { transform-box: fill-box; transform-origin: 0 50%; animation: v-scale var(--dur-enter) var(--ease-out) calc(var(--dur-draw) * 2.5) both; }
    .js .vis-hero .v-art--d .v-a4f { animation: tc-fade var(--dur-enter) var(--ease-out) calc(var(--dur-draw) * 2.5) both; }
  }
  @container (max-width: 419.98px) {
    .js .vis-hero .v-art--m .v-a1 .v-dr { stroke-dasharray: 1 2; animation: v-draw var(--dur-draw) var(--ease-draw) both; }
    .js .vis-hero .v-art--m .v-a1f { animation: tc-fade var(--dur-enter) var(--ease-out) both; }
    .js .vis-hero .v-art--m .v-a2 { animation: tc-enter var(--dur-enter) var(--ease-out) calc(var(--dur-draw) * 0.55) both; }
    .js .vis-hero .v-art--m .v-a3 .v-dr { stroke-dasharray: 1 2; animation: v-draw var(--dur-draw) var(--ease-draw) calc(var(--dur-draw) * 1.4) both; }
    .js .vis-hero .v-art--m .v-a3f { animation: tc-fade var(--dur-enter) var(--ease-out) calc(var(--dur-draw) * 1.7) both; }
    .js .vis-hero .v-art--m .v-a4 .v-m { transform-box: fill-box; transform-origin: 0 50%; animation: v-scale var(--dur-enter) var(--ease-out) calc(var(--dur-draw) * 2.5) both; }
    .js .vis-hero .v-art--m .v-a4f { animation: tc-fade var(--dur-enter) var(--ease-out) calc(var(--dur-draw) * 2.5) both; }
  }

  /* Page-head with a drawing: keep the existing staggered intro on the text */
  .js .page-head > .page-head__grid > div, .js .page-head > .page-head__grid > .vis-hero { animation: none; }
  .js .page-head__grid > div:first-child > :is(p, h1, div, nav) { animation: tc-enter var(--dur-enter) var(--ease-out) both; animation-delay: calc(var(--step, 0) * var(--stagger)); }
  .js .page-head__grid > div:first-child > :nth-child(2) { --step: 1; }
  .js .page-head__grid > div:first-child > :nth-child(3) { --step: 2; }
  .js .page-head__grid > div:first-child > :nth-child(n+4) { --step: 3; }

  /* Process band: the line draws once, when the section heading above it is
     revealed by the existing scroll reveal. No script change is needed. */
  .tc-motion .section-head:not(.tc-pending) + .vis-process .v-a3 .v-dr { stroke-dasharray: 1 2; animation: v-draw var(--dur-draw) var(--ease-draw) var(--dur-hover) both; }
  .tc-motion .section-head:not(.tc-pending) + .vis-process .v-a4 .v-m { transform-box: fill-box; transform-origin: 0 50%; animation: v-scale var(--dur-enter) var(--ease-out) calc(var(--dur-hover) + var(--dur-draw)) both; }
}