/* ==========================================================================
   NetrAI — Illustration tokens
   --------------------------------------------------------------------------
   The pigments the section illustrations are drawn from, and nothing else.
   See ILLUSTRATION.md for what they are for and the rules that fence them.

   This file is the single source of truth. The Figma variable collection
   `ill` mirrors it name-for-name, mode-for-mode. When one changes the other
   changes in the same commit, or the exported SVGs stop matching the page.

   Almost every token here is an alias onto the semantic layer in style.css.
   That is deliberate: an illustration is not allowed to invent a surface or
   a hairline that the rest of the page does not already have. Only four
   things are genuinely new — two neutral bar fills, two blue decorative
   tints — plus the fenced alert, which is the one real exception in the
   system and is argued for in ILLUSTRATION.md.
   ========================================================================== */

:root {

  /* --- Structure -------------------------------------------------------
     The three planes an illustration is built from. Depth comes from the
     step between them plus a hairline, exactly as it does on the page.
     There are no shadows here either. */

  --ill-stage:  var(--surface-elevated-wash);  /* the tinted panel behind everything */
  --ill-plane:  var(--surface-white);          /* every card                          */
  --ill-line:   var(--line);                   /* every border, every connector       */

  /* --- Skeleton fills --------------------------------------------------
     Stand-in text. Cool neutrals so they sit down against the blue-tinted
     stage instead of reading as a second grey. `bar` is body copy;
     `bar-strong` is a heading or a value — the only weight distinction the
     fake type gets. */

  --ill-bar:        #e4eaf1;
  --ill-bar-strong: #c9d4e0;

  /* --- Real words ------------------------------------------------------
     The one to three words per scene that are actually legible. */

  --ill-label:     var(--ink);
  --ill-label-dim: var(--mist);

  /* --- Blue ------------------------------------------------------------
     `--ill-accent` is the filled object and is the same pigment under
     either lighting, for the same reason the filled pill is: white on it
     clears AA on any canvas. `--ill-accent-ink` is a stroke or a word and
     flips with the theme, because Link Blue is unreadable on black.
     The two tints are decorative fill only and never carry a word. */

  --ill-accent:      var(--accent-fill);   /* #0071e3 both themes  */
  --ill-accent-ink:  var(--accent);        /* #0066cc / #2997ff    */
  --ill-on-accent:   var(--on-accent);     /* #ffffff              */
  /* `--ill-tint` is pitched so that `--ill-accent-ink` printed on it clears
     4.5:1 — a tinted chip carrying one accent word is the most useful object
     in the kit and it has to be legal at 11px. That costs separation against
     the stage (1.13:1), so there is a placement rule: a word-bearing tint
     sits on a plane, never loose on the stage. `--ill-tint-strong` is
     decorative fill and carries no word at any size. */

  --ill-tint:        #dcebfc;   /* accent-ink on this: 4.59:1 */
  --ill-tint-strong: #8cbcee;

  /* --- Alert -----------------------------------------------------------
     The system's one deliberate second chromatic colour, and it is fenced:
     illustration artwork only, never page chrome, at most one instance per
     scene, never under 12px, never carrying information that is not also
     carried by position or a word. If a scene needs two of these, the scene
     is making two arguments and should be two scenes.

     Prefer to not reach for it at all. The house rule is that the ABSENCE
     of blue is the alarm — problem scenes are drawn in neutrals only, and
     blue arriving is the fix. Read ILLUSTRATION.md before using this. */

     The alert splits the same way blue does, and for the same reason: Apple's
     system red is a shape colour, not a text colour. At 11px on its own tint
     it lands at 2.97:1, which is a caption nobody can read. `--ill-alert` is
     the stroke or the fill; `--ill-alert-ink` is the word. */

  --ill-alert:      #ff3b30;   /* Apple system red, light — strokes and fills */
  --ill-alert-ink:  #c81f16;   /* the word — 5.73:1 on plane, 4.80:1 on tint  */
  --ill-alert-tint: #ffe5e3;
}

[data-theme="dark"] {

  /* Structure and real words inherit correctly through the semantic layer
     above — surface-elevated-wash, surface-white, line, ink and mist all
     already flip. Only the pigments this file actually owns are restated. */

  --ill-bar:        #2a2e34;
  --ill-bar-strong: #3c424a;

  --ill-tint:        #122c46;   /* accent-ink on this: 4.72:1 */
  --ill-tint-strong: #1d5c96;

  --ill-alert:      #ff453a;   /* Apple system red, dark — 5.55:1 on the stage */
  --ill-alert-ink:  #ff6961;   /* the word — 5.97:1 on plane, 5.75:1 on tint   */
  --ill-alert-tint: #3a1512;
}

