/* ============================================================================
 * WAV chromatic-wave logo — shared presentation (control affordances + bounce)
 * Pairs with wav-logo.js. Linked by index.html, admin.html, and logo-demo.html
 * so every page shares one source of truth for the mark.
 * ========================================================================== */

/* Base mark geometry. The SVG carries the 594x306 viewBox, so the host needs a
   matching aspect-ratio to give the (height:100%) SVG a definite box to fill —
   without it the mark mis-sizes and misaligns next to the wordmark. */
.wav-logo { position: relative; display: inline-block; aspect-ratio: 594 / 306; line-height: 0; vertical-align: middle; }
.wav-logo .wav-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wav-logo .wav-svg rect { will-change: fill, filter, height; }

/* Interactive marks (data-wav-control) get a pointer + a visible focus ring
   so the click-to-cycle affordance is keyboard-reachable. */
.wav-logo[data-wav-control] { cursor: pointer; }
.wav-logo[data-wav-control]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 6px;
}

/* Orthogonal 'bounce' state — a whole-mark hop, composable with any colour
   state. Transform-only (GPU compositor), so it's cheap on weak devices. */
.wav-logo--bounce { animation: wav-logo-bounce 0.95s cubic-bezier(.34, 1.56, .64, 1) infinite; }
@keyframes wav-logo-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14%); }
}
@media (prefers-reduced-motion: reduce) {
  .wav-logo--bounce { animation: none; }
}