/* =====================================================
    PMUSIQUE
    ICOSAÈDRE 3D
    ===================================================== */

#pmusique-player {

    position: fixed;

    right: 24px;
    bottom: 24px;

    width: 78px;
    height: 78px;

    z-index: 9990;

    user-select: none;
    -webkit-user-select: none;

    pointer-events: auto;
}


/* =====================================================
   BOUTON
   ===================================================== */

#pmusique-button {

    width: 78px;
    height: 78px;

    padding: 0;
    margin: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    outline: none;

    display: block;

    -webkit-tap-highlight-color: transparent;
}


/* =====================================================
   SVG
   ===================================================== */

.pmusique-svg {

    width: 100%;
    height: 100%;

    display: block;

    overflow: visible;

    /*
     * Petite ombre autour de l'objet.
     */

    filter:
        drop-shadow(
            0 6px 9px rgba(0, 0, 0, 0.30)
        );
}


/* =====================================================
   FACES
   ===================================================== */

.pmusique-face {
    stroke: none;
}



/* =====================================================
   PLAY
   ===================================================== */

.pmusique-play {

    fill: white;

    opacity: 0.96;

    filter:
        drop-shadow(
            0 1px 3px rgba(0, 0, 0, 0.45)
        );

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


/*
 * Lorsque la musique joue,
 * le triangle disparaît.
 */

.pmusique-playing .pmusique-play {

    opacity: 0;

}


/* =====================================================
   PETIT EFFET DE FLOTTEMENT AU REPOS
   ===================================================== */

#pmusique-button {

    animation:
        pmusique-float 3s ease-in-out infinite;
}


@keyframes pmusique-float {

    0% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-3px);
    }

    100% {
        transform:
            translateY(0);
    }
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {

    #pmusique-player {

        width: 68px;
        height: 68px;

        right: 15px;
        bottom: 15px;
    }


    #pmusique-button {

        width: 68px;
        height: 68px;
    }
}


/* =====================================================
   RÉDUCTION DES ANIMATIONS
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

    #pmusique-button {

        animation: none;
    }
}