/* "Connect everything through Fletch" — the integration hub from the old site
   (IntegrationsSection in _next/static/chunks/app/page-*.js), restyled for the
   redesign: same 12 integrations, same radial layout and curved connector
   lines, light surface instead of the dark gradient. */

.fl-integrations {
  box-sizing: border-box;
  width: 100%;
  padding: 0 40px;
  font-family: var(--fl-font-sans);
}

@media (min-width: 1220px) {
  .fl-integrations.fl-section-sep {
    /* Figma Rect 20 behind integrations (7184:15038): pad 68 / 76. */
    --fl-sep-pad-top: 68px;
    --fl-sep-pad-bottom: 76px;
  }
}

.fl-integrations__head {
  margin: 0 auto;
  text-align: center;
}

.fl-integrations__title {
  margin: 0;
  color: var(--fl-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 60px;
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 61.2px;
}

.fl-integrations__script {
  color: var(--fl-green);
  font-family: var(--fl-font-script);
  font-weight: 700;
}

.fl-integrations__lede {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--fl-text-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.fl-integrations__hub {
  position: relative;
  height: 698px;
  margin-top: 56px;
}

.fl-integrations__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fl-integrations__line-base {
  fill: none;
  stroke: rgba(38, 123, 76, 0.28);
  stroke-width: 1;
  opacity: 1;
}

/* pathLength="1" so one offset unit is the whole centre→card curve.
   Darker dashes ride a lighter solid track (Figma 7043:3223, #267B4C @ 82%). */
.fl-integrations__line-dash {
  fill: none;
  stroke: rgba(38, 123, 76, 0.82);
  stroke-linecap: round;
  stroke-dasharray: 0.032 0.05;
  stroke-width: 1;
  animation: fl-int-dash 16s linear infinite;
}

@keyframes fl-int-dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -1;
  }
}

/* Centre hub: reuses the old /static/central-hub-logo.png mark. */
.fl-integrations__center {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
}

.fl-integrations__glow {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: transparent;
}

