/* ============================================================
   Tektome — Integrations page.
   Light mode only; brand tokens only. Shared base + 3 layout
   variations, switched via data-variant on .int-page by the
   "Layout" tweak: cards · list · directory.
   ============================================================ */

/* ---- Scroll reveal (fade + rise) — single animation workflow, scroll-down
   only. [data-reveal] added by JS; scoped to .int-page so it wins over
   later-loaded transitions. Gated behind reduced-motion. The BIM/document
   hub connector-flow animations keep running inside the revealed blocks. ---- */
@media (prefers-reduced-motion: no-preference) {
  .int-page [data-reveal] {
    opacity: 0;
    transform: translate(var(--reveal-x, 0px), var(--reveal-y, 12px));
    transition-property: opacity, transform;
    transition-duration: var(--reveal-dur, 320ms);
    transition-timing-function: var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .int-page [data-reveal].is-revealed { opacity: 1; transform: none; }
}

.int-page { flex: 1; background: var(--color-draft-white); font-family: var(--font-sans); color: var(--fg-primary); }
.int-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.int-inner--narrow { max-width: 760px; }

/* ---------- Hero ---------- */
.int-hero {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--purple-50) 0%, rgba(236, 236, 252, 0) 60%),
    var(--color-draft-white);
  padding: clamp(64px, 9vw, 116px) 0 clamp(40px, 5vw, 60px);
  text-align: center;
}
.int-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
  margin: 0 0 18px;
}
.int-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-data-black);
  margin: 0;
}
.int-hero__lede {
  font-size: 18px;
  line-height: 1.7;
  color: var(--fg-secondary);
  margin: 24px auto 0;
  max-width: 620px;
  text-wrap: pretty;
}

/* ---------- Section shell ---------- */
.int-sec { padding: clamp(48px, 6vw, 80px) 0; }
.int-sec--alt { background: var(--bg-section-alt); }
.int-sec--intro { padding-top: clamp(40px, 5vw, 64px); padding-bottom: 0; }

.int-head { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(24px, 3vw, 36px); }
.int-head__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 52px; height: 52px;
  border-radius: var(--radius-lg);
  background: var(--purple-50); color: var(--color-arch-purple);
}
.int-sec--alt .int-head__icon { background: var(--bg-surface); }
.int-head__icon svg { width: 28px; height: 28px; stroke-width: 1.5px; }
.int-head__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-data-black);
  margin: 0;
}
.int-lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-secondary);
  margin: 0 0 28px;
  max-width: 70ch;
  text-wrap: pretty;
}
.int-intro__lead { font-size: 19px; line-height: 1.65; color: var(--fg-secondary); margin: 0; max-width: 64ch; text-wrap: pretty; }
.int-intro__lead strong { color: var(--color-data-black); font-weight: var(--fw-semibold); }

/* ---------- Connector primitives (shared across variants) ---------- */
.int-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.int-conn { min-width: 0; display: flex; }
.int-conn__chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  background: var(--purple-50);
  color: var(--color-arch-purple);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}
.int-conn__name { font-size: 16px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--color-data-black); margin: 0; }
.int-conn__desc { font-size: 14px; line-height: 1.55; color: var(--fg-secondary); margin: 6px 0 0; text-wrap: pretty; }

/* Status badge */
.int-badge {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}
.int-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.int-badge--live { color: var(--color-arch-purple); background: var(--purple-50); }
.int-badge--planned { color: var(--fg-tertiary); background: var(--color-light-gray); }

/* Shared connector head (name + badge inline). Variants tune spacing. */
.int-conn__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ===================== VARIANT A — CARDS (default) ===================== */
.int-page[data-variant="cards"] .int-conn {
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.int-page[data-variant="cards"] .int-sec--alt .int-conn { box-shadow: var(--shadow-xs); }
.int-page[data-variant="cards"] .int-conn__chip { margin-bottom: 16px; }
.int-page[data-variant="cards"] .int-conn__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }

