/* ==========================================================================
   MAHARASHTRA WEDDING — Background music control
   --------------------------------------------------------------------------
   A small pill in the corner: cream paper, terracotta ink, a gold rim — the
   colours of the wada itself. Equaliser bars move while the music plays; the
   rim breathes when the browser has held the music back and a tap is needed.
   ========================================================================== */

.wada-music {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 9999;
}

.wada-music__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(240, 193, 121, 0.75);
  border-radius: 999px;
  background: rgba(253, 241, 226, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(60, 24, 8, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  color: #7d3a1d;
  font: 700 11px/1 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.wada-music__btn:hover { transform: translateY(-1px); background: #fff7ec; }
.wada-music__btn:active { transform: scale(0.97); }
.wada-music__btn:focus-visible { outline: 2px solid #f0c179; outline-offset: 3px; }

.wada-music__note { width: 14px; height: 14px; flex-shrink: 0; }

.wada-music__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.wada-music__bars i {
  width: 2px;
  height: 3px;
  border-radius: 1px;
  background: #8f4221;
  opacity: 0.55;
}

/* playing */
.wada-music.is-playing .wada-music__bars i { opacity: 1; animation: wada-music-bar 1s ease-in-out infinite alternate; }
.wada-music.is-playing .wada-music__bars i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.2s; }
.wada-music.is-playing .wada-music__bars i:nth-child(3) { animation-duration: 1.2s; animation-delay: -0.5s; }
.wada-music.is-playing .wada-music__bars i:nth-child(4) { animation-duration: 0.85s; animation-delay: -0.35s; }

@keyframes wada-music-bar { from { height: 3px; } to { height: 12px; } }

/* held back by the browser: invite a tap */
.wada-music.is-waiting .wada-music__btn { animation: wada-music-call 2.2s ease-in-out infinite; }

@keyframes wada-music-call {
  0%, 100% { box-shadow: 0 6px 20px rgba(60, 24, 8, 0.22), 0 0 0 0 rgba(240, 193, 121, 0.7); }
  50%      { box-shadow: 0 6px 20px rgba(60, 24, 8, 0.22), 0 0 0 8px rgba(240, 193, 121, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .wada-music.is-playing .wada-music__bars i { animation: none; height: 8px; }
  .wada-music.is-waiting .wada-music__btn { animation: none; }
}