/* ================= BO INTEGRATIONS WIDGET — default styling =================
   Scoped under .bo-integrations-wrap. Reproduces .integrations-band /
   .integrations-mark / .integration-item exactly, unchanged. Adds a
   decorative "data flow" layer: a traveling pulse threading through the
   icon row, plus a radar-style ping on each icon — purely additive.
   ========================================================================= */

.bo-integrations-wrap{
  --ib-navy: #031B39;
  --ib-accent: #1083E6;
  --ib-line: #E4E8EE;
  --ib-bg: #F7F9FC;
  --ib-slate-light: #8B97A8;
  --ib-ease: cubic-bezier(.22,1,.36,1);
  --ib-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ib-flow-duration: 3.2s;
  font-family:'Roboto', sans-serif;
}

.bo-integrations-wrap section{
  background: var(--ib-section-bg, transparent);
  padding: var(--ib-padding-top, 0px) 0 var(--ib-padding-bottom, 80px);
}
.bo-integrations-wrap .ib-wrap{ max-width: var(--ib-container-max, 1220px); margin:0 auto; padding:0 40px; }

/* ---------- Band ---------- */
.bo-integrations-wrap .integrations-band{
  background: var(--ib-band-bg, #fff); border:1px solid var(--ib-band-border, var(--ib-line));
  border-radius: var(--ib-band-radius, 20px);
  padding: var(--ib-band-padding, 42px) 50px; display:flex; align-items:center; justify-content:space-between; gap:40px;
  box-shadow:0 30px 60px -40px rgba(3,27,57,.15);
}

.bo-integrations-wrap .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ib-accent); font-weight:500;
  display:flex; align-items:center; gap:10px;
}
.bo-integrations-wrap .eyebrow::before{
  content:''; width:18px; height:1px; background:var(--ib-accent); display:inline-block;
}
.bo-integrations-wrap .integrations-copy h3{
  font-family:'Roboto Slab', serif;
  font-weight:600; letter-spacing:-0.01em; color: var(--ib-heading-color, var(--ib-navy));
  font-size:22px; margin-bottom:8px;
}
.bo-integrations-wrap .integrations-copy p{
  font-size:13.5px; max-width:380px; color: var(--ib-desc-color, var(--ib-slate-light)); line-height:1.6;
}

.bo-integrations-wrap .integrations-marks{
  display:flex; gap:14px; flex-wrap:wrap; flex-shrink:0;
  position:relative;
}
.bo-integrations-wrap .integrations-mark{
  width: var(--ib-mark-size, 52px); height: var(--ib-mark-size, 52px); border-radius:12px;
  background: var(--ib-mark-bg, var(--ib-bg)); border:1px solid var(--ib-mark-border, var(--ib-line));
  display:flex; align-items:center; justify-content:center; transition: all .3s var(--ib-ease-spring);
  position:relative; z-index:2;
}
.bo-integrations-wrap .integrations-mark:hover{ border-color: var(--ib-mark-border-hover, var(--ib-accent)); transform:translateY(-3px); }
.bo-integrations-wrap .integrations-mark svg{
  width:22px; height:22px; stroke: var(--ib-icon-color, var(--ib-navy)); position:relative; z-index:2;
  transition: stroke .3s var(--ib-ease);
}
.bo-integrations-wrap .integrations-mark:hover svg{ stroke: var(--ib-icon-color-hover, var(--ib-accent)); }

.bo-integrations-wrap .integration-item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  position:relative; z-index:2;
}
.bo-integrations-wrap .integration-item span{
  font-size:11px; font-weight:500; color: var(--ib-label-color, var(--ib-slate-light));
  letter-spacing:.03em; text-align:center; transition:color .3s var(--ib-ease);
}
.bo-integrations-wrap .integration-item:hover span{ color: var(--ib-label-color-hover, var(--ib-navy)); }

/* ---------- Flow layer (new, additive) ---------- */

/* Connecting trace threading behind the icon row */
.bo-integrations-wrap .ib-flow-track{
  position:absolute;
  top:26px; left:0; right:0; height:1px;
  background:linear-gradient(to right, transparent, var(--ib-line-color, var(--ib-line)) 8%, var(--ib-line-color, var(--ib-line)) 92%, transparent);
  z-index:1;
  pointer-events:none;
}

/* Traveling glow dot, left to right, looping */
.bo-integrations-wrap .ib-flow-dot{
  position:absolute; top:50%; left:0;
  transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%;
  background: var(--ib-dot-color, var(--ib-accent));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--ib-dot-color, var(--ib-accent)) 16%, transparent),
    0 0 12px 2px color-mix(in srgb, var(--ib-dot-color, var(--ib-accent)) 55%, transparent);
  animation: bo-ib-flow-move var(--ib-flow-duration) cubic-bezier(.45,0,.55,1) infinite;
}

@keyframes bo-ib-flow-move{
  0%   { left:0%;   opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { left:100%; opacity:0; }
}

/* Radar-style ping on each icon — signals "live, connected" */
.bo-integrations-wrap .ib-ping-ring{
  position:absolute;
  top:50%; left:50%;
  width:100%; height:100%;
  transform:translate(-50%,-50%) scale(1);
  border-radius:12px;
  border:1.5px solid var(--ib-ping-color, var(--ib-accent));
  opacity:0;
  z-index:1;
  pointer-events:none;
  animation: bo-ib-ping calc(var(--ib-flow-duration) * 1.4) var(--ib-ease) infinite;
  animation-delay: var(--ib-ping-delay, 0s);
}

@keyframes bo-ib-ping{
  0%   { transform:translate(-50%,-50%) scale(1);   opacity:.55; }
  70%  { transform:translate(-50%,-50%) scale(1.55); opacity:0; }
  100% { transform:translate(-50%,-50%) scale(1.55); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .bo-integrations-wrap .ib-flow-dot,
  .bo-integrations-wrap .ib-ping-ring{ animation:none; opacity:0; }
}

/* ---------- Reveal ---------- */
.bo-integrations-wrap .reveal-scale{
  opacity:0; transform:scale(.94);
  transition:opacity .8s var(--ib-ease), transform .9s var(--ib-ease-spring);
}
.bo-integrations-wrap .reveal-scale.in{ opacity:1; transform:scale(1); }

@media (prefers-reduced-motion: reduce){
  .bo-integrations-wrap .reveal-scale{ opacity:1; transform:none; transition:none; }
}

/* ---------- Editor-active safety net ----------
   Elementor adds this class to the preview iframe <body> so plugins can
   force-show scroll-reveal content while editing, independent of any
   JS timing race. */
body.elementor-editor-active .bo-integrations-wrap .reveal-scale{
  opacity: 1 !important;
  transform: none !important;
}

/* ================= RESPONSIVE (unchanged breakpoints from original site) ================= */
@media (max-width:980px){
  .bo-integrations-wrap .ib-flow-track{ top:26px; }
}
@media (max-width:640px){
  .bo-integrations-wrap .ib-wrap{ padding:0 20px; }
  .bo-integrations-wrap .integrations-band{
    flex-direction:column; text-align:center; padding:32px 24px;
  }
  .bo-integrations-wrap .integrations-copy p{ margin:0 auto; }
  .bo-integrations-wrap .integrations-marks{ justify-content:center; }
  .bo-integrations-wrap .ib-flow-track{ top:26px; }
}