/* ==========================================================================
   Mounting
   --------------------------------------------------------------------------
   An illustration is an inline <svg> inside a .ill wrapper. It is inline
   rather than an <img> for three reasons: the tokens above only resolve in
   the document, the real labels stay selectable text in the page font, and
   there is no second request.
   ========================================================================== */

.ill {
  display: block;
  width: 100%;
  height: auto;
  /* Real labels are typeset by the page, not baked by Figma. */
  font-family: inherit;
  font-feature-settings: "tnum" 1;   /* figures in the fake metrics line up */
}

.ill text {
  fill: var(--ill-label);
  letter-spacing: -0.016em;          /* the system tracking, not Figma's zero */
}

.ill .ill-label-dim { fill: var(--ill-label-dim); }
.ill .ill-label-accent { fill: var(--ill-accent-ink); }

/* Hairlines stay hairlines. The SVG scales with its container, so a plain
   1px stroke becomes 1.4px at a wide breakpoint and 0.7px at a narrow one.
   tools/tokenize-svg.py adds this attribute on export; the rule is here as
   well so a hand-written SVG cannot forget it. */
.ill [stroke] { vector-effect: non-scaling-stroke; }

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   The scene arrives with the section, on the system's own reveal. Inside
   it, exactly one thing may move, once, after the scene has settled — a
   connector drawing itself or a badge fading in. Never two. Never a loop.
   ========================================================================== */

.ill [data-ill-draw] {
  stroke-dasharray: var(--ill-draw-len, 400);
  stroke-dashoffset: var(--ill-draw-len, 400);
}

.reveal.in-view .ill [data-ill-draw] {
  transition: stroke-dashoffset 900ms var(--ease-apple) 200ms;
  stroke-dashoffset: 0;
}

.ill [data-ill-pop] {
  opacity: 0;
}

.reveal.in-view .ill [data-ill-pop] {
  transition: opacity 400ms var(--ease-apple) 700ms;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ill [data-ill-draw] { stroke-dashoffset: 0; }
  .ill [data-ill-pop]  { opacity: 1; }
  .ill [data-ill-draw],
  .ill [data-ill-pop]  { transition: none; }
}

/* ==========================================================================
   Section scenes — the raster illustrations
   --------------------------------------------------------------------------
   Each scene ships as two WebP files, one per theme, and is mounted as a
   background rather than an <img> for one reason: the theme here is a
   three-state `data-theme` attribute, and <picture media="(prefers-color-
   scheme: dark)"> only ever sees the OS. It would ignore the toggle. Two
   stacked <img> elements would follow the toggle but download both themes;
   a background follows the cascade, so exactly one theme's bytes are
   fetched. The scenes are decorative — the heading beside each one carries
   the meaning — so they are aria-hidden and need no alt text.

   The surround of every file is transparent, so `--surface-elevated-wash`
   showing through is what makes the illustration read as a bed rather than
   a photograph pasted onto a card.
   ========================================================================== */

.ill-scene {
  display: block;
  /* width is explicit: .process-step is a centred flex column, and a bare
     block child of one collapses to zero width with only an aspect-ratio. */
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  background-color: var(--surface-elevated-wash);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-bottom: 22px;
}

/* In a card the scene takes the 48px icon tile's slot, and bleeds to the
   card's edges so it reads as a bed rather than a picture sitting on one.
   The offsets are the card's own padding, negated; the inner radius is one
   pixel tighter than the card's so it sits inside the border rather than
   over it. */
