/* ======================================================================
   diagram.css — technische Systemskizze
   ====================================================================== */

@layer components {

  /* Technisches Signal für den Einstieg: Haarlinien, Mono-Beschriftung,
     eine Akzentfarbe. Bewusst kein Bild und kein Icon-Satz — die Skizze
     zeigt dieselbe Aussage wie der Text daneben, in der Sprache, in der
     Entwickler Systeme tatsächlich aufzeichnen. */

  .schematic {
    inline-size: 100%;
    max-inline-size: 30rem;
    block-size: auto;
  }

  .schematic__grid-dot { fill: var(--line); }

  .schematic__line {
    fill: none;
    stroke: color-mix(in srgb, var(--muted) 55%, transparent);
    stroke-width: 1;
    stroke-linecap: square;
  }

  .schematic__line--spine { stroke: var(--signal); }
  .schematic__line--tick  { stroke: var(--line); }

  .schematic__joint { fill: var(--signal); }
  .schematic__arrowhead { fill: var(--signal); }

  .schematic__node {
    fill: none;
    stroke: var(--line-strong);
    stroke-width: 1;
  }

  .schematic__num,
  .schematic__label,
  .schematic__out,
  .schematic__meta {
    font-family: var(--font-mono);
    letter-spacing: .12em;
  }

  .schematic__num   { font-size: 10px; fill: var(--signal); }
  .schematic__label { font-size: 11px; fill: var(--muted); }
  .schematic__out   { font-size: 12px; fill: var(--ink); letter-spacing: .14em; }
  .schematic__meta  { font-size: 9.5px; fill: var(--muted); letter-spacing: .1em; }

  @media (prefers-reduced-motion: no-preference) {

    .schematic__line {
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      animation: schematic-draw 700ms var(--ease) forwards;
    }

    .schematic__joint,
    .schematic__row text,
    .schematic__target,
    .schematic__caption text {
      opacity: 0;
      animation: schematic-appear 420ms var(--ease) forwards;
    }

    .schematic__row:nth-child(1) .schematic__line { animation-delay: 120ms; }
    .schematic__row:nth-child(2) .schematic__line { animation-delay: 200ms; }
    .schematic__row:nth-child(3) .schematic__line { animation-delay: 280ms; }
    .schematic__row:nth-child(4) .schematic__line { animation-delay: 360ms; }

    .schematic__row:nth-child(1) text,
    .schematic__row:nth-child(1) .schematic__joint { animation-delay: 220ms; }
    .schematic__row:nth-child(2) text,
    .schematic__row:nth-child(2) .schematic__joint { animation-delay: 300ms; }
    .schematic__row:nth-child(3) text,
    .schematic__row:nth-child(3) .schematic__joint { animation-delay: 380ms; }
    .schematic__row:nth-child(4) text,
    .schematic__row:nth-child(4) .schematic__joint { animation-delay: 460ms; }

    .schematic__line--spine { animation-delay: 520ms; }
    .schematic__line--out   { animation-delay: 720ms; }
    .schematic__line--tick  { animation-delay: 860ms; }

    .schematic__target        { animation-delay: 860ms; }
    .schematic__caption text  { animation-delay: 980ms; }
  }

  @keyframes schematic-draw   { to { stroke-dashoffset: 0; } }
  @keyframes schematic-appear { to { opacity: 1; } }
}