/* Custom keyframes and small niceties — Tailwind utilities handle the rest. */

@media (prefers-reduced-motion: no-preference) {
  .ao-spin {
    animation: ao-spin 40s linear infinite;
  }
  @keyframes ao-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .ao-marquee {
    animation: ao-marquee 28s linear infinite;
    will-change: transform;
  }
  @keyframes ao-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

/* Ensure the rotating SVG group rotates around the viewBox center in all browsers */
.ao-spin {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Small improvement: smoother form focus on iOS */
input, select, textarea { -webkit-appearance: none; appearance: none; }
select {
  background-image:
    linear-gradient(45deg, transparent 50%, #5C2D7A 50%),
    linear-gradient(135deg, #5C2D7A 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}