/*
 * Integration Hub page — page-unique CSS only.
 * NOT part of the shared solutions.css design system: these power the
 * purple CTA band, the node-line connectors and the sync HUD visuals.
 * The shared system (hero, bento, modules, FAQ, grids) lives in solutions.css.
 */

.apb-page .bg-cream { background: var(--gutsy-cream); }
.apb-page .gutsy-purple-bg { background-color: var(--gutsy-purple); }

/* Benefits list */
.apb-page .benefit-card {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  text-align: left;
}
.apb-page .icon-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gutsy-purple);
  color: #ffffff;
  font-weight: 900;
}
.apb-page .benefit-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--gutsy-green);
}
.apb-page .benefit-card p { color: #64748b; }

/* UI card + node connectors (specific to Integration Hub) */
.apb-page .ui-card {
  background: #ffffff;
  border-radius: var(--radius-l);
  border: 1px solid rgba(155, 95, 250, 0.1);
  box-shadow: var(--shadow-md, 0 10px 25px rgba(0, 0, 0, 0.05));
  overflow: hidden;
}
.apb-page .node-line {
  position: relative;
  height: 2px;
  background: #e2e8f0;
}
.apb-page .node-line::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -3px;
  border-left: 6px solid #e2e8f0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

.apb-page .floating-ui { animation: float 4s ease-in-out infinite; }
.apb-page .pulse-ui { animation: pulse-soft 3s ease-in-out infinite; }

.apb-page .glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--gutsy-purple);
  border-radius: 100px;
  background: rgba(252, 250, 237, 0.8);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .apb-page .order-first-mobile { order: -1; }
}

/* ------------------------------------------------------------------
 * Title fade + blur — pure CSS, no JavaScript.
 * Each word is a .w span. Two mechanisms:
 *   - The hero (.w-load) plays once on page load, timed with delays.
 *   - Section titles (.w-anim) use CSS scroll-driven animation
 *     (animation-timeline: view()), staggered by word position.
 * Where a browser lacks scroll-driven animation support the whole
 * @supports block is skipped and the titles are simply visible.
 * Reduced-motion users get no animation and no blur.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .apb-page .w { display: inline-block; }

  /* Hero — plays on load. Quick but still legible as a stagger. */
  .apb-page .w-load .w {
    animation: wUp .55s cubic-bezier(.22, .61, .36, 1) both;
  }
  .apb-page .w-load .w:nth-child(1) { animation-delay: .04s; }
  .apb-page .w-load .w:nth-child(2) { animation-delay: .11s; }
  .apb-page .w-load .w:nth-child(3) { animation-delay: .18s; }
  .apb-page .w-load .w:nth-child(4) { animation-delay: .25s; }
  .apb-page .w-load .w:nth-child(5) { animation-delay: .32s; }
  .apb-page .w-load .w:nth-child(6) { animation-delay: .39s; }

  /* Section titles — scroll-driven */
  @supports (animation-timeline: view()) {
    .apb-page .w-anim .w {
      animation: wUp linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
    .apb-page .w-anim .w:nth-child(2) { animation-range: entry 8% entry 58%; }
    .apb-page .w-anim .w:nth-child(3) { animation-range: entry 16% entry 66%; }
    .apb-page .w-anim .w:nth-child(4) { animation-range: entry 24% entry 74%; }
    .apb-page .w-anim .w:nth-child(5) { animation-range: entry 32% entry 82%; }
    .apb-page .w-anim .w:nth-child(6) { animation-range: entry 40% entry 90%; }
  }
}

@keyframes wUp {
  from { opacity: 0; transform: translateY(24px); filter: blur(14px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}