/* =========================================================
   Music FM — Premium Logo 2026
   Clean final version: no shine cut, breathing wordmark,
   smooth scroll shrink/grow, open animated equalizer
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Orbitron:wght@700;800;900&display=swap');

:root{
    --mf-logo-blue:#147cff;
    --mf-logo-cyan:#59c7ff;
    --mf-logo-white:#ffffff;
}

/* ===== Main logo wrapper ===== */

.mf-premium-logo{
    order:1;
    min-width:255px;
    height:86px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-direction:row;
    gap:20px;
    justify-self:end;
    color:#fff;
    text-decoration:none;
    direction:ltr;
    unicode-bidi:isolate;
    transform-origin:center center;
    transition:
        height .72s cubic-bezier(.16,1,.3,1),
        transform .72s cubic-bezier(.16,1,.3,1),
        filter .55s ease,
        gap .72s cubic-bezier(.16,1,.3,1);
}

.mf-premium-logo:hover{
    transform:translateY(-1px) scale(1.018);
    filter:drop-shadow(0 0 14px rgba(20,124,255,.22));
}

/* ===== Wordmark ===== */

.mf-premium-logo-text{
    display:block;
    direction:ltr;
    unicode-bidi:isolate;
    text-align:left;
}

.mf-premium-logo-text b{
    display:flex;
    align-items:baseline;
    direction:ltr;
    unicode-bidi:isolate;
    white-space:nowrap;
    font-family:'Orbitron','Michroma','Heebo',Arial,sans-serif;
    font-size:33px;
    line-height:.9;
    font-weight:900;
    letter-spacing:-1.3px;
    text-transform:uppercase;
    transform-origin:center center;
    animation:mfPremiumLogoBreath 7s ease-in-out infinite;
    transition:
        font-size .72s cubic-bezier(.16,1,.3,1),
        letter-spacing .72s cubic-bezier(.16,1,.3,1),
        transform .55s cubic-bezier(.16,1,.3,1),
        filter .55s ease;
}

/* No overflow hidden here: keeps shadows/glow from being clipped */
.mf-premium-music,
.mf-premium-fm{
    display:inline-block;
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        text-shadow .55s ease,
        filter .55s ease,
        color .55s ease;
}

.mf-premium-music{
    color:#fff;
    text-shadow:
        0 1px 0 rgba(255,255,255,.12),
        0 10px 24px rgba(0,0,0,.22),
        0 0 10px rgba(255,255,255,.04);
}

.mf-premium-fm{
    margin-left:2px;
    color:var(--mf-logo-blue);
    text-shadow:
        0 0 18px rgba(20,124,255,.42),
        0 0 36px rgba(89,199,255,.20),
        0 12px 24px rgba(20,124,255,.22);
}

.mf-premium-logo:hover .mf-premium-music{
    transform:translateY(-1px);
    text-shadow:
        0 1px 0 rgba(255,255,255,.20),
        0 0 14px rgba(255,255,255,.10),
        0 12px 24px rgba(0,0,0,.25);
}

.mf-premium-logo:hover .mf-premium-fm{
    transform:translateY(-1px) scale(1.04);
    text-shadow:
        0 0 22px rgba(20,124,255,.62),
        0 0 44px rgba(89,199,255,.32),
        0 14px 28px rgba(20,124,255,.28);
}

.mf-premium-logo-text small{
    display:block;
    margin-top:7px;
    direction:rtl;
    unicode-bidi:isolate;
    text-align:right;
    color:rgba(255,255,255,.90);
    font-family:'Heebo',Arial,sans-serif;
    font-size:13px;
    line-height:1;
    font-weight:900;
    letter-spacing:.03px;
    white-space:nowrap;
    transition:
        opacity .45s ease,
        transform .72s cubic-bezier(.16,1,.3,1);
}

/* Subtle underline on hover only */
.mf-premium-logo-text::after{
    content:"";
    display:block;
    width:0;
    height:2px;
    margin-top:7px;
    margin-left:auto;
    background:linear-gradient(90deg,var(--mf-logo-blue),var(--mf-logo-cyan));
    border-radius:999px;
    opacity:.88;
    transition:width .38s cubic-bezier(.22,1,.36,1);
}

.mf-premium-logo:hover .mf-premium-logo-text::after{
    width:98px;
}

/* ===== Open equalizer, no square ===== */

.mf-premium-eq{
    position:relative;
    width:76px;
    height:42px;
    display:flex;
    align-items:end;
    justify-content:center;
    gap:5px;
    flex:0 0 auto;
    direction:ltr;
    transition:
        width .72s cubic-bezier(.16,1,.3,1),
        height .72s cubic-bezier(.16,1,.3,1),
        transform .72s cubic-bezier(.16,1,.3,1),
        filter .55s ease;
}

