/* ==========================================================================
   07 Integrations — half-circle orbit of connectors around the Redloop core
   ========================================================================== */
#integrations { overflow: clip; }

#integrations .int-orbit {
  --H: min(44vw, 540px);
  position: relative; height: var(--H); margin-top: clamp(40px, 5vw, 72px);
}
/* base hairline the core sits on (rail to rail, fades at the ends) */
#integrations .int-orbit::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, rgba(255,255,255,.42) 50%, var(--line-2) 80%, transparent);
}
#integrations .int-glow {
  position: absolute; left: 50%; bottom: 0; width: calc(var(--H) * 1.9); height: calc(var(--H) * .95);
  transform: translateX(-50%); pointer-events: none;
  background:
    radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255,255,255,.075), rgba(255,255,255,.02) 55%, transparent 80%),
    radial-gradient(ellipse 16% 26% at 50% 100%, rgba(255,255,255,.07), transparent 80%);
}
#integrations .int-axis {
  position: absolute; left: 50%; top: -6%; bottom: 0; width: 1px; margin-left: -.5px;
  background: linear-gradient(180deg, transparent, var(--line) 30%, var(--line-3));
}

/* rings: a square box centred on the base; ::before draws the upper half-arc */
#integrations .int-ring {
  --rot: 0deg;
  position: absolute; left: 50%; top: 100%; width: calc(var(--H) * 2 * var(--k)); aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none;
}
#integrations .int-ring::before {
  content: ""; position: absolute; inset: 0 0 50% 0;
  border: 1px solid var(--line-2); border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255,255,255,.025), transparent 75%);
  -webkit-mask-image: linear-gradient(0deg, #000 10%, rgba(0,0,0,.6));
          mask-image: linear-gradient(0deg, #000 10%, rgba(0,0,0,.6));
}
#integrations .int-spin { position: absolute; inset: 0; transform: rotate(var(--rot)); }

/* nodes */
#integrations .int-node {
  position: absolute; left: calc(50% + cos(var(--a)) * 50%); top: calc(50% + sin(var(--a)) * 50%);
  width: 0; height: 0; pointer-events: auto; outline: none;
}
#integrations .int-node-in {
  position: absolute; left: 0; top: 0; transform: rotate(calc(var(--rot) * -1));
}
#integrations .int-glyph {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-2);
  background: linear-gradient(180deg, var(--bg-4), var(--bg-2));
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 4px var(--bg), 0 10px 24px -12px rgba(0,0,0,.9);
  transition: transform .5s var(--ease-out), box-shadow .5s, color .4s, scale .9s cubic-bezier(.34, 1.56, .64, 1), opacity .5s;
  animation: int-bob 6s ease-in-out infinite;
}
#integrations.int-pre .int-glyph { opacity: 0; scale: 0; }
#integrations.int-pre .int-tip { visibility: hidden; }
#integrations .int-glyph svg { width: 18px; height: 18px; }
#integrations .int-node:nth-child(2) .int-glyph { animation-delay: -1.5s; animation-duration: 7s; }
#integrations .int-node:nth-child(3) .int-glyph { animation-delay: -3s; animation-duration: 5.4s; }
#integrations .int-node:nth-child(4) .int-glyph { animation-delay: -4.2s; animation-duration: 6.6s; }
@keyframes int-bob { 50% { translate: 0 -5px; } }

/* featured connectors: brighter neutral chip (no colour) */
#integrations .int-node.is-hot .int-glyph {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-3), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 4px var(--bg), 0 10px 24px -12px rgba(0,0,0,.9);
}
#integrations .int-node:hover .int-glyph,
#integrations .int-node:focus-visible .int-glyph,
#integrations .int-node.is-on .int-glyph {
  transform: scale(1.1); color: #0a0a0a; background: #ededed;
  box-shadow: inset 0 0 0 1px #ededed, 0 0 0 4px var(--bg), 0 0 0 5px var(--line-2), 0 14px 32px -10px rgba(255,255,255,.18);
}