/* ===================== VARIANT B — LIST ===================== */
.int-page[data-variant="list"] .int-grid { grid-template-columns: 1fr; gap: 0; max-width: 860px; }
.int-page[data-variant="list"] .int-conn {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.int-page[data-variant="list"] .int-conn:first-child { padding-top: 0; }
.int-page[data-variant="list"] .int-conn:last-child { padding-bottom: 0; border-bottom: 0; }
.int-page[data-variant="list"] .int-conn__chip { width: 52px; height: 52px; }
.int-page[data-variant="list"] .int-conn__body { flex: 1; min-width: 0; }
.int-page[data-variant="list"] .int-conn__head { display: flex; align-items: center; gap: 12px; }
.int-page[data-variant="list"] .int-conn__desc { margin-top: 4px; }

/* ===================== VARIANT C — DIRECTORY ===================== */
.int-page[data-variant="directory"] .int-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.int-page[data-variant="directory"] .int-sec { padding: clamp(40px, 5vw, 64px) 0; }
.int-page[data-variant="directory"] .int-conn {
  flex-direction: column;
  align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: left;
}
.int-page[data-variant="directory"] .int-sec--alt .int-conn { box-shadow: var(--shadow-xs); }
.int-page[data-variant="directory"] .int-conn__chip { width: 40px; height: 40px; margin-bottom: 14px; }
.int-page[data-variant="directory"] .int-conn__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.int-page[data-variant="directory"] .int-conn__desc { margin-top: 0; font-size: 13.5px; }

/* ===================== BIM CONNECTION HUB ===================== */
/* Revit + IFC cards (keeping their copy) wired to a central Tektome
   mark. 3 layouts via data-bim-viz on .int-bimhub: flank · hub · stack.
   Uses CSS grid placement + connector lines; independent of the page
   layout variant. */
.int-bimhub { position: relative; max-width: 940px; margin: 0 auto; display: grid; }
.int-bimcard {
  min-width: 0;
  display: flex; gap: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-xs);
}
.int-bimcard__body { min-width: 0; }
.int-bimcard .int-conn__chip { flex: 0 0 auto; }
.int-bimcard .int-conn__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }

.int-bimhub__core {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  justify-self: center; align-self: center;
  z-index: 2;
}
.int-bimhub__svg { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.int-bimhub__line { fill: none; stroke: var(--purple-300); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .int-bimhub__line { stroke-dasharray: 5 7; animation: int-flow 1.5s linear infinite; }
}

/* --- flank: Revit | Tektome | IFC, connected left/right --- */
.int-bimhub[data-bim-viz="flank"] { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; }
.int-bimhub[data-bim-viz="flank"] .int-bimcard[data-i="1"] { grid-column: 1; grid-row: 1; }
.int-bimhub[data-bim-viz="flank"] .int-bimhub__core { grid-column: 2; grid-row: 1; position: relative; margin: 0 64px; }
.int-bimhub[data-bim-viz="flank"] .int-bimcard[data-i="2"] { grid-column: 3; grid-row: 1; }
.int-bimhub[data-bim-viz="flank"] .int-bimhub__core::before,
.int-bimhub[data-bim-viz="flank"] .int-bimhub__core::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 64px; height: 2px;
  background-image: repeating-linear-gradient(to right, var(--purple-300) 0 5px, transparent 5px 12px);
  background-size: 24px 2px;
}
.int-bimhub[data-bim-viz="flank"] .int-bimhub__core::before { right: 100%; }
.int-bimhub[data-bim-viz="flank"] .int-bimhub__core::after { left: 100%; }

/* --- hub: Tektome on top centre, both cards below, branching lines --- */
.int-bimhub[data-bim-viz="hub"] { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 20px; min-height: 300px; }
.int-bimhub[data-bim-viz="hub"] .int-bimhub__core { grid-column: 1 / 3; grid-row: 1; margin-bottom: 26px; }
.int-bimhub[data-bim-viz="hub"] .int-bimcard[data-i="1"] { grid-column: 1; grid-row: 2; }
.int-bimhub[data-bim-viz="hub"] .int-bimcard[data-i="2"] { grid-column: 2; grid-row: 2; }
.int-bimhub[data-bim-viz="hub"] .int-bimhub__svg { display: block; }