.mf-premium-eq i{
    position:relative;
    z-index:2;
    display:block;
    width:5px;
    border-radius:999px 999px 2px 2px;
    background:linear-gradient(180deg,#73f1ff 0%,#147cff 68%,#0757c8 100%);
    box-shadow:
        0 0 10px rgba(20,124,255,.45),
        0 0 18px rgba(89,199,255,.22);
    animation:mfPremiumEq 1.18s ease-in-out infinite;
    transform-origin:bottom;
}

.mf-premium-eq i:nth-child(1){height:10px;animation-delay:.02s;opacity:.75}
.mf-premium-eq i:nth-child(2){height:16px;animation-delay:.10s;opacity:.86}
.mf-premium-eq i:nth-child(3){height:24px;animation-delay:.18s}
.mf-premium-eq i:nth-child(4){height:33px;animation-delay:.26s}
.mf-premium-eq i:nth-child(5){height:42px;animation-delay:.34s}
.mf-premium-eq i:nth-child(6){height:31px;animation-delay:.42s}
.mf-premium-eq i:nth-child(7){height:23px;animation-delay:.50s}
.mf-premium-eq i:nth-child(8){height:16px;animation-delay:.58s;opacity:.88}
.mf-premium-eq i:nth-child(9){height:11px;animation-delay:.66s;opacity:.78}

.mf-premium-logo:hover .mf-premium-eq{
    filter:drop-shadow(0 0 12px rgba(20,124,255,.24));
}

.mf-premium-logo:hover .mf-premium-eq i,
body.mf-page-leaving .mf-premium-eq i,
body.menu-open .mf-premium-eq i,
.mf-premium-logo.is-logo-bump .mf-premium-eq i{
    animation-duration:.56s;
}

/* ===== Old logo compatibility ===== */

.mf-logo-exact:not(.mf-premium-logo),
.mf-live-logo{
    display:none !important;
}

/* ===== Scroll shrink ===== */

.mf-topbar-exact.is-scrolled .mf-premium-logo{
    height:72px;
    gap:14px;
    transform:scale(.92) translateY(-1px);
}

.mf-topbar-exact.is-scrolled .mf-premium-logo-text b{
    font-size:29px;
    letter-spacing:-1.05px;
}

.mf-topbar-exact.is-scrolled .mf-premium-logo-text small{
    opacity:0;
    transform:translateY(-4px);
    pointer-events:none;
    height:0;
    margin-top:0;
    overflow:hidden;
}

.mf-topbar-exact.is-scrolled .mf-premium-eq{
    width:64px;
    height:34px;
    gap:4px;
    transform:scale(.88);
}

.mf-topbar-exact.is-scrolled .mf-premium-eq i{
    width:4px;
}

/* ===== Scroll direction animations from JS ===== */

.mf-premium-logo.is-growing-back{
    animation:mfLogoGrowBack .95s cubic-bezier(.16,1,.3,1) both;
}

.mf-premium-logo.is-growing-back .mf-premium-logo-text b{
    animation:
        mfPremiumLogoBreath 7s ease-in-out infinite,
        mfLogoTextGrowBack .95s cubic-bezier(.16,1,.3,1) both;
}

.mf-premium-logo.is-shrinking-down{
    animation:mfLogoShrinkDown .85s cubic-bezier(.16,1,.3,1) both;
}

/* Page/menu states */
body.mf-page-leaving .mf-premium-logo .mf-premium-logo-text b,
body.menu-open .mf-premium-logo .mf-premium-logo-text b{
    filter:drop-shadow(0 0 12px rgba(20,124,255,.30));
}

/* ===== Keyframes ===== */

@keyframes mfPremiumEq{
    0%,100%{
        transform:scaleY(.62);
        opacity:.72;
    }
    46%{
        transform:scaleY(1.08);
        opacity:1;
    }
}

@keyframes mfPremiumLogoBreath{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.014);
    }
}

@keyframes mfLogoGrowBack{
    0%{
        transform:scale(.92) translateY(-1px);
        filter:drop-shadow(0 0 0 rgba(20,124,255,0));
    }
    58%{
        transform:scale(1.035) translateY(-1px);
        filter:drop-shadow(0 0 14px rgba(20,124,255,.24));
    }
    100%{
        transform:scale(1) translateY(0);
        filter:drop-shadow(0 0 0 rgba(20,124,255,0));
    }
}

@keyframes mfLogoShrinkDown{
    0%{
        transform:scale(1) translateY(0);
    }
    52%{
        transform:scale(.885) translateY(-1px);
    }
    100%{
        transform:scale(.92) translateY(-1px);
    }
}

@keyframes mfLogoTextGrowBack{
    0%{
        letter-spacing:-1.05px;
    }
    58%{
        letter-spacing:-.55px;
    }
    100%{
        letter-spacing:-1.3px;
    }
}

/* ===== Responsive ===== */

@media(max-width:1120px){
    .mf-premium-logo{
        height:72px;
        min-width:auto;
        gap:13px;
    }

    .mf-premium-logo-text b{
        font-size:29px;
    }

    .mf-premium-logo-text small{
        display:none;
    }

    .mf-premium-eq{
        width:62px;
        height:34px;
        gap:4px;
    }

    .mf-premium-eq i{
        width:4px;
    }
}

@media(max-width:720px){
    .mf-premium-logo{
        height:64px;
        gap:10px;
    }

    .mf-premium-logo-text b{
        font-size:25px;
        letter-spacing:-1px;
        animation:none;
    }

    .mf-topbar-exact.is-scrolled .mf-premium-logo{
        transform:scale(.94);
    }

    .mf-premium-eq{
        width:48px;
        height:28px;
        gap:3px;
    }

    .mf-premium-eq i{
        width:3px;
    }

    .mf-premium-eq i:nth-child(1),
    .mf-premium-eq i:nth-child(9){
        display:none;
    }
}

@media(max-width:390px){
    .mf-premium-logo-text b{
        font-size:22px;
    }

    .mf-premium-eq{
        width:40px;
    }
}

/* ===== Accessibility ===== */

@media(prefers-reduced-motion: reduce){
    .mf-premium-logo,
    .mf-premium-logo *,
    .mf-premium-logo *::before,
    .mf-premium-logo *::after{
        animation:none !important;
        transition:none !important;
        transform:none !important;
    }
}