/*------------------------------------------------------------
スクロールアニメーション
------------------------------------------------------------*/

/* 即時フェードイン */
.fade-in {
    opacity: 0;
    animation: fadein 1s ease-in forwards;
}

@keyframes fadein {
    from {
        opacity: 0.1;
    }
    to {
        opacity: 1;
    }
}

/* スクロールフェードイン */
.scroll-in {
    opacity: 0;
    transform: translate(0, 0);
    transition: opacity 1.5s ease, transform 1.5s ease; /* スムーズなアニメーション */
}

/* フェードインの方向指定 */
.scroll-in--left {
    transform: translate(-30px, 0);
}

.scroll-in--right {
    transform: translate(30px, 0);
}

.scroll-in--bottom {
    transform: translate(0, 30px);
}

/* 表示時のスタイル */
.scroll-in.scroll-in--visible {
    opacity: 1;
    transform: translate(0, 0);
}



/*--------------- 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: '';
        top: -100px;
        left: -100px;
        width: 50px;
        height: 50px;
        background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
        z-index: 2;

        animation: bright 2.5s ease-in-out infinite;
    }
}

@-webkit-keyframes bright {
    0% { -webkit-transform: scale(0) rotate(25deg); opacity: 0; }
    50% { -webkit-transform: scale(1) rotate(25deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(25deg); 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);
    }
}

/* クリック */
:root {
    --move: clamp(0.125rem, 0.08rem + 0.223vw, 0.188rem);
    --shadow: clamp(0.125rem, 0.08rem + 0.223vw, 0.188rem);
}
.click {
    filter: drop-shadow(0 var(--shadow) 0 #8e8e8edd);
    animation: click 1.5s infinite ease-in-out;
}

@keyframes click {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 var(--shadow) 0 #8e8e8edd);
    }
    10% {
        transform: translateY(var(--move));
        filter: drop-shadow(0 0 0 #8e8e8edd);
    }
    20% {
        transform: translateY(0);
        filter: drop-shadow(0 var(--shadow) 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.4s;

    &::before {
        animation-delay: 0.4s;
    }
}