/*! © 2026 Dastan Invites, dastaninvites.com. All rights reserved. This invitation's design, code, artwork and music may not be copied, reused or resold. */

.music-toggle {
    --mu-bg: rgba(255, 250, 246, .6);
    --mu-line: rgba(168, 100, 106, .35);
    --mu-ink: #a8646a;
    position: fixed;
    z-index: 60;
    top: max(14px, env(safe-area-inset-top));
    right: calc((100% - var(--card-w, 100%)) / 2 + max(14px, env(safe-area-inset-right)));
    width: 40px;
    height: 40px;
    padding: 9px;
    border: 1px solid var(--mu-line);
    border-radius: 50%;
    background: var(--mu-bg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--mu-ink);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: scale(.85);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .7, .2, 1), visibility .6s;
    -webkit-tap-highlight-color: transparent
}

.music-toggle.is-shown {
    opacity: 1;
    visibility: visible;
    transform: none
}

.music-toggle.is-shown.is-off {
    opacity: .7
}

.music-toggle svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible
}

.music-toggle .mu-dot {
    fill: currentColor;
    stroke: none
}

.music-toggle .mu-slash {
    display: none
}

.music-toggle.is-off .mu-slash {
    display: inline
}

.music-toggle:not(.is-off) svg {
    animation: mu-sway 2.6s ease-in-out infinite;
    transform-origin: 50% 80%
}

.music-toggle:focus-visible {
    outline: 2px solid var(--mu-ink);
    outline-offset: 2px
}

@keyframes mu-sway {
    0%,
    to {
        transform: rotate(-6deg)
    }
    50% {
        transform: rotate(6deg)
    }
}

@media(prefers-reduced-motion:reduce) {
    .music-toggle:not(.is-off) svg {
        animation: none
    }
}

@media print {
    .music-toggle {
        display: none
    }
}