/* Keep the template artwork; restore its chat, queue and orbit interactions.
 * Scene settings are intentionally centralized and independent of Framer.
 */
#services [data-wgmi-scene] {
  --wgmi-chat-duration: 8s;
  --wgmi-queue-duration: 10s;
  --wgmi-orbit-duration: 48s;
  --wgmi-scene-state: paused;
}
#services [data-wgmi-scene-running="true"] { --wgmi-scene-state: running; }

/* The original desktop reply lived below the card with opacity zero until
 * hover. Reserve its real space so the illustration is complete at rest. */
#services [data-wgmi-scene="chat"] {
  flex: 0 0 260px !important;
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  min-width: 0 !important;
  justify-content: center !important;
  gap: 18px !important;
}
#services [data-wgmi-scene="chat"] > [data-framer-name^="Message Card"] {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start !important;
  justify-content: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  flex: none !important;
  position: relative !important;
  inset: auto !important;
  opacity: 1 !important;
  gap: 7px 10px !important;
  overflow: visible !important;
}
#services [data-wgmi-scene="chat"] [data-framer-name="Message Card 1"] > :first-child {
  grid-column: 2;
  grid-row: 1;
}
#services [data-wgmi-scene="chat"] [data-framer-name="Message Card 1"] [data-framer-name="Chat UI"] {
  grid-column: 2;
  grid-row: 2;
}
#services [data-wgmi-scene="chat"] [data-framer-name="Message Card 1"] [data-framer-name="Profile Pic"] {
  grid-column: 1;
  grid-row: 2;
  width: 28px !important;
  height: 28px !important;
  margin-top: 4px;
}
#services [data-wgmi-scene="chat"] > [data-framer-name="Message Card 2"] {
  grid-template-columns: minmax(0, 1fr) 28px;
}
#services [data-wgmi-scene="chat"] [data-framer-name="Message Card 2"] > :first-child {
  grid-column: 2;
  grid-row: 1;
  width: 28px !important;
  height: 28px !important;
  margin-top: 4px;
}
#services [data-wgmi-scene="chat"] [data-framer-name="Message Card 2"] [data-framer-name="Chat UI"] {
  grid-column: 1;
  grid-row: 1;
}
#services [data-wgmi-scene="chat"] [data-framer-name="Message Card 2"] > :last-child {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
}
#services [data-wgmi-scene="chat"] [data-framer-name="Chat UI"] {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 12px !important;
  transition: box-shadow 350ms ease;
}
#services [data-wgmi-scene="chat"] [data-framer-component-type="RichTextContainer"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  flex: none !important;
  white-space: normal !important;
}
#services [data-wgmi-scene="chat"] p {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
#services [data-wgmi-scene="chat"] [data-framer-name="Message Card 2"] {
  animation: wgmi-chat-answer var(--wgmi-chat-duration) ease-in-out infinite;
  animation-play-state: var(--wgmi-scene-state);
}
#services [data-wgmi-scene="chat"][data-wgmi-scene-engaged] [data-framer-name="Message Card 2"] [data-framer-name="Chat UI"] {
  box-shadow: 0 0 22px #85bdd51c;
}

/* Measured connectors share the figure's coordinate system. Their ports
 * meet real card edges and the visible W hub, rather than transformed hosts. */
#services [data-wgmi-scene="workflow"] { isolation: isolate; }
#services [data-wgmi-scene="workflow"] > .framer-1oowtvi-container,
#services [data-wgmi-scene="workflow"] > .framer-1my97za-container { display: none !important; }
#services [data-wgmi-workflow-connections] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
#services [data-wgmi-workflow-hub] { z-index: 1; }
#services [data-wgmi-channel-icon] { display: block; width: 100%; height: 100%; color: #d6e5eb; }
#services [data-wgmi-signal] {
  stroke-dasharray: 7 93;
  stroke-dashoffset: 100;
  animation: wgmi-workflow-signal 4s linear infinite;
  animation-play-state: var(--wgmi-scene-state);
}
#services [data-wgmi-workflow-route="1"] [data-wgmi-signal] { animation-delay: -1.3s; }
#services [data-wgmi-workflow-route="2"] [data-wgmi-signal] { animation-delay: -2.6s; }
#services [data-wgmi-scene="workflow"] [data-framer-name="Active Message Card"],
#services [data-wgmi-scene="workflow"] [data-framer-name="Remaining Message Cards"],
#services [data-wgmi-queue-item] {
  animation: none !important;
  translate: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Rotate the original six-arm composition while counter-rotating each logo.
 * Independent rotate preserves Framer's layout/centering transforms. */
#services [data-wgmi-scene="integrations"] {
  animation: wgmi-integration-orbit var(--wgmi-orbit-duration) linear infinite;
  animation-play-state: var(--wgmi-scene-state);
}
#services [data-wgmi-orbit-icon] {
  isolation: isolate;
  box-sizing: border-box;
  background: radial-gradient(ellipse at 28% 15%, #36596a 0%, #243745 46%, #111922 100%);
  border: 1px solid #7296aa55;
  animation: wgmi-integration-upright var(--wgmi-orbit-duration) linear infinite;
  animation-play-state: var(--wgmi-scene-state);
}
#services [data-wgmi-orbit-icon] img {
  /* Source PNGs contain their green spheres. Keep their highlights and white
   * icon silhouettes, taking the colour from the metallic background. */
  mix-blend-mode: luminosity;
}

@keyframes wgmi-chat-answer {
  0%, 18%, 88%, 100% { translate: 0 0; }
  35%, 65% { translate: 0 -5px; }
}
@keyframes wgmi-workflow-signal {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
@keyframes wgmi-integration-orbit { to { rotate: 1turn; } }
@keyframes wgmi-integration-upright { to { rotate: -1turn; } }

@media (max-width: 809.98px) {
  #services [data-wgmi-service-card="workflow"] { height: auto !important; }
  #services [data-wgmi-scene="workflow"] {
    display: flex !important;
    flex: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 16px 0 0 !important;
  }
  #services [data-wgmi-scene="workflow"] > [data-framer-name="Active Message Card"],
  #services [data-wgmi-scene="workflow"] > [data-framer-name="Remaining Message Cards"] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  #services [data-wgmi-workflow-mobile-hub] {
    position: relative;
    align-self: center;
    flex: none;
    width: 56px;
    height: 48px;
  }
  #services [data-wgmi-workflow-mobile-hub] img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center;
  }
  /* Keep the full circular orbit inside the phone card at every angle. */
  #services [data-wgmi-scene="integrations"] { scale: .8; }
}

@media (prefers-reduced-motion: reduce) {
  #services [data-wgmi-scene],
  #services [data-wgmi-scene] *,
  #services [data-wgmi-scene] *::before,
  #services [data-wgmi-scene] *::after {
    animation: none !important;
    transition: none !important;
  }
  #services [data-wgmi-signal] { stroke-dasharray: none; opacity: .35; }
}