/* Systeem page: the Flow B2 · labels animation fills the page hero, the copy sits on top of it (D87).
   Only pages/{nl,en}/systeem.html load this file. v3 copy of the v2-light file; the veil uses the --canvas token. Values follow outputs/hero-animations-v2/flow-sources/src/common.css. */
.page-hero.sys-flow {
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(calc(100svh - var(--nav-h)), 700px);
  --hero-mobile-room: 370px;
}
.sys-flow .flow-stage,
.sys-flow .flow-veil,
.sys-flow .flow-top {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.sys-flow .flow-stage {
  z-index: 0;
}
.sys-flow canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* the veil keeps the copy at full contrast: canvas colour behind the text column, clear on the right */
.sys-flow .flow-veil {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--canvas) 94%, transparent) 0%,
    color-mix(in srgb, var(--canvas) 86%, transparent) 38%,
    color-mix(in srgb, var(--canvas) 0%, transparent) 58%
  );
}
.page-hero.sys-flow > .wrap {
  z-index: 2;
  display: block;
  width: 100%;
}
.sys-flow .flow-copy {
  max-width: 620px;
}
.sys-flow .page-lead {
  max-width: 44ch;
}
/* WCAG 2.2.2: the hero loops while it is on screen, so the visitor can pause it. flow.js removes [hidden] when motion is allowed */
.sys-flow .flow-pause {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.sys-flow .flow-pause[hidden] {
  display: none;
}
.sys-flow .flow-pause:hover {
  border-color: var(--accent);
}
.sys-flow .flow-pause:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sys-flow .flow-pause svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.sys-flow .flow-pause .i-play,
.sys-flow .flow-pause[aria-pressed="true"] .i-pause {
  display: none;
}
.sys-flow .flow-pause[aria-pressed="true"] .i-play {
  display: block;
}

/* section 01 holds the coded flow diagram; site.css hides that diagram on a phone, so the whole section goes there */
@media (max-width: 900px) {
  .page-hero.sys-flow {
    display: block;
    min-height: 0;
  }
  .page-hero.sys-flow > .wrap {
    padding-bottom: var(--hero-mobile-room);
  }
  /* the veil covers the copy and stops where the animation room under the buttons starts */
  .sys-flow .flow-veil {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--canvas) 92%, transparent) 0,
      color-mix(in srgb, var(--canvas) 88%, transparent) calc(100% - var(--hero-mobile-room) - 30px),
      color-mix(in srgb, var(--canvas) 0%, transparent) calc(100% - var(--hero-mobile-room) + 10px)
    );
  }
  /* on a phone the bottom chips sit in the corner, so the pause control moves above them */
  .sys-flow .flow-pause {
    right: var(--s-3);
    bottom: 64px;
  }
  .sec-flow {
    display: none;
  }
  .sec-flow + :is(#lagen, #layers) {
    padding-top: var(--sec-y);
  }
  .sec-flow + :is(#lagen, #layers) > .wrap::before {
    display: none;
  }
}