/* --- stack: Revit, Tektome, IFC stacked vertically, connected up/down --- */
.int-bimhub[data-bim-viz="stack"] { grid-template-columns: 1fr; justify-items: center; gap: 0; }
.int-bimhub[data-bim-viz="stack"] .int-bimcard { max-width: 460px; width: 100%; }
.int-bimhub[data-bim-viz="stack"] .int-bimcard[data-i="1"] { grid-row: 1; }
.int-bimhub[data-bim-viz="stack"] .int-bimhub__core { grid-row: 2; position: relative; margin: 56px 0; }
.int-bimhub[data-bim-viz="stack"] .int-bimcard[data-i="2"] { grid-row: 3; }
.int-bimhub[data-bim-viz="stack"] .int-bimhub__core::before,
.int-bimhub[data-bim-viz="stack"] .int-bimhub__core::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 2px; height: 56px;
  background-image: repeating-linear-gradient(to bottom, var(--purple-300) 0 5px, transparent 5px 12px);
  background-size: 2px 24px;
}
.int-bimhub[data-bim-viz="stack"] .int-bimhub__core::before { bottom: 100%; }
.int-bimhub[data-bim-viz="stack"] .int-bimhub__core::after { top: 100%; }

/* Flowing dashes toward Tektome (matches the document hub). */
@media (prefers-reduced-motion: no-preference) {
  .int-bimhub[data-bim-viz="flank"] .int-bimhub__core::before { animation: int-flow-x-rev 1.5s linear infinite; }
  .int-bimhub[data-bim-viz="flank"] .int-bimhub__core::after { animation: int-flow-x 1.5s linear infinite; }
  .int-bimhub[data-bim-viz="stack"] .int-bimhub__core::before { animation: int-flow-y-rev 1.5s linear infinite; }
  .int-bimhub[data-bim-viz="stack"] .int-bimhub__core::after { animation: int-flow-y 1.5s linear infinite; }
}
@keyframes int-flow-x { to { background-position: -24px 0; } }
@keyframes int-flow-x-rev { to { background-position: 24px 0; } }
@keyframes int-flow-y { to { background-position: 0 -24px; } }
@keyframes int-flow-y-rev { to { background-position: 0 24px; } }

/* Stack into a simple column on small screens */
@media (max-width: 720px) {
  .int-bimhub,
  .int-bimhub[data-bim-viz="flank"],
  .int-bimhub[data-bim-viz="hub"],
  .int-bimhub[data-bim-viz="stack"] { grid-template-columns: 1fr; grid-template-rows: none; justify-items: stretch; gap: 16px; min-height: 0; }
  .int-bimhub__svg { display: none !important; }
  .int-bimhub__core,
  .int-bimhub[data-bim-viz="flank"] .int-bimhub__core,
  .int-bimhub[data-bim-viz="stack"] .int-bimhub__core { grid-column: 1 !important; margin: 4px 0 !important; }
  .int-bimhub__core::before, .int-bimhub__core::after { display: none !important; }
  .int-bimhub .int-bimcard[data-i="1"] { grid-row: auto; grid-column: 1; }
  .int-bimhub .int-bimcard[data-i="2"] { grid-row: auto; grid-column: 1; }
  .int-bimhub[data-bim-viz="stack"] .int-bimcard { max-width: none; }
}

/* ===================== DOCUMENT SECTION BACKGROUND (tweakable) ===================== */
/* Driven by --doc-bg (Background tweak); falls back to the light-blue section
   fill. On bold purple bands the section gets .is-dark, flipping copy to white
   while node pills stay white with dark text for legibility. */
