/*--------------- button effect ---------------*/

/* 鼓動/ドクンドクン */
.heartbeat {
    animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
    0% {
        transform: scale(1.2)
    }
    5% {
        transform: scale(1)
    }
    95% {
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(1.2)
    }
}

/* 発光/キラーン */
.bright {
    position: relative;
    overflow: hidden;

    &::before {
        position: absolute;
        content: '';
        display: inline-block;
        top: -180px;
        left: 0;
        width: 30px;
        height: 100%;
        background-color: #fbfbfb;
        animation: bright 2.5s ease-in-out infinite;
    }
}

@-webkit-keyframes bright {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* 伸縮/ぷるーん */
.expansion {
    animation: expansion 1s infinite;
}

@keyframes expansion {
    0% {
        transform: scale(1, 0.8);
    }
    20% {
        transform: scale(0.8, 1.1);
    }
    95% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 0.8);
    }
}

/* 波紋 */
.ripples {
    position: relative;
    transition: .2s;

    &::before,
    &::after {
        content: "";
        position: absolute;
        z-index: -10;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 5px;
        background-color: #fbfbfb;
        transform: translate3d(0,0,0);
    }

    &::before {
        animation: ripples 1s ease-out infinite;
    }

    &::after {
        animation: ripples 1s ease-out 1s infinite;
    }
}

@keyframes ripples {
    0% {
        transform:scale(.95);
        opacity:1;
    }
    90% {
        opacity:.1;
    } to {
        transform:scale(1.1,1.2);
        opacity:0;
    }
}

/* ふわふわ */
.float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* クリック */
.click {
    filter: drop-shadow(0 4px 0 #8e8e8edd);
    animation: click 1.5s infinite ease-in-out;
}
/* 
@keyframes click {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 4px 0 #8e8e8edd);
    }
    10% {
        transform: translateY(4px);
        filter: drop-shadow(0 0 0 #8e8e8edd);
    }
    20% {
        transform: translateY(0);
        filter: drop-shadow(0 4px 0 #8e8e8edd);
    }
} */
@keyframes click {
    0%, 100% {
        transform: translate(-50%, 0);
        filter: drop-shadow(0 4px 0 #8e8e8edd);
    }
    10% {
        transform: translate(-50%, 4px);
        filter: drop-shadow(0 0 0 #8e8e8edd);
    }
    20% {
        transform: translate(-50%, 0);
        filter: drop-shadow(0 4px 0 #8e8e8edd);
    }
}


/* ダブルクリック */
.double-click {
    filter: drop-shadow(4px 7px 0 #8e8e8edd);
    animation: double-click 2s infinite;
}

@keyframes double-click {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(4px 7px 0 #8e8e8edd);
    }
    10% {
        transform: translateY(4px);
        filter: drop-shadow(0 0 0 #8e8e8edd);
    }
    20% {
        transform: translateY(0);
        filter: drop-shadow(4px 7px 0 #8e8e8edd);
    }
    30% {
        transform: translateY(4px);
        filter: drop-shadow(0 0 0 #8e8e8edd);
    }
    40% {
        transform: translateY(0);
        filter: drop-shadow(4px 7px 0 #8e8e8edd);
    }
}

/* 遅延 */
.delay {
    animation-delay: 0.2s;
}