/* =========================================================
   Music FM — Global action feedback V2
   Matches home new-song motion and adds one global toast style.
========================================================= */

:root{
    --mf-action-blue:#147cff;
    --mf-action-like:#ef3f66;
    --mf-action-error:#dc3545;
}

.mf-action-ready{
    position:relative;
    transform:translateZ(0);
    transform-origin:center;
    transition:
        transform .18s ease,
        background-color .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.mf-action-ready i,
.mf-action-ready svg{
    transform-origin:center;
    transition:
        transform .18s ease,
        color .18s ease,
        fill .18s ease;
}

.mf-action-ready.mf-action-pressing{
    transform:scale(.91);
}

/* Like / favourite */
.mf-action-ready.mf-action-like.mf-action-pop{
    animation:mfHomeHeartButtonPop .52s cubic-bezier(.2,.9,.25,1.25);
}

.mf-action-ready.mf-action-like.mf-action-pop i,
.mf-action-ready.mf-action-like.mf-action-pop svg{
    animation:mfHomeHeartIconPop .52s cubic-bezier(.2,.9,.25,1.35);
}

/* Add / save / follow / vote / share */
.mf-action-ready:is(
    .mf-action-add,
    .mf-action-follow,
    .mf-action-save,
    .mf-action-vote,
    .mf-action-share
).mf-action-pop{
    animation:mfHomeAddButtonPop .58s cubic-bezier(.2,.9,.25,1.2);
}

.mf-action-ready:is(
    .mf-action-add,
    .mf-action-follow,
    .mf-action-save,
    .mf-action-vote,
    .mf-action-share
).mf-action-pop i,
.mf-action-ready:is(
    .mf-action-add,
    .mf-action-follow,
    .mf-action-save,
    .mf-action-vote,
    .mf-action-share
).mf-action-pop svg{
    animation:mfHomeAddIconSwap .58s cubic-bezier(.2,.9,.25,1.2);
}

.mf-action-ready.mf-action-confirmed::after{
    content:"";
    position:absolute;
    inset:-5px;
    border:1px solid currentColor;
    border-radius:inherit;
    opacity:0;
    pointer-events:none;
    animation:mfActionSuccessRing .7s ease-out;
}

.mf-action-ready.mf-action-error{
    animation:mfActionErrorShake .34s ease 2;
}

.mf-action-ready.mf-action-like:is(.is-liked,.liked,[aria-pressed="true"]){
    color:var(--mf-action-like);
}

.mf-action-ready.mf-action-add:is(.is-added,.is-saved,.is-in-playlist,[data-in-playlist="1"]),
.mf-action-ready.mf-action-follow:is(.is-following,.following,[aria-pressed="true"]),
.mf-action-ready.mf-action-save:is(.is-saved,[aria-pressed="true"]),
.mf-action-ready.mf-action-vote:is(.is-voted,.voted,[aria-pressed="true"]){
    color:var(--mf-action-blue);
}

/* One clean toast system for the whole site */
.mf-action-toast-stack{
    position:fixed;
    right:18px;
    bottom:calc(18px + env(safe-area-inset-bottom));
    z-index:10000050;
    width:min(360px,calc(100vw - 36px));
    display:grid;
    gap:8px;
    direction:rtl;
    pointer-events:none;
}

.mf-action-toast{
    min-height:50px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border:1px solid #dce6f2;
    border-radius:4px;
    background:#fff;
    color:#172033;
    box-shadow:0 16px 38px rgba(15,35,70,.15);
    opacity:0;
    transform:translateY(12px) scale(.98);
    transition:
        opacity .2s ease,
        transform .24s cubic-bezier(.2,.9,.25,1);
}

.mf-action-toast.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}

.mf-action-toast-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid #d6e7f9;
    border-radius:3px;
    background:#eef6ff;
    color:var(--mf-action-blue);
    font-size:13px;
}

.mf-action-toast.is-error .mf-action-toast-icon{
    border-color:#f4d1d5;
    background:#fff2f3;
    color:var(--mf-action-error);
}

.mf-action-toast-text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    font-weight:850;
}

@keyframes mfHomeHeartButtonPop{
    0%{transform:scale(1)}
    35%{transform:scale(.82)}
    68%{transform:scale(1.18)}
    100%{transform:scale(1)}
}

@keyframes mfHomeHeartIconPop{
    0%{transform:scale(1) rotate(0)}
    32%{transform:scale(.65) rotate(-8deg)}
    68%{transform:scale(1.45) rotate(7deg)}
    100%{transform:scale(1) rotate(0)}
}

@keyframes mfHomeAddButtonPop{
    0%{transform:scale(1)}
    38%{transform:scale(.82) rotate(-7deg)}
    72%{transform:scale(1.16) rotate(4deg)}
    100%{transform:scale(1) rotate(0)}
}

@keyframes mfHomeAddIconSwap{
    0%{transform:scale(1) rotate(0)}
    42%{transform:scale(.2) rotate(-100deg)}
    72%{transform:scale(1.35) rotate(12deg)}
    100%{transform:scale(1) rotate(0)}
}

@keyframes mfActionSuccessRing{
    0%{opacity:.42;transform:scale(.82)}
    100%{opacity:0;transform:scale(1.22)}
}

@keyframes mfActionErrorShake{
    25%{transform:translateX(3px)}
    75%{transform:translateX(-3px)}
}

@media(max-width:720px){
    .mf-action-toast-stack{
        right:9px;
        bottom:calc(68px + env(safe-area-inset-bottom));
        width:calc(100vw - 18px);
    }

    .mf-action-toast{
        min-height:48px;
        padding:7px 10px;
    }
}

@media(prefers-reduced-motion:reduce){
    .mf-action-ready,
    .mf-action-ready i,
    .mf-action-ready svg,
    .mf-action-ready.mf-action-pop,
    .mf-action-ready.mf-action-pop i,
    .mf-action-ready.mf-action-pop svg,
    .mf-action-ready.mf-action-confirmed::after,
    .mf-action-ready.mf-action-error,
    .mf-action-toast{
        animation:none!important;
        transition:none!important;
        transform:none!important;
    }
}