#int-docsec { background: var(--doc-bg, var(--bg-section-alt)); }
#int-docsec.is-dark .int-head__title,
#int-docsec.is-dark .int-lead,
#int-docsec.is-dark .int-hub__core-name { color: var(--color-draft-white); }
#int-docsec.is-dark .int-lead strong { color: var(--color-draft-white); }
#int-docsec.is-dark .int-head__icon { background: rgba(255, 255, 255, 0.16); color: var(--color-draft-white); }
#int-docsec.is-dark .int-hub__caption { color: rgba(255, 255, 255, 0.85); }
#int-docsec.is-dark .int-hub__links path,
#int-docsec.is-dark .int-hub__ring { stroke: rgba(255, 255, 255, 0.7); }
#int-docsec.is-dark .int-hub__core-icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), var(--shadow-md); }

/* ===================== DOCUMENT CONNECTION HUB ===================== */
/* Scoped to the document section; independent of the page layout variant.
   3 visualisations switched via data-doc-viz on .int-hub: converge · hub ·
   orbit. Nodes are absolutely positioned in a 0–100 coordinate space that
   the SVG link layers share (preserveAspectRatio="none"), so lines and
   nodes always align. */
.int-hub { margin-top: 8px; }
.int-hub__stage {
  position: relative;
  height: clamp(330px, 42vw, 430px);
  max-width: 760px;
  margin: 0 auto;
}
.int-hub__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: none; }
.int-hub__links path,
.int-hub__links ellipse {
  fill: none;
  stroke: var(--purple-300);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.int-hub[data-doc-viz="converge"] .int-hub__links--converge,
.int-hub[data-doc-viz="hub"] .int-hub__links--hub,
.int-hub[data-doc-viz="orbit"] .int-hub__links--orbit { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .int-hub__links--converge path,
  .int-hub__links--hub path {
    stroke-dasharray: 5 7;
    animation: int-flow 1.5s linear infinite;
  }
}
@keyframes int-flow { to { stroke-dashoffset: -24; } }

/* Core (Tektome) */
.int-hub__core {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.int-hub__core-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 86px; height: 86px;
  border-radius: var(--radius-xl);
  background: var(--color-arch-purple);
  color: var(--color-draft-white);
  box-shadow: var(--shadow-md);
}
.int-hub__core-icon svg { width: 42px; height: 42px; }
/* Tektome logo mark — keep its 56:73 aspect ratio inside the core box. */
.int-hub__core-icon .int-mark { width: 34px; height: 44px; }
.int-hub__core-name { font-size: 15px; font-weight: var(--fw-semibold); color: var(--color-data-black); }

/* Nodes */
.int-hub__node {
  position: absolute;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 8px 16px 8px 8px;
  box-shadow: var(--shadow-xs);
  white-space: nowrap;
}
.int-hub__node .int-conn__chip { width: 34px; height: 34px; font-size: 11px; }
/* Real connector logos — no chip outline/fill; equal-width box keeps the
   brand names aligned. Hub-scoped + doubled class so it beats the page
   layout-variant chip rules (which otherwise add height/margin that throws
   the logo off the text's optical centre). */
.int-hub__node .int-conn__chip.int-conn__chip--logo {
  width: 44px; height: 30px; margin: 0; padding: 0;
  background: transparent; border: none;
}
.int-conn__chip--logo img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.int-hub__node-name { font-size: 14px; font-weight: var(--fw-medium); color: var(--color-data-black); }
.int-hub__caption {
  text-align: center;
  font-size: 13px;
  color: var(--fg-tertiary);
  margin: clamp(20px, 3vw, 32px) 0 0;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}

/* --- converge: nodes stacked left, lines merge into the core on the right --- */
.int-hub[data-doc-viz="converge"] .int-hub__core { left: 80%; top: 50%; }
.int-hub[data-doc-viz="converge"] .int-hub__node { transform: translate(0, -50%); left: 3%; }
.int-hub[data-doc-viz="converge"] .int-hub__node[data-i="1"] { top: 18%; }
.int-hub[data-doc-viz="converge"] .int-hub__node[data-i="2"] { top: 39%; }
.int-hub[data-doc-viz="converge"] .int-hub__node[data-i="3"] { top: 61%; }
.int-hub[data-doc-viz="converge"] .int-hub__node[data-i="4"] { top: 82%; }

/* --- hub: core centred, four nodes in the corners, spokes to the core --- */
.int-hub[data-doc-viz="hub"] .int-hub__core { left: 50%; top: 50%; }
.int-hub[data-doc-viz="hub"] .int-hub__node { transform: translate(-50%, -50%); }
.int-hub[data-doc-viz="hub"] .int-hub__node[data-i="1"] { left: 16%; top: 22%; }
.int-hub[data-doc-viz="hub"] .int-hub__node[data-i="2"] { left: 84%; top: 22%; }
.int-hub[data-doc-viz="hub"] .int-hub__node[data-i="3"] { left: 16%; top: 78%; }
.int-hub[data-doc-viz="hub"] .int-hub__node[data-i="4"] { left: 84%; top: 78%; }

/* --- orbit: core centred, nodes sitting on a ring --- */
.int-hub[data-doc-viz="orbit"] .int-hub__ring { stroke: var(--purple-200); stroke-dasharray: 2 5; }
.int-hub[data-doc-viz="orbit"] .int-hub__core { left: 50%; top: 50%; }
.int-hub[data-doc-viz="orbit"] .int-hub__node { transform: translate(-50%, -50%); }
.int-hub[data-doc-viz="orbit"] .int-hub__node[data-i="1"] { left: 50%; top: 14%; }
.int-hub[data-doc-viz="orbit"] .int-hub__node[data-i="2"] { left: 84%; top: 50%; }
.int-hub[data-doc-viz="orbit"] .int-hub__node[data-i="3"] { left: 50%; top: 86%; }
.int-hub[data-doc-viz="orbit"] .int-hub__node[data-i="4"] { left: 16%; top: 50%; }

/* Stack into a simple centred list on small screens */
@media (max-width: 620px) {
  .int-hub__stage {
    height: auto;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 8px 0;
  }
  .int-hub__links { display: none !important; }
  .int-hub__core,
  .int-hub[data-doc-viz="converge"] .int-hub__core,
  .int-hub[data-doc-viz="hub"] .int-hub__core,
  .int-hub[data-doc-viz="orbit"] .int-hub__core { position: static; transform: none; left: auto; top: auto; }
  .int-hub__node,
  .int-hub[data-doc-viz="converge"] .int-hub__node,
  .int-hub[data-doc-viz="hub"] .int-hub__node,
  .int-hub[data-doc-viz="orbit"] .int-hub__node { position: static; transform: none; left: auto; top: auto; }
}

/* ---------- Closing band (Arch Purple — the allowed full-bleed) ---------- */
.int-closing { background: var(--gradient-hero); padding: clamp(56px, 7vw, 88px) 0; text-align: center; }
.int-closing__title {
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--color-draft-white); margin: 0;
}
.int-closing p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); margin: 18px auto 0; max-width: 52ch; }
.int-closing__actions { display: flex; justify-content: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.int-closing .tk-btn--primary { background: var(--color-draft-white); color: var(--color-arch-purple); border-color: var(--color-draft-white); }
.int-closing .tk-btn--primary:hover { background: var(--purple-50); border-color: var(--purple-50); color: var(--purple-800); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .int-page[data-variant="directory"] .int-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .int-grid,
  .int-page[data-variant="directory"] .int-grid { grid-template-columns: 1fr; }
  .int-head { gap: 14px; }
}

/* ── Direct-edit overrides (baked from Claude Design) ───────────────
   Applied via the design tool's direct-manipulation layer; these are
   the definitive positioning adjustments — earlier CSS attempts to fix
   line alignment are removed so these stand alone. */
.int-hub__core { margin: 15px 0 0 !important; }
.int-bimhub > div { margin: 0 64px !important; }
.int-bimhub .int-hub__core-icon { margin: 25px 0 0 !important; }
#int-docsec .int-hub [data-i="1"],
#int-docsec .int-hub [data-i="2"],
#int-docsec .int-hub [data-i="3"],
#int-docsec .int-hub [data-i="4"] { padding: 18px 16px 18px 18px !important; }
#int-docsec .int-hub [data-i="1"] :is(img, video),
#int-docsec .int-hub [data-i="3"] :is(img, video) { width: 30px !important; }