/* Angular / Oracle chips.
   Visual style (glass pill, dark mode) is inherited from .hero-chip and
   html.dark .hero-chip in tailwind-theme.css. Only position and the
   left-right motion are defined here. */

@keyframes heroSway {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(14px); }
}

@keyframes heroSwayReverse {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-14px); }
}

.hero-chip-3 {
  top: 0%;
  bottom: auto;
  left: 0;
  right: auto;
  animation: heroSway 4s ease-in-out infinite;
  animation-delay: 0.8s;
}

.hero-chip-4 {
  top: auto;
  bottom: 0%;
  right: 0%;
  left: auto;
  animation: heroSwayReverse 4s ease-in-out infinite;
  animation-delay: 2.2s;
}

@media (prefers-reduced-motion: reduce) {
  .hero-chip-3,
  .hero-chip-4 { animation: none; }
}