/* tooltip: centred over the node, slid inward for nodes near the ends of the arc so it never leaves the shell */
#integrations .int-tip {
  --tx: calc(-50% - cos(var(--a)) * 42%);
  position: absolute; left: 0; bottom: 32px; transform: translate(var(--tx), 6px); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  height: 28px; padding: 0 10px; border-radius: var(--r-sm);
  background: rgba(10,10,11,.94); box-shadow: inset 0 0 0 1px var(--line-2), 0 12px 30px -12px rgba(0,0,0,.8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12.5px; transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
  z-index: 5;
}
#integrations .int-tip b { font-weight: 500; color: var(--text); }
#integrations .int-tip span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
#integrations .int-node:hover .int-tip,
#integrations .int-node:focus-visible .int-tip,
#integrations .int-node.is-on .int-tip { opacity: 1; transform: translate(var(--tx), 0); }
#integrations .int-node:hover, #integrations .int-node:focus-visible, #integrations .int-node.is-on { z-index: 6; }
#integrations .int-node:focus-visible .int-glyph { outline: 1.5px solid rgba(237,237,237,.6); outline-offset: 5px; }

/* beam from a spotlit node to the core */
#integrations .int-beam { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
#integrations .int-beam path { fill: none; stroke: url(#intBeamGrad); stroke-width: 1.5; stroke-linecap: round; opacity: 0; }

/* core */
#integrations .int-core {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 3;
  display: grid; justify-items: center;
}
#integrations .int-core-tile {
  width: 92px; height: 92px; border-radius: 24px; position: relative;
  background: linear-gradient(180deg, #1c1c1f, var(--bg-2));
  box-shadow: inset 0 0 0 1px var(--line-3), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 8px var(--bg), 0 0 0 9px var(--line-2), 0 24px 70px -16px rgba(255,255,255,.12);
  color: var(--text);
}
#integrations .int-core-tile .logo-mark { width: 46px; height: auto; }
#integrations .int-core-pulse {
  position: absolute; left: 50%; top: 46px; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.32); pointer-events: none;
  animation: int-pulse 3s var(--ease-out) infinite;
}
@keyframes int-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
#integrations .int-core-label {
  position: absolute; top: calc(100% + 14px); white-space: nowrap; color: var(--text-3);
}

/* capability cells */
#integrations .int-cells { margin-top: clamp(96px, 9vw, 140px); }
#integrations .int-cell { display: grid; gap: 14px; align-content: start; min-height: 220px; }
#integrations .int-dz { margin-bottom: 14px; }
#integrations .int-cell .h4 { font-size: 20px; letter-spacing: -0.03em; }
#integrations .int-cell p { max-width: 260px; }
#integrations .int-cell-k { position: absolute; top: var(--pad); right: var(--pad); }
#integrations .int-cell::after {
  content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, rgba(237,237,237,.7), transparent 60%);
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out);
}
#integrations .int-cell:hover::after { transform: scaleX(1); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  #integrations .int-orbit { --H: min(52vw, 440px); }
}
@media (max-width: 767px) {
  #integrations .int-orbit { --H: 60vw; margin-top: 40px; }
  #integrations .int-node.d-only { display: none; }
  #integrations .int-glyph { left: -17px; top: -17px; width: 34px; height: 34px; }
  #integrations .int-glyph svg { width: 15px; height: 15px; }
  #integrations .int-tip { bottom: 24px; height: 24px; font-size: 11.5px; }
  #integrations .int-core-tile { width: 68px; height: 68px; border-radius: 18px; }
  #integrations .int-core-tile .logo-mark { width: 34px; }
  #integrations .int-core-pulse { width: 68px; height: 68px; top: 34px; margin: -34px 0 0 -34px; border-radius: 18px; }
  #integrations .int-cells { margin-top: 84px; }
  #integrations .int-cell { min-height: 0; }
  #integrations .int-dz { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #integrations .int-glyph, #integrations .int-core-pulse { animation: none; }
}
@media (max-width: 767px) {
  #integrations .int-tip span { display: none; }
}