/* ---------------------------------------------------------------------------
   Background music control (home page only).

   Replaces the discontinued WordPress "Soundy Background Music" plugin.

   Position: top left, just clear of the fixed header. That band is 100px tall
   and the logo ends at x=286, so 112px down and 16px in sits under the header
   without touching either the logo or the hamburger on the right.

   Icons: drawn as inline SVG rather than using the supplied blue/grey PNGs,
   because the control was asked for in the site purple and the PNGs cannot be
   recoloured reliably (a hue-rotate on the blue would not touch the grey pair
   at all). SVG also stays crisp at any size. The PNGs remain in
   /assets/images/player/ should the blue set ever be wanted back.

   z-index 1040 sits above the fixed navbar (1030) and below the Bootstrap
   modal (100000), so it never covers a dialog.
   --------------------------------------------------------------------------- */

.spa-music {
    position: fixed;
    left: 16px;
    /* 112px clears the 100px header on phones. */
    top: 112px;
    z-index: 1040;
}

/* On desktop the menu row sits lower and the navbar is 134px tall, not 100 -
   at 112px the control was landing on top of the menu. */
@media (min-width: 768px) {
    .spa-music {
        top: 146px;
    }
}

.spa-music-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;

    /* 44px minimum height keeps the tap target comfortable even though the
       icon itself is 24px; the padding is hit area, not decoration. */
    min-height: 44px;
    padding: 0 13px 0 10px;

    border: 1.5px solid #b30af3;
    border-radius: 22px;
    cursor: pointer;

    background-color: rgba(245, 240, 232, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    -webkit-tap-highlight-color: transparent;
}

.spa-music-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;
    /* play: square outline + triangle, in #b30af3 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1.5' y='1.5' width='21' height='21' rx='3.5' fill='none' stroke='%23b30af3' stroke-width='2'/%3E%3Cpath d='M9.5 7.2 L17 12 L9.5 16.8 Z' fill='%23b30af3'/%3E%3C/svg%3E");
}

.spa-music-btn.is-playing .spa-music-icon {
    /* pause: square outline + two bars */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1.5' y='1.5' width='21' height='21' rx='3.5' fill='none' stroke='%23b30af3' stroke-width='2'/%3E%3Crect x='8.4' y='7.2' width='2.9' height='9.6' fill='%23b30af3'/%3E%3Crect x='12.7' y='7.2' width='2.9' height='9.6' fill='%23b30af3'/%3E%3C/svg%3E");
}

.spa-music-label {
    font-family: "Patrick Hand", Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #b30af3;
    white-space: nowrap;
}

.spa-music-btn:hover,
.spa-music-btn:focus-visible {
    background-color: #fff;
    box-shadow: 0 3px 12px rgba(179, 10, 243, 0.32);
}

/* A visible ring is required for keyboard use. The :focus rule is the
   fallback for browsers without :focus-visible - where that selector is not
   understood the :not() rule below is dropped as invalid and the ring stays. */
.spa-music-btn:focus {
    outline: 3px solid #b30af3;
    outline-offset: 2px;
}

.spa-music-btn:focus:not(:focus-visible) {
    outline: none;
}

.spa-music-btn:focus-visible {
    outline: 3px solid #b30af3;
    outline-offset: 2px;
}

.spa-music-btn:active {
    transform: scale(0.96);
}

/* A slow breathing ring while the track plays, so the control reads as "on"
   at a glance rather than only by its icon. */
.spa-music-btn.is-playing::after {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: 22px;
    box-shadow: 0 0 0 0 rgba(179, 10, 243, 0.45);
    animation: spa-music-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes spa-music-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(179, 10, 243, 0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(179, 10, 243, 0); }
    100% { box-shadow: 0 0 0 0 rgba(179, 10, 243, 0); }
}

/* Someone who has asked for less motion gets none of it: no pulse, no
   transitions, no press-scale. The state is still clear from the icon. */
@media (prefers-reduced-motion: reduce) {
    .spa-music-btn,
    .spa-music-btn.is-playing::after {
        animation: none !important;
        transition: none !important;
    }
    .spa-music-btn:active {
        transform: none;
    }
}

/* Hidden until the script decides the browser can play audio at all. */
.spa-music[hidden] {
    display: none !important;
}