/* Home: integrations (Figma 307:3626) */
.s-integrations { overflow: hidden; }
.s-integrations__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

/* Copy column */
.s-integrations__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-10); }
.s-integrations__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); max-width: 700px; }
.s-integrations__tag {
  display: inline-flex; align-items: center; height: 32px; margin-bottom: var(--space-3);
  padding-inline: var(--space-4); border-radius: var(--radius-pill);
  background: var(--black-5); border: 1px solid var(--black-5);
  font-weight: var(--fw-medium); font-size: var(--body-sm-size); line-height: 1.2; letter-spacing: var(--body-sm-ls);
  color: var(--text-strong);
}
.s-integrations__title { font-size: var(--h2-size); line-height: 1.1; letter-spacing: var(--h2-ls); }
.s-integrations__text {
  max-width: 418px; margin-top: var(--space-8);
  font-size: var(--para-md-size); line-height: 1.5; letter-spacing: var(--para-md-ls); color: var(--text-medium);
}

.s-integrations__list { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.s-integrations__item {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: var(--fw-medium); font-size: var(--body-md-size); line-height: 1.2; letter-spacing: var(--body-md-ls);
  color: var(--text-strong);
}
.s-integrations__check { flex: none; color: var(--border-solid); }

/* "Request demo" uses .btn.btn--cta */
.s-integrations__btn { margin-top: var(--space-4); }

/* Checks draw their stroke once the list is in view (JS adds .int-anim / .is-in) */
.s-integrations__check path { stroke-dasharray: 20; stroke-dashoffset: 0; }
.s-integrations__list.int-anim .s-integrations__check path { stroke-dashoffset: 20; }
.s-integrations__list.int-anim.is-in .s-integrations__check path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out) calc(300ms + var(--i, 0) * var(--reveal-stagger));
}

/* Orbit visual: all positions are % of the 688px square in Figma.
   Motion: ripples from the core, an arc sweeping the middle ring, the icon layer turning once every 90s
   (each icon counter-turns so it stays upright) and a gentle float. Hover never stops it; the hovered icon
   leans toward the cursor (js sets --mx/--my), shows its name and the others fade back. */
.s-integrations__visual { display: flex; justify-content: center; }
.s-integrations__orbit {
  --app: 11.63%;
  --spin: 90s;
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
}
.s-integrations__ring,
.s-integrations__sweep,
.s-integrations__pulse {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
}
.s-integrations__ring { border: 2px solid; }
.s-integrations__ring--outer  { width: 100%;    height: 100%;    border-color: color-mix(in srgb, var(--orange-400) 18%, transparent); }
.s-integrations__ring--middle { width: 62.21%;  height: 62.21%;  border-color: color-mix(in srgb, var(--orange-400) 55%, transparent); }
.s-integrations__ring--inner  { width: 29.36%;  height: 29.36%;  border-color: var(--amber-600); }

/* Orange arc running around the middle ring */
.s-integrations__sweep {
  width: 62.21%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 72%, var(--orange-500) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: int-spin 9s linear infinite;
}

/* Signal ripples travelling out from the core */
.s-integrations__pulse {
  width: 29.36%; aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--orange-400) 60%, transparent);
  opacity: 0;
  animation: int-pulse 4.8s var(--ease-out) infinite;
}
.s-integrations__pulse--late { animation-delay: 2.4s; }

.s-integrations__core {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: 1;
  width: 10.76%; height: auto;
}

.s-integrations__layer { position: absolute; inset: 0; animation: int-spin var(--spin) linear infinite; }
.s-integrations__app {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  width: var(--app); aspect-ratio: 1;
}
.s-integrations__app:hover { z-index: 2; }
.s-integrations__app-in {
  position: absolute; inset: 0;
  animation:
    int-spin var(--spin) linear infinite reverse,
    int-float calc(5s + var(--i, 0) * 0.45s) var(--ease-in-out) calc(var(--i, 0) * -0.7s) infinite alternate;
}
.s-integrations__tile {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--base-high);
  border: 1px solid rgb(5 5 5 / 0.1);
  border-radius: 50%;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform var(--dur-slow) var(--ease-out), scale var(--dur-slow) var(--ease-spring), opacity var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease);
}
.s-integrations__tile img { width: 55%; height: auto; border-radius: var(--radius-sm); }

/* App name tag on hover */
.s-integrations__tag-name {
  position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 4px; z-index: 1;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--amber-950); color: var(--text-negative);
  font-size: var(--body-sm-size); font-weight: var(--fw-medium); line-height: 1.2; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), translate var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
  .s-integrations__app:hover .s-integrations__tile {
    scale: 1.12;
    border-color: color-mix(in srgb, var(--orange-400) 45%, transparent);
    box-shadow: var(--shadow-md), 0 0 0 6px color-mix(in srgb, var(--orange-400) 12%, transparent);
  }
  .s-integrations__app:hover .s-integrations__tag-name { opacity: 1; translate: -50% 0; }
  /* Other icons step back so the hovered one reads first */
  .s-integrations__orbit:has(.s-integrations__app:hover) .s-integrations__app:not(:hover) .s-integrations__tile { opacity: 0.5; }
}

@keyframes int-spin { to { rotate: 360deg; } }
@keyframes int-float {
  from { transform: translateY(-4px); }
  to   { transform: translateY(4px); }
}
@keyframes int-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* Loops rest while the section is off screen (JS toggles .is-paused) */
.s-integrations__orbit.is-paused *,
.s-integrations__orbit.is-paused { animation-play-state: paused; }

/* Icons pop in one by one after the orbit scales in (JS adds .int-anim / .is-in, then drops both) */
.s-integrations__orbit.int-anim .s-integrations__tile { opacity: 0; scale: 0.4; }
.s-integrations__orbit.int-anim .s-integrations__core { opacity: 0; scale: 0.7; }
.s-integrations__orbit.int-anim.is-in .s-integrations__tile {
  opacity: 1; scale: 1;
  transition: opacity var(--dur-slow) var(--ease) calc(350ms + var(--i) * 70ms), scale 600ms var(--ease-spring) calc(350ms + var(--i) * 70ms);
}
.s-integrations__orbit.int-anim.is-in .s-integrations__core {
  opacity: 1; scale: 1;
  transition: opacity var(--dur-slow) var(--ease) 150ms, scale 600ms var(--ease-spring) 150ms;
}

@media (prefers-reduced-motion: reduce) {
  .s-integrations__layer, .s-integrations__app-in { animation: none; }
  .s-integrations__sweep, .s-integrations__pulse { display: none; }
  .s-integrations__tile, .s-integrations__tag-name { transition: none; }
}

@media (min-width: 640px) {
  .s-integrations__orbit { width: min(100%, 600px); }
}

@media (max-width: 639px) {
  .s-integrations__content { gap: var(--space-8); }
  .s-integrations__br { display: none; }
  .s-integrations__cta { align-self: stretch; }
  .s-integrations__btn { width: 100%; justify-content: center; }
}

@media (min-width: 1024px) {
  .s-integrations__inner { grid-template-columns: 1fr 1fr; gap: 0; min-height: 694px; }
  .s-integrations__content { gap: calc(var(--space-12) + var(--space-2)); }
  .s-integrations__visual { justify-content: flex-end; }
  .s-integrations__content { position: relative; z-index: 1; }
  .s-integrations__orbit { width: 100%; flex: none; }
}

@media (min-width: 1280px) {
  /* Orbit is wider than its column in Figma (688 vs 600) and bleeds left toward the copy */
  .s-integrations__orbit { width: min(688px, calc(100% + 88px)); }
}