/* Shared motion and image-fit refinements for the service pages. */

@media (prefers-reduced-motion: no-preference) {
  /* Shopify: a continuously active commerce ecosystem. */
  .integration-orbit {
    animation: bp-integration-breathe 7s ease-in-out infinite;
  }

  .integration-orbit::before {
    animation: bp-orbit-spin 24s linear infinite;
  }

  .integration-orbit::after {
    animation: bp-orbit-spin-reverse 17s linear infinite;
  }

  .integration-store::after {
    content: "";
    position: absolute;
    inset: -.7rem;
    border: 1px solid rgba(111, 182, 255, .55);
    border-radius: inherit;
    pointer-events: none;
    animation: bp-store-pulse 3.6s ease-out infinite;
  }

  .integration-node {
    animation: bp-node-drift 4.8s ease-in-out infinite;
  }

  .integration-node:nth-of-type(2n) { animation-delay: -.9s; }
  .integration-node:nth-of-type(3n) { animation-delay: -1.8s; }

  /* Keep the upgraded animation active after the scroll reveal has completed. */
  .shopify-page.shopify-motion-ready .integration-system.is-revealed .integration-orbit {
    animation: bp-integration-breathe 7s ease-in-out infinite;
  }

  .shopify-page.shopify-motion-ready .integration-system.is-revealed .integration-node {
    animation: bp-node-drift 4.8s ease-in-out infinite;
  }

  /* Meta: animate the planning rings, phone creative, and outcome cards. */
  .meta-why-visual::before {
    animation: bp-meta-inner-orbit 20s linear infinite;
  }

  .meta-why-visual::after {
    animation: bp-meta-outer-orbit 31s linear infinite;
  }

  .meta-why-phone {
    animation: bp-meta-phone-float 5.8s ease-in-out infinite;
  }

  .meta-why-visual article {
    animation: bp-node-drift 5.2s ease-in-out infinite;
  }

  .meta-why-visual article:nth-of-type(2n) { animation-delay: -1.1s; }
  .meta-why-visual article:nth-of-type(3n) { animation-delay: -2.2s; }

  /* AI: make the connected discovery system feel active without distraction. */
  .ai-future-network::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: min(70%, 36rem);
    aspect-ratio: 1;
    border: 1px dashed rgba(20, 104, 224, .25);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: bp-ai-ring-spin 28s linear infinite;
  }

  .ai-future-network__site::after {
    content: "";
    position: absolute;
    inset: -.65rem;
    border: 1px solid rgba(20, 104, 224, .45);
    border-radius: 1.1rem;
    pointer-events: none;
    animation: bp-store-pulse 4s ease-out infinite;
  }

  .ai-future-network article {
    animation: bp-node-drift 5.4s ease-in-out infinite;
  }

  .ai-future-network article:nth-of-type(2n) { animation-delay: -1.2s; }
  .ai-future-network article:nth-of-type(3n) { animation-delay: -2.4s; }

  .ai-future-network__lines i {
    animation: bp-line-glow 3.8s ease-in-out infinite;
  }

  .ai-future-network__lines i:nth-child(2n) { animation-delay: -1.1s; }
  .ai-future-network__lines i:nth-child(3n) { animation-delay: -2.2s; }
}

/* The Meta examples use portrait source images. Contain shows the entire creative. */
.meta-mini-browser img,
.meta-retarget-card img,
.meta-lead-ad img,
.meta-why-phone img {
  object-fit: contain !important;
  object-position: center;
  background: #edf6ff;
}

.meta-lead-ad img {
  background: #e7f3ff;
}

@keyframes bp-orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes bp-orbit-spin-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes bp-integration-breathe {
  50% { transform: scale(1.018); box-shadow: 0 0 5rem rgba(43, 125, 238, .16); }
}

@keyframes bp-store-pulse {
  0% { opacity: .9; transform: scale(.94); }
  70%, 100% { opacity: 0; transform: scale(1.16); }
}

@keyframes bp-node-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

@keyframes bp-meta-inner-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes bp-meta-outer-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes bp-meta-phone-float {
  0%, 100% { transform: translate(-50%, -50%) rotate(4deg) translateY(0); }
  50% { transform: translate(-50%, -50%) rotate(1deg) translateY(-12px); }
}

@keyframes bp-ai-ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes bp-line-glow {
  0%, 100% { opacity: .34; filter: brightness(.95); }
  50% { opacity: 1; filter: brightness(1.3); }
}

@media (max-width: 800px) {
  .meta-why-phone { animation: none !important; }
  .meta-why-visual article { animation: none !important; }
  .ai-future-network::after { width: 82%; }
}

@media (prefers-reduced-motion: reduce) {
  .integration-orbit,
  .integration-orbit::before,
  .integration-orbit::after,
  .integration-store::after,
  .integration-node,
  .meta-why-visual::before,
  .meta-why-visual::after,
  .meta-why-phone,
  .meta-why-visual article,
  .ai-future-network::after,
  .ai-future-network__site::after,
  .ai-future-network article,
  .ai-future-network__lines i {
    animation: none !important;
  }
}