/* invitaNesia — Backsound Music */
.invitanesia-backsound {
    --invitanesia-bm-side: 15px;
    --invitanesia-bm-bottom: 25px;
    position: fixed !important;
    z-index: 99;
    bottom: var(--invitanesia-bm-bottom) !important;
    width: auto !important;
    height: auto !important;
    line-height: 1;
    pointer-events: none;
    box-sizing: border-box;
}
.invitanesia-backsound.is-right { right: var(--invitanesia-bm-side) !important; left: auto !important; }
.invitanesia-backsound.is-left { left: var(--invitanesia-bm-side) !important; right: auto !important; }

.invitanesia-backsound-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    background: rgba(0,0,0,.75);
    color: #fff;
    line-height: 1;
    font-size: 22px;
    overflow: visible;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.invitanesia-backsound-button:focus-visible { outline: 2px solid #17a3f7; outline-offset: 3px; }
.invitanesia-backsound-icons { display:flex; align-items:center; justify-content:center; width:100%; height:100%; position:relative; }
.invitanesia-backsound-play,
.invitanesia-backsound-pause { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:inherit; line-height:1; }
.invitanesia-backsound-pause { display:none; }
.invitanesia-backsound.is-playing .invitanesia-backsound-play { display:none; }
.invitanesia-backsound.is-playing .invitanesia-backsound-pause { display:flex; }

/* Keep Font Awesome and custom SVG icons visually consistent in editor/frontend. */
.invitanesia-backsound-play i,
.invitanesia-backsound-pause i { display:block; font-size:1em; line-height:1; color:currentColor; }
.invitanesia-backsound-play svg,
.invitanesia-backsound-pause svg { display:block; width:1em; height:1em; max-width:none; max-height:none; color:currentColor; fill:currentColor; }
.invitanesia-backsound-play svg *,
.invitanesia-backsound-pause svg * { fill:currentColor !important; stroke:currentColor; }

.invitanesia-backsound-audio { display:none !important; }
.invitanesia-backsound-youtube { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; left:-9999px !important; }

/* Custom Player */
.style-custom .invitanesia-backsound-equalizer { display:none; }
.style-custom .invitanesia-backsound-play,
.style-custom .invitanesia-backsound-pause { display:flex; }
.style-custom .invitanesia-backsound-pause { display:none; }
.style-custom.is-playing .invitanesia-backsound-play { display:none; }
.style-custom.is-playing .invitanesia-backsound-pause { display:flex; }

/* Music Equalizer — based on Invitation Elkit reference, adapted for invitaNesia. */
.style-equalizer .invitanesia-backsound-button {
    width:56px;
    height:56px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    gap:3px;
    overflow:visible;
}
/* Equalizer is a dedicated player style: never render the Custom Player icons here. */
.style-equalizer .invitanesia-backsound-play,
.style-equalizer .invitanesia-backsound-pause { display:none !important; }
.style-equalizer .invitanesia-backsound-equalizer {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    width:1.15em;
    height:1.15em;
}
.style-equalizer .invitanesia-backsound-equalizer i {
    display:block;
    width:3px;
    height:10px;
    background:#17a3f7;
    border-radius:999px;
    transform-origin:bottom;
    transition:height .3s ease;
}
.style-equalizer .invitanesia-backsound-equalizer i { animation:none; }
/* Animate the bars from the actual audio PLAYING state. */
.style-equalizer.is-playing .invitanesia-backsound-equalizer i:nth-child(1),
.style-equalizer .invitanesia-backsound-button.is-playing .invitanesia-backsound-equalizer i:nth-child(1),
.style-equalizer .invitanesia-backsound-equalizer.is-playing i:nth-child(1) { animation: invitanesia-eq-1 .8s ease-in-out infinite; }
.style-equalizer.is-playing .invitanesia-backsound-equalizer i:nth-child(2),
.style-equalizer .invitanesia-backsound-button.is-playing .invitanesia-backsound-equalizer i:nth-child(2),
.style-equalizer .invitanesia-backsound-equalizer.is-playing i:nth-child(2) { animation: invitanesia-eq-2 .7s ease-in-out infinite; }
.style-equalizer.is-playing .invitanesia-backsound-equalizer i:nth-child(3),
.style-equalizer .invitanesia-backsound-button.is-playing .invitanesia-backsound-equalizer i:nth-child(3),
.style-equalizer .invitanesia-backsound-equalizer.is-playing i:nth-child(3) { animation: invitanesia-eq-3 .9s ease-in-out infinite; }
.style-equalizer.is-playing .invitanesia-backsound-equalizer i:nth-child(4),
.style-equalizer .invitanesia-backsound-button.is-playing .invitanesia-backsound-equalizer i:nth-child(4),
.style-equalizer .invitanesia-backsound-equalizer.is-playing i:nth-child(4) { animation: invitanesia-eq-4 .6s ease-in-out infinite; }

.style-equalizer .invitanesia-backsound-button.is-playing::before,
.style-equalizer .invitanesia-backsound-button.is-playing::after {
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:50%;
    border:2px solid #17a3f7;
    pointer-events:none;
    z-index:-1;
    animation:invitanesia-audio-ripple 1.8s cubic-bezier(.24,0,.38,1) infinite;
    will-change:transform,opacity;
}
.style-equalizer .invitanesia-backsound-button.is-playing::after { animation-delay:.9s; }

/* The state class is on the outer player, so support it as well. */
.style-equalizer.is-playing .invitanesia-backsound-button::before,
.style-equalizer.is-playing .invitanesia-backsound-button::after {
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:50%;
    border:2px solid #17a3f7;
    pointer-events:none;
    z-index:-1;
    animation:invitanesia-audio-ripple 1.8s cubic-bezier(.24,0,.38,1) infinite;
    will-change:transform,opacity;
}
.style-equalizer.is-playing .invitanesia-backsound-button::after { animation-delay:.9s; }

/* Custom playing animations only. Equalizer has its own animation. */
.invitanesia-backsound.style-custom[data-animation="rotate"].is-playing .invitanesia-backsound-button { animation:invitanesia-backsound-rotate 2s linear infinite; }
.invitanesia-backsound.style-custom[data-animation="pulse"].is-playing .invitanesia-backsound-button { animation:invitanesia-backsound-pulse 1.6s ease-in-out infinite; }
.invitanesia-backsound.style-custom[data-animation="bounce"].is-playing .invitanesia-backsound-button { animation:invitanesia-backsound-bounce 1.4s ease-in-out infinite; }
.invitanesia-backsound.style-custom[data-animation="shake"].is-playing .invitanesia-backsound-button { animation:invitanesia-backsound-shake .7s ease-in-out infinite; }

@keyframes invitanesia-audio-ripple { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.5);opacity:0} }
@keyframes invitanesia-eq-1 { 0%,100%{height:6px} 50%{height:16px} }
@keyframes invitanesia-eq-2 { 0%,100%{height:16px} 50%{height:8px} }
@keyframes invitanesia-eq-3 { 0%,100%{height:10px} 50%{height:18px} }
@keyframes invitanesia-eq-4 { 0%,100%{height:14px} 50%{height:6px} }
@keyframes invitanesia-backsound-rotate { to{transform:rotate(360deg)} }
@keyframes invitanesia-backsound-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@keyframes invitanesia-backsound-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes invitanesia-backsound-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

/* Elementor editor: deliberately keep the exact frontend sticky presentation. */
.elementor-editor-active .invitanesia-backsound {
    position:fixed !important;
    pointer-events:auto;
}
.elementor-editor-active .invitanesia-backsound-button { pointer-events:auto; }

@media (max-width:767px) {
    .invitanesia-backsound { --invitanesia-bm-bottom: 18px; }
    .invitanesia-backsound.is-right { --invitanesia-bm-side: 12px; }
    .invitanesia-backsound.is-left { --invitanesia-bm-side: 12px; }
    .style-equalizer .invitanesia-backsound-button { width:44px; height:44px; }
    .style-equalizer .invitanesia-backsound-equalizer i { width:2.5px; }
}
@media (max-width:480px) {
    .invitanesia-backsound { --invitanesia-bm-bottom: 12px; }
    .invitanesia-backsound.is-right { --invitanesia-bm-side: 10px; }
    .invitanesia-backsound.is-left { --invitanesia-bm-side: 10px; }
}