/* The desktop campaign is one raster composition: pulse it as a whole so the
   packages keep their proportions. A small overscan protects the crop edges. */
@media (min-width:701px) {
  .hero-campaign-art { transform-origin:50% 50%; }
  html[data-motion] .hero-campaign-art {
    animation:hero-product-pulse 6.8s ease-in-out 1s infinite both;
    animation-play-state:paused;
  }
  html[data-hero-motion='running'] .hero-campaign-art { animation-play-state:running; }
}

@keyframes hero-product-pulse {
  0%,100% { transform:scale(1.012); }
  50% { transform:scale(1.04); }
}

@media (max-width:700px) {
  .hero-mobile-products img { transform-origin:50% 53%; }
  html[data-motion] .hero-mobile-products img {
    animation:hero-mobile-product-pulse 6.6s ease-in-out 900ms infinite both;
    animation-play-state:paused;
  }
  html[data-hero-motion='running'] .hero-mobile-products img { animation-play-state:running; }
}

@keyframes hero-mobile-product-pulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.03); }
}

html[data-motion='reduced'] .hero-campaign-art,
html[data-motion='reduced'] .hero-mobile-products img { animation:none; transform:none; }

@media (prefers-reduced-motion:reduce) {
  html[data-motion] .hero-campaign-art,
  html[data-motion] .hero-mobile-products img { animation:none; transform:none; }
}