/* ============================================
   Aires — Wave Bar Loader (#10)
   Drop-in CSS. No JS, no dependencies.

   Usage:
     <link rel="stylesheet" href="aires-wave-loader.css" />
     <div class="aires-loader" role="status" aria-label="Loading">
       <b></b><b></b><b></b>
     </div>

   Sizes (add a modifier class):
     .aires-loader--sm  ~ button-inline
     .aires-loader      ~ default
     .aires-loader--lg  ~ section / page

   Color: inherits from --aires-blue (falls back to #0047FF).
   Honors prefers-reduced-motion.
   ============================================ */

.aires-loader {
  --loader-color: var(--aires-blue, #0047FF);
  --loader-bar-w: 12px;
  --loader-bar-h: 60px;
  --loader-gap:   10px;

  display: inline-flex;
  gap: var(--loader-gap);
  align-items: center;
  height: var(--loader-bar-h);
}

.aires-loader b {
  display: block;
  width: var(--loader-bar-w);
  height: var(--loader-bar-h);
  background: var(--loader-color);
  border-radius: 999px;
  transform-origin: center;
  animation: aires-loader-wave 1.2s ease-in-out infinite;
}
.aires-loader b:nth-child(2) { animation-delay: -0.15s; }
.aires-loader b:nth-child(3) { animation-delay: -0.30s; }

/* Size modifiers */
.aires-loader--sm { --loader-bar-w: 4px;  --loader-bar-h: 18px; --loader-gap: 4px; }
.aires-loader--lg { --loader-bar-w: 18px; --loader-bar-h: 96px; --loader-gap: 14px; }

@keyframes aires-loader-wave {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .aires-loader b {
    animation: none;
    transform: scaleY(0.7);
    opacity: 0.7;
  }
}