/* ===========================
   MOREVILLE AUDIO PLAYER
=========================== */

.mv-player{
    width:100%;
    text-align:center;
    font-family:'Arkhip',Arial,sans-serif;
}

/* КНОПКА */

.mv-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    width:320px;
    height:54px;

    border:none;
    border-radius:100px;

    background:rgba(255,255,255,.14);

    backdrop-filter:blur(14px);

    color:#f5efe6;

    cursor:pointer;

    transition:.35s ease;
}

.mv-btn:hover{

    background:rgba(255,255,255,.22);

    transform:translateY(-2px);

}

/* ТЕКСТ */

.mv-text{

    font-size:15px;

    letter-spacing:.12em;

    text-transform:uppercase;

    font-weight:400;

    white-space:nowrap;

}

/* ИНДИКАТОР */

.mv-dot{

    position:relative;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#f5efe6;

    flex-shrink:0;

}

/* ВОСПРОИЗВЕДЕНИЕ */

.mv-btn.playing .mv-dot{

    background:#b14a22;

}

.mv-btn.playing .mv-dot::after{

    content:'';

    position:absolute;

    left:50%;
    top:50%;

    width:7px;
    height:7px;

    border-radius:50%;

    background:rgba(177,74,34,.55);

    transform:translate(-50%,-50%);

    animation:mvWave 2.2s ease-out infinite;

}

@keyframes mvWave{

    0%{

        transform:translate(-50%,-50%) scale(1);

        opacity:.7;

    }

    70%{

        transform:translate(-50%,-50%) scale(4);

        opacity:0;

    }

    100%{

        transform:translate(-50%,-50%) scale(4);

        opacity:0;

    }

}

/* ПОДПИСЬ */

.mv-hint{

    margin-top:10px;

    color:rgba(255,255,255,.75);

    font-size:10px;

    letter-spacing:.18em;

    text-transform:uppercase;

}

/* ===========================
   ПЛАНШЕТЫ
=========================== */

@media (min-width:481px) and (max-width:959px){

    .mv-btn{

        width:220px;
        height:42px;

        gap:10px;

    }

    .mv-text{

        font-size:11px;

        letter-spacing:.12em;

    }

    .mv-hint{

        font-size:8px;

    }

}

/* ===========================
   ТЕЛЕФОНЫ
=========================== */

@media (max-width:480px){

    .mv-btn{

        width:220px;
        height:42px;

        gap:9px;

        border-radius:50px;

    }

    .mv-text{

        font-size:10px;

        letter-spacing:.14em;

    }

    .mv-dot{

        width:7px;
        height:7px;

    }

    .mv-hint{

        margin-top:10px;

        font-size:8px;

        letter-spacing:.12em;

        opacity:.8;

    }

}