.card > .ill-scene:first-child {
  width: auto;
  margin: -34px -30px 20px;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

/* A process step is a centred column, so the scene is capped rather than
   stretched to the full measure of the text. */
.process-step > .ill-scene:first-child {
  max-width: 420px;
  margin: 0 auto 20px;
}

@media (max-width: 860px) {
  .ill-scene { margin-bottom: 18px; }
  /* mobile.css tightens .card padding to 20px 17px — match it. */
  .card > .ill-scene:first-child { margin: -20px -17px 16px; }
}

.ill-scene[data-ill="problem-handoff"] {
    background-image: url("../../assets/ill/w1280/ill-problem-handoff-light.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-problem-handoff-light.webp") 1x, url("../../assets/ill/w1280/ill-problem-handoff-light.webp") 2x);
}
.ill-scene[data-ill="problem-telephone"] {
    background-image: url("../../assets/ill/w1280/ill-problem-telephone-light.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-problem-telephone-light.webp") 1x, url("../../assets/ill/w1280/ill-problem-telephone-light.webp") 2x);
}
.ill-scene[data-ill="problem-timeline"] {
    background-image: url("../../assets/ill/w1280/ill-problem-timeline-light.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-problem-timeline-light.webp") 1x, url("../../assets/ill/w1280/ill-problem-timeline-light.webp") 2x);
}
.ill-scene[data-ill="service-agents"] {
    background-image: url("../../assets/ill/w1280/ill-service-agents-light.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-service-agents-light.webp") 1x, url("../../assets/ill/w1280/ill-service-agents-light.webp") 2x);
}
.ill-scene[data-ill="service-software"] {
    background-image: url("../../assets/ill/w1280/ill-service-software-light.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-service-software-light.webp") 1x, url("../../assets/ill/w1280/ill-service-software-light.webp") 2x);
}
.ill-scene[data-ill="service-web"] {
    background-image: url("../../assets/ill/w1280/ill-service-web-light.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-service-web-light.webp") 1x, url("../../assets/ill/w1280/ill-service-web-light.webp") 2x);
}
.ill-scene[data-ill="service-erp"] {
    background-image: url("../../assets/ill/w1280/ill-service-erp-light.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-service-erp-light.webp") 1x, url("../../assets/ill/w1280/ill-service-erp-light.webp") 2x);
}
.ill-scene[data-ill="process-discover"] {
    background-image: url("../../assets/ill/w1280/ill-process-discover-light.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-process-discover-light.webp") 1x, url("../../assets/ill/w1280/ill-process-discover-light.webp") 2x);
}
.ill-scene[data-ill="process-scope"] {
    background-image: url("../../assets/ill/w1280/ill-process-scope-light.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-process-scope-light.webp") 1x, url("../../assets/ill/w1280/ill-process-scope-light.webp") 2x);
}
.ill-scene[data-ill="process-build"] {
    background-image: url("../../assets/ill/w1280/ill-process-build-light.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-process-build-light.webp") 1x, url("../../assets/ill/w1280/ill-process-build-light.webp") 2x);
}
.ill-scene[data-ill="process-launch"] {
    background-image: url("../../assets/ill/w1280/ill-process-launch-light.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-process-launch-light.webp") 1x, url("../../assets/ill/w1280/ill-process-launch-light.webp") 2x);
}
.ill-scene[data-ill="about-eye"] {
    background-image: url("../../assets/ill/w1280/ill-about-eye-light.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-about-eye-light.webp") 1x, url("../../assets/ill/w1280/ill-about-eye-light.webp") 2x);
}

/* Explicit dark choice. */
[data-theme="dark"] .ill-scene[data-ill="problem-handoff"] {
    background-image: url("../../assets/ill/w1280/ill-problem-handoff-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-problem-handoff-dark.webp") 1x, url("../../assets/ill/w1280/ill-problem-handoff-dark.webp") 2x);
}
[data-theme="dark"] .ill-scene[data-ill="problem-telephone"] {
    background-image: url("../../assets/ill/w1280/ill-problem-telephone-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-problem-telephone-dark.webp") 1x, url("../../assets/ill/w1280/ill-problem-telephone-dark.webp") 2x);
}
[data-theme="dark"] .ill-scene[data-ill="problem-timeline"] {
    background-image: url("../../assets/ill/w1280/ill-problem-timeline-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-problem-timeline-dark.webp") 1x, url("../../assets/ill/w1280/ill-problem-timeline-dark.webp") 2x);
}
[data-theme="dark"] .ill-scene[data-ill="service-agents"] {
    background-image: url("../../assets/ill/w1280/ill-service-agents-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-service-agents-dark.webp") 1x, url("../../assets/ill/w1280/ill-service-agents-dark.webp") 2x);
}
[data-theme="dark"] .ill-scene[data-ill="service-software"] {
    background-image: url("../../assets/ill/w1280/ill-service-software-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-service-software-dark.webp") 1x, url("../../assets/ill/w1280/ill-service-software-dark.webp") 2x);
}
[data-theme="dark"] .ill-scene[data-ill="service-web"] {
    background-image: url("../../assets/ill/w1280/ill-service-web-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-service-web-dark.webp") 1x, url("../../assets/ill/w1280/ill-service-web-dark.webp") 2x);
}
[data-theme="dark"] .ill-scene[data-ill="service-erp"] {
    background-image: url("../../assets/ill/w1280/ill-service-erp-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-service-erp-dark.webp") 1x, url("../../assets/ill/w1280/ill-service-erp-dark.webp") 2x);
}
[data-theme="dark"] .ill-scene[data-ill="process-discover"] {
    background-image: url("../../assets/ill/w1280/ill-process-discover-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-process-discover-dark.webp") 1x, url("../../assets/ill/w1280/ill-process-discover-dark.webp") 2x);
}
[data-theme="dark"] .ill-scene[data-ill="process-scope"] {
    background-image: url("../../assets/ill/w1280/ill-process-scope-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-process-scope-dark.webp") 1x, url("../../assets/ill/w1280/ill-process-scope-dark.webp") 2x);
}
[data-theme="dark"] .ill-scene[data-ill="process-build"] {
    background-image: url("../../assets/ill/w1280/ill-process-build-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-process-build-dark.webp") 1x, url("../../assets/ill/w1280/ill-process-build-dark.webp") 2x);
}
[data-theme="dark"] .ill-scene[data-ill="process-launch"] {
    background-image: url("../../assets/ill/w1280/ill-process-launch-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-process-launch-dark.webp") 1x, url("../../assets/ill/w1280/ill-process-launch-dark.webp") 2x);
}
[data-theme="dark"] .ill-scene[data-ill="about-eye"] {
    background-image: url("../../assets/ill/w1280/ill-about-eye-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-about-eye-dark.webp") 1x, url("../../assets/ill/w1280/ill-about-eye-dark.webp") 2x);
}

/* Following the OS, unless the reader has explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ill-scene[data-ill="problem-handoff"] {
    background-image: url("../../assets/ill/w1280/ill-problem-handoff-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-problem-handoff-dark.webp") 1x, url("../../assets/ill/w1280/ill-problem-handoff-dark.webp") 2x);
  }
  :root:not([data-theme="light"]) .ill-scene[data-ill="problem-telephone"] {
    background-image: url("../../assets/ill/w1280/ill-problem-telephone-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-problem-telephone-dark.webp") 1x, url("../../assets/ill/w1280/ill-problem-telephone-dark.webp") 2x);
  }
  :root:not([data-theme="light"]) .ill-scene[data-ill="problem-timeline"] {
    background-image: url("../../assets/ill/w1280/ill-problem-timeline-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-problem-timeline-dark.webp") 1x, url("../../assets/ill/w1280/ill-problem-timeline-dark.webp") 2x);
  }
  :root:not([data-theme="light"]) .ill-scene[data-ill="service-agents"] {
    background-image: url("../../assets/ill/w1280/ill-service-agents-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-service-agents-dark.webp") 1x, url("../../assets/ill/w1280/ill-service-agents-dark.webp") 2x);
  }
  :root:not([data-theme="light"]) .ill-scene[data-ill="service-software"] {
    background-image: url("../../assets/ill/w1280/ill-service-software-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-service-software-dark.webp") 1x, url("../../assets/ill/w1280/ill-service-software-dark.webp") 2x);
  }
  :root:not([data-theme="light"]) .ill-scene[data-ill="service-web"] {
    background-image: url("../../assets/ill/w1280/ill-service-web-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-service-web-dark.webp") 1x, url("../../assets/ill/w1280/ill-service-web-dark.webp") 2x);
  }
  :root:not([data-theme="light"]) .ill-scene[data-ill="service-erp"] {
    background-image: url("../../assets/ill/w1280/ill-service-erp-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-service-erp-dark.webp") 1x, url("../../assets/ill/w1280/ill-service-erp-dark.webp") 2x);
  }
  :root:not([data-theme="light"]) .ill-scene[data-ill="process-discover"] {
    background-image: url("../../assets/ill/w1280/ill-process-discover-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-process-discover-dark.webp") 1x, url("../../assets/ill/w1280/ill-process-discover-dark.webp") 2x);
  }
  :root:not([data-theme="light"]) .ill-scene[data-ill="process-scope"] {
    background-image: url("../../assets/ill/w1280/ill-process-scope-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-process-scope-dark.webp") 1x, url("../../assets/ill/w1280/ill-process-scope-dark.webp") 2x);
  }
  :root:not([data-theme="light"]) .ill-scene[data-ill="process-build"] {
    background-image: url("../../assets/ill/w1280/ill-process-build-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-process-build-dark.webp") 1x, url("../../assets/ill/w1280/ill-process-build-dark.webp") 2x);
  }
  :root:not([data-theme="light"]) .ill-scene[data-ill="process-launch"] {
    background-image: url("../../assets/ill/w1280/ill-process-launch-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-process-launch-dark.webp") 1x, url("../../assets/ill/w1280/ill-process-launch-dark.webp") 2x);
  }
  :root:not([data-theme="light"]) .ill-scene[data-ill="about-eye"] {
    background-image: url("../../assets/ill/w1280/ill-about-eye-dark.webp");
    background-image: image-set(url("../../assets/ill/w640/ill-about-eye-dark.webp") 1x, url("../../assets/ill/w1280/ill-about-eye-dark.webp") 2x);
  }
}

/* The About hero scene is wider than a card and centred under the lead. */
.ill-scene--hero {
  max-width: 720px;
  margin: 34px auto 0;
  background-color: transparent;   /* the hero already has the waves field behind it */
}