/* =========================================================
   Music FM — Page Transition 2026
   מערכת מעבר אחת בלבד: Overlay נקי ללא הבהוב וללא Fade כפול
========================================================= */

:root{
    --mf-transition-blue:#147cff;
    --mf-transition-cyan:#59c7ff;
    --mf-transition-dark:#071832;
    --mf-transition-muted:#667085;
    --mf-transition-line:rgba(15,35,70,.10);
    --mf-transition-shadow:rgba(15,35,70,.13);
}

html.mf-page-transition-ready body{
    opacity:1;
    transform:none;
    filter:none;
}

.mf-page-transition-layer{
    position:fixed;
    inset:0;
    z-index:2147483000;
    pointer-events:none;
    display:grid;
    place-items:center;
    padding:24px;
    background:
        radial-gradient(circle at 50% 42%, rgba(20,124,255,.12), transparent 36%),
        rgba(247,249,252,.82);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    transition:
        opacity .18s ease,
        visibility 0s linear .18s;
}

.mf-page-transition-layer.is-active{
    opacity:1;
    visibility:visible;
    transition:
        opacity .18s ease,
        visibility 0s linear 0s;
}

.mf-page-transition-card{
    width:min(330px, calc(100vw - 42px));
    padding:22px 24px;
    border:1px solid var(--mf-transition-line);
    border-radius:5px;
    background:rgba(255,255,255,.96);
    box-shadow:
        0 22px 60px var(--mf-transition-shadow),
        inset 0 1px 0 rgba(255,255,255,.96);
    opacity:0;
    transform:translateY(8px) scale(.985);
    transition:
        opacity .18s ease,
        transform .18s ease;
}

.mf-page-transition-layer.is-active .mf-page-transition-card{
    opacity:1;
    transform:translateY(0) scale(1);
}

.mf-page-transition-brand{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    direction:ltr;
}

.mf-page-transition-brand strong{
    color:var(--mf-transition-dark);
    font-size:23px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.8px;
    white-space:nowrap;
}

.mf-page-transition-brand strong span{
    color:var(--mf-transition-blue);
}

.mf-page-transition-brand small{
    color:var(--mf-transition-muted);
    font-size:13px;
    line-height:1;
    font-weight:850;
    direction:rtl;
    white-space:nowrap;
}

.mf-page-transition-bar{
    position:relative;
    height:4px;
    margin-top:18px;
    overflow:hidden;
    border-radius:999px;
    background:#e6edf7;
}

.mf-page-transition-bar i{
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    width:38%;
    border-radius:999px;
    background:linear-gradient(90deg, var(--mf-transition-cyan), var(--mf-transition-blue));
    animation:mfTransitionBar .92s ease-in-out infinite;
}

@keyframes mfTransitionBar{
    0%{
        transform:translateX(120%);
        opacity:.6;
    }
    48%{
        opacity:1;
    }
    100%{
        transform:translateX(-270%);
        opacity:.75;
    }
}

@media(max-width:560px){
    .mf-page-transition-card{
        width:min(300px, calc(100vw - 34px));
        padding:20px 18px;
    }

    .mf-page-transition-brand strong{
        font-size:21px;
    }

    .mf-page-transition-brand small{
        font-size:12px;
    }
}

@media(prefers-reduced-motion: reduce){
    .mf-page-transition-layer,
    .mf-page-transition-card,
    .mf-page-transition-bar i{
        animation:none !important;
        transition:none !important;
        transform:none !important;
        filter:none !important;
    }

    .mf-page-transition-layer{
        background:rgba(247,249,252,.92);
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
}