.fl-integrations__ring {
  position: absolute;
  border: 2px solid rgba(38, 123, 76, 0.35);
  border-radius: 50%;
  animation: fl-int-ping 14s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.fl-integrations__ring--lg {
  width: 150px;
  height: 150px;
}

.fl-integrations__ring--md {
  width: 124px;
  height: 124px;
  animation-delay: 4.6s;
}

@keyframes fl-int-ping {
  0% {
    opacity: 0.7;
    transform: scale(0.85);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}

.fl-integrations__mark {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: grid;
  width: 80px;
  height: 80px;
  border: 1.5px solid var(--fl-green);
  border-radius: 50%;
  background: var(--fl-surface);
  box-shadow: 0 0 75.7px 20px #79e980;
  place-items: center;
}

.fl-integrations__mark img {
  display: block;
  width: 46px;
  height: 46px;
  /* Pixel centroid of the green mark sat ~11px right of the circle.
     This pulls it back so the visual mass lands on centre. */
  transform: translate(-2px, 0px);
  object-fit: contain;
}

/* Cards sit on a ring: left/top come from the angle, same maths as the
   original component (radius as a percentage of the hub box). */
.fl-int-card {
  position: absolute;
  top: var(--fl-y);
  left: var(--fl-x);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 224px;
  padding: 12px;
  border: 2px solid var(--fl-ink);
  border-radius: 8px;
  background: var(--fl-white);
  box-shadow: var(--fl-shadow-lg);
  /* Centring uses `translate` so `transform` is free for the float. */
  translate: -50% -50%;
  animation: fl-int-float var(--fl-float-duration, 9s) ease-in-out infinite;
  animation-delay: var(--fl-float-delay, 0s);
  transition: box-shadow 0.2s ease, scale 0.3s ease;
}

/* The old site's `float` keyframe, at a shorter travel so the cards stay
   close to their connector lines. */
@keyframes fl-int-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.fl-int-card:hover {
  box-shadow: 6px 6px 0 0 var(--fl-ink);
  animation-play-state: paused;
  scale: 1.04;
}

.fl-int-card__logo {
  flex: none;
  width: 44px;
  height: 44px;
}

.fl-int-card__name {
  margin: 0;
  color: var(--fl-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.fl-int-card__category {
  margin: 0;
  color: var(--fl-text-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

.fl-int-card__description {
  margin: 2px 0 0;
  color: #828690;
  font-size: 11px;
  font-weight: 400;
  line-height: 15px;
}

/* Hub reveal — the ring is empty until the section scrolls in. Each connector
   draws out from the centre first and its card then lands at the far end:
   cards left of the hub arrive from the left, cards right of it from the
   right. Opposite cards share a y, so pairs come in together and the ring
   fills top to bottom. */
.fl-integrations--armed .fl-int-card,
.fl-integrations--armed .fl-integrations__line-base,
.fl-integrations--armed .fl-integrations__line-dash {
  opacity: 0;
}

/* integrations.js sets `pathLength="1"` on this path, so one unit of dash
   covers the whole curve however long it really is, and moving the offset
   draws it on from the centre outwards. */
.fl-integrations--play .fl-integrations__line-base {
  stroke-dasharray: 1;
  animation: fl-int-line-draw 1600ms ease-out both;
  animation-delay: var(--fl-line-delay, 0ms);
}

/* Travelling dashes stay on one infinite animation. A second one-shot
   animation used to leave iteration-count at 1 after --done, which stopped
   the wires. */
.fl-integrations--play .fl-integrations__line-dash,
.fl-integrations--done .fl-integrations__line-dash {
  opacity: 1;
  animation: fl-int-dash 16s linear infinite;
  animation-delay: var(--fl-dash-phase, 0s);
}

/* Two animations: the entrance, then the idle float. The float is held until
   the entrance is over (300ms wait + 620ms run) so the card is not drifting
   while it arrives. */
.fl-integrations--play .fl-int-card {
  animation-name: fl-int-card-in, fl-int-float;
  animation-duration: 1600ms, var(--fl-float-duration, 9s);
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
  animation-delay: calc(var(--fl-reveal-delay, 0ms) + 480ms),
    calc(var(--fl-reveal-delay, 0ms) + 2080ms + var(--fl-float-delay, 0s));
}

/* A resize rebuilds the paths; once the entrance has run they should appear
   already drawn instead of animating again. */
.fl-integrations--done .fl-integrations__line-base {
  stroke-dasharray: none;
  animation-name: none;
  opacity: 1;
}

@keyframes fl-int-line-draw {
  from {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* Centring lives on `translate`, so the slide-in offsets that instead of
   `transform` — the float owns `transform` and the two must not collide. */
@keyframes fl-int-card-in {
  from {
    opacity: 0;
    translate: calc(-50% + var(--fl-slide, 0px)) -50%;
  }
  to {
    opacity: 1;
    translate: -50% -50%;
  }
}

/* Stacked-grid fallback: no ring to come in from, so a plain fade-up. The
   float is off at that width, leaving `transform` free. */
@keyframes fl-int-card-in-stacked {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-integrations__line-dash,
  .fl-integrations__ring,
  .fl-int-card,
  .fl-integrations--armed .fl-int-card,
  .fl-integrations--play .fl-int-card,
  .fl-integrations--armed .fl-integrations__line-base,
  .fl-integrations--armed .fl-integrations__line-dash,
  .fl-integrations--play .fl-integrations__line-base,
  .fl-integrations--play .fl-integrations__line-dash {
    opacity: 1;
    animation: none;
  }

  .fl-integrations--play .fl-integrations__line-base {
    stroke-dasharray: none;
  }
}

/* The wider ring reaches ~61px past the hub on each side, so shrink the cards
   before the column gets narrow enough for that to run off screen. */
@media (max-width: 1279px) {
  .fl-integrations__hub {
    height: 620px;
  }

  .fl-int-card {
    width: 186px;
  }
}

/* Below the ring breakpoint the cards fall back to a plain grid. */
@media (max-width: 1023px) {
  .fl-integrations {
    padding: 0;
  }

  .fl-integrations__title {
    font-size: clamp(36px, 7vw, 60px);
    line-height: 1.02;
  }

  .fl-integrations__hub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 16px;
    height: auto;
    margin-top: 40px;
  }

  .fl-integrations__lines,
  .fl-integrations__center {
    display: none;
  }

  .fl-int-card {
    position: static;
    width: auto;
    padding: 16px;
    translate: none;
    animation: none;
  }

  .fl-int-card__logo {
    width: 56px;
    height: 56px;
  }

  /* Outranks the ring's --play rule above, which would otherwise animate
     `translate` on a card that is no longer centred on a ring slot. */
  .fl-integrations--play .fl-int-card {
    animation-name: fl-int-card-in-stacked;
    animation-duration: 1000ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-delay: calc(var(--fl-index, 0) * 110ms);
    translate: none;
  }
}

@media (max-width: 800px) {
  .fl-integrations.fl-section-sep .fl-integrations__hub {
    grid-template-columns: minmax(0, 1fr);
    width: var(--fl-sep-card-width, min(312px, 84%));
    margin-inline: auto;
  }

  .fl-integrations.fl-section-sep .fl-int-card {
    width: 100%;
  }
}