/* Ambient product activity is visible on touch too, not tied to :hover or a play button. */
@media (prefers-reduced-motion: no-preference) {
  .social-channel-card { animation: product-channel-arrive 6.2s ease-in-out infinite; }
  .social-channel-card:nth-child(2) { animation-delay: -.9s; }
  .social-channel-card:nth-child(3) { animation-delay: -1.8s; }
  .social-channel-card:nth-child(4) { animation-delay: -2.7s; }
  .social-channel-card svg { animation: product-channel-icon 6.2s ease-in-out infinite; }
  .social-channel-card:nth-child(2) svg { animation-delay: -.9s; }
  .social-channel-card:nth-child(3) svg { animation-delay: -1.8s; }
  .social-channel-card:nth-child(4) svg { animation-delay: -2.7s; }
  .automatic-app { animation: product-app-flow 5s ease-in-out infinite; }
  .automatic-app:nth-of-type(2) { animation-delay: -2.4s; }
  .automatic-app:nth-of-type(3) { animation-delay: -1.2s; }
  .automatic-app img { animation: product-app-icon 5s ease-in-out infinite; }
  .automatic-app:nth-of-type(2) img { animation-delay: -2.4s; }
  .automatic-app:nth-of-type(3) img { animation-delay: -1.2s; }
  .automatic-app-arrow { animation: product-signal-flow 2.4s ease-in-out infinite; }
  .automatic-app-arrow:nth-of-type(2) { animation-delay: -.9s; }
  .product-panel.is-active .automatic-card { animation: product-automatic-step 6.2s ease-in-out infinite; }
  .product-panel.is-active .automatic-card-reply { animation-delay: -3.2s; }
  .product-panel.is-active .automatic-card-done { animation-delay: -1.6s; }
}
@keyframes product-channel-arrive {
  0%, 100% { transform: translateX(0); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.065); }
  35%, 55% { transform: translateX(-6px); border-color: rgba(155,112,236,.58); background: rgba(107,53,212,.17); }
}
@keyframes product-channel-icon {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  35%, 55% { transform: scale(1.16); filter: brightness(1.25); }
}
@keyframes product-app-flow {
  0%, 70%, 100% { transform: translateY(0); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); }
  25%, 40% { transform: translateY(-5px); border-color: rgba(155,112,236,.62); background: rgba(107,53,212,.2); }
}
@keyframes product-app-icon {
  0%, 70%, 100% { transform: scale(1); }
  25%, 40% { transform: scale(1.14); }
}
@keyframes product-signal-flow {
  0%, 100% { transform: translateX(-2px); opacity: .5; }
  50% { transform: translateX(2px); opacity: 1; }
}
@keyframes product-automatic-step {
  0%, 65%, 100% { filter: brightness(1); transform: translateY(0); }
  18%, 32% { filter: brightness(1.35); transform: translateY(-5px); }
}