/* AI agent venn — scroll-triggered build animation
Instance values arrive as custom properties set inline in
module.html, so this file stays static and multiple instances
on one page can differ without any HubL in CSS. */

.deq-venn {
  display: flex;
  width: 100%;
}

.deq-venn--left   { justify-content: flex-start; }
.deq-venn--center { justify-content: center; }
.deq-venn--right  { justify-content: flex-end; }

.deq-venn__stage {
  position: relative;
  width: 100%;
  max-width: var(--deq-max, 695px);
  aspect-ratio: 695 / 396;
  background: var(--deq-bg, #161623);

  /* Circles start outside the frame and slide in — this clips them. */
  overflow: hidden;

  /* Lets the text scale with the diagram using cqw units below. */
  container-type: inline-size;
}

@supports not (aspect-ratio: 695 / 396) {
  .deq-venn__stage { height: 0; padding-bottom: 56.98%; }
}

.deq-venn__stage > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.deq-venn__stage circle,
.deq-venn__stage [data-lens] { will-change: transform; }

/* ---- Text columns ------------------------------------------------
Percentages are the measured centres of the original outlined
text blocks, so live text lands exactly where the vectors were. */
.deq-venn__col {
  position: absolute;
  top: 50%;
  width: 36%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
}

.deq-venn__col--left  { left: 23.27%; }
.deq-venn__col--right { left: 76.76%; }

.deq-venn__h {
  margin: 0 0 25px;
  font-family: 'MyBespokeSerif', Georgia, 'Times New Roman', Times, serif;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.22;
  color: #FFFFFF;
}

.deq-venn__b {
  margin: 0;
  font-family: "Open Sans", system-ui, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.8);
}

/* Scale type with the container rather than the viewport, so the
module looks identical in a narrow column and a full-width row. */
@supports (font-size: 1cqw) {
  .deq-venn__h { font-size: 3.9cqw; margin-bottom: 3.6cqw; }
  .deq-venn__b { font-size: 2.3cqw; }
}

/* ---- Typing ------------------------------------------------------
Characters are wrapped individually and revealed with opacity.
Words stay inline-block so wrapping never breaks mid-word, and
because the full text always occupies its final space there is
no reflow wobble as it types. */
.deq-venn__w { display: inline-block; white-space: nowrap; }

/* No display change on characters — keeps kerning intact. */
.deq-venn__c { opacity: 1; }

.deq-venn__stage[data-deq-ready] .deq-venn__c { opacity: 0; }