/* ============================================================
   Background music control.

   Hand-written, unlike site.css, which is generated from the design
   export. The button itself is built by site.js and only exists when a
   track is configured.

   It borrows the floating nav's palette rather than the RSVP button's rose,
   so it reads as a quiet utility control and doesn't compete with the one
   action on the page that matters.
============================================================ */

/* Top-left is the only corner that stays clear: the section nav is pinned
   bottom-centre and widens to nearly the full viewport on narrow desktops,
   the RSVP button is bottom-right, and the menu button is top-right. */
#music-toggle {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  left: calc(16px + env(safe-area-inset-left));
  z-index: 71;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #C9A978;
  border-radius: 50%;
  background: rgba(252, 248, 240, 0.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(52, 43, 41, 0.16);
  cursor: pointer;
  transition: transform .3s ease, opacity .3s ease, background .2s ease;
}

#music-toggle:hover { background: rgba(201, 169, 120, 0.22); }
#music-toggle:active { transform: scale(0.94); }

#music-toggle:focus-visible {
  outline: 2px solid #C25859;
  outline-offset: 3px;
}

#music-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* The two icon states swap on aria-pressed, so the button's accessible state
   and its appearance can never disagree. */
#music-toggle [data-icon="on"] { display: none; }
#music-toggle [data-icon="off"] { display: block; }
#music-toggle[aria-pressed="true"] [data-icon="on"] { display: block; }
#music-toggle[aria-pressed="true"] [data-icon="off"] { display: none; }

/* Match the hero's entrance: the control fades in with the rest of the
   furniture rather than popping in over the gate. */
html.jn-motion #music-toggle {
  opacity: 0;
  transform: translateY(8px);
}
html.jn-motion.jn-hero-go #music-toggle {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease .4s, transform .6s ease .4s, background .2s ease;
}

/* Stay out of the way of the mobile menu, exactly as the RSVP button does. */
html.jn-menu-open #music-toggle {
  opacity: 0 !important;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #music-toggle,
  html.jn-motion #music-toggle,
  html.jn-motion.jn-hero-go #music-toggle {
    transition: none;
    transform: none;
    opacity: 1;
  }
}