/* .int-flow — the connection illustration (Incode at the center, partner
   logos on bezier wires, pulses traveling in and out) drawn by
   js/behaviors/integrations-flow.js. Shared by two surfaces:

   · /platform/integrations/ — the "Your stack" centrepiece, full-width
     stage; its width / aspect / mask overrides live in
     pages/capability-integrations.css.
   · /integrations/ — the split-hero visual slot, via .int-flow--hero.

   The base below is everything both surfaces share: the positioning
   context, the dotted ground, and the canvas fill. */

.int-flow {
  position: relative;
}

/* the dotted ground — a blue→ink gradient masked to a 22px dot grid,
   already fading at every edge (the dashboard hero recipe) */
.int-flow__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background: linear-gradient(
    135deg,
    var(--color-blue-500) 0%,
    color-mix(in srgb, var(--color-blue-500) 55%, var(--color-black)) 40%,
    var(--color-black) 100%
  );
  -webkit-mask-image:
    radial-gradient(circle, var(--color-black) 1.5px, transparent 1.5px),
    linear-gradient(to right, transparent 0%, var(--color-black) 10%, var(--color-black) 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, var(--color-black) 5%, var(--color-black) 88%, transparent 100%);
  mask-image:
    radial-gradient(circle, var(--color-black) 1.5px, transparent 1.5px),
    linear-gradient(to right, transparent 0%, var(--color-black) 10%, var(--color-black) 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, var(--color-black) 5%, var(--color-black) 88%, transparent 100%);
  -webkit-mask-size: 22px 22px, 100% 100%, 100% 100%;
  mask-size: 22px 22px, 100% 100%, 100% 100%;
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect, intersect;
}

.int-flow__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── --hero · the split-hero visual slot (/integrations/) ──────────────
   The centrepiece stage is 1080 wide at 1080:478; the hero column is
   roughly half that, and pill sizes are fractions of the box, so the
   wide aspect would shrink the logos to nothing. A squarer stage buys
   the height back: the pills scale with h, not just w. */
.int-flow--hero {
  width: 100%;
  aspect-ratio: 1 / 0.72;
  /* squarer box = the extension wires leave through the top and bottom
     edges, not just the sides, so this stage fades on all four */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, var(--color-black) 4%, var(--color-black) 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, var(--color-black) 6%, var(--color-black) 94%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, var(--color-black) 4%, var(--color-black) 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, var(--color-black) 6%, var(--color-black) 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* ≥1024 the stage widens PAST its grid track, toward the copy — the left
   edge is masked, so it reads as the wires reaching across the hero
   rather than as a box that overflows */
@media (min-width: 1024px) {
  .int-flow--hero {
    /* laptop widths: the track is narrow, so reach further left and keep
       a little more height, or the logos shrink out of legibility */
    width: 126%;
    margin-left: -26%;
    aspect-ratio: 1 / 0.64;
  }
}
@media (min-width: 1280px) {
  .int-flow--hero {
    width: 118%;
    margin-left: -18%;
    aspect-ratio: 1 / 0.58;
  }
}

/* ── --stack · the /platform/integrations/ hero — the illustration cut to
   its smallest true statement: Incode in the middle, one partner above and
   one below, on a tall portrait ground ─────────────────────────────────── */
.int-flow--stack {
  width: 100%;
  /* sized off the /platform/ui-customization/ hero art (Mike 2026-08-10:
     "de ese alto, menos ancho"), then widened a touch at the same height */
  aspect-ratio: 1 / 0.97;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, var(--color-black) 10%, var(--color-black) 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, var(--color-black) 8%, var(--color-black) 92%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, var(--color-black) 10%, var(--color-black) 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, var(--color-black) 8%, var(--color-black) 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* the ground dissolves on ALL FOUR sides, and on a long ramp — the
   centrepiece's 10/90 · 5/88 cut too hard for a box this small */
.int-flow--stack .int-flow__dots {
  -webkit-mask-image:
    radial-gradient(circle, var(--color-black) 1.5px, transparent 1.5px),
    linear-gradient(to right, transparent 0%, var(--color-black) 26%, var(--color-black) 74%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, var(--color-black) 18%, var(--color-black) 82%, transparent 100%);
  mask-image:
    radial-gradient(circle, var(--color-black) 1.5px, transparent 1.5px),
    linear-gradient(to right, transparent 0%, var(--color-black) 26%, var(--color-black) 74%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, var(--color-black) 18%, var(--color-black) 82%, transparent 100%);
}