/* 首頁開場動畫 */
@keyframes scroll_lock {
    0% {
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    99% {
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    100% {
        width: 100%;
        height: unset;
        overflow: unset;
    }
}

@keyframes grab_title {
    0% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

@keyframes title_h1_in {
    0% {
        transform: translateX(-250%);
    }

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

@keyframes title_h2_in {
    0% {
        transform: translateX(250%);
    }

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

/* banner 背景 */
@keyframes banner_bg_1 {
    0% {
        top: 8%;
        left: 20%;
        transform: translate(-50%, -50%) skew(0deg, 0deg);
        filter: blur(0px);
    }

    25% {
        top: 4%;
        left: 24%;
        transform: translate(-50%, -50%) skew(10deg, 10deg);
        filter: blur(60px);
    }

    50% {
        top: 6%;
        left: 30%;
        transform: translate(-50%, -50%) skew(-5deg, 5deg);
        filter: blur(0px);
    }

    75% {
        top: 10%;
        left: 26%;
        transform: translate(-50%, -50%) skew(-10deg, 20deg);
        filter: blur(60px);
    }

    100% {
        top: 5%;
        left: 23%;
        transform: translate(-50%, -50%) skew(0deg, 10deg);
        filter: blur(0px);
    }
}

@keyframes banner_bg_2 {
    0% {
        bottom: 5%;
        right: 30%;
        transform: translate(50%, 50%) skew(0deg, 0deg);
        filter: blur(0px);
    }

    25% {
        bottom: 1%;
        right: 34%;
        transform: translate(50%, 50%) skew(-10deg, 10deg);
        filter: blur(80px);
    }

    50% {
        bottom: 4%;
        right: 39%;
        transform: translate(50%, 50%) skew(-15deg, -5deg);
        filter: blur(0px);
    }

    75% {
        bottom: 8%;
        right: 34%;
        transform: translate(50%, 50%) skew(0deg, -10deg);
        filter: blur(80px);
    }

    100% {
        bottom: 6%;
        right: 24%;
        transform: translate(50%, 50%) skew(10deg, 0deg);
        filter: blur(0px);
    }
}

@media screen and (max-width: 576px) {
    @keyframes banner_bg_1 {
        0% {
            top: 30%;
            left: 90%;
            transform: translate(-50%, -50%) rotate(90deg) skew(0deg, 0deg);
            filter: blur(0px);
        }

        25% {
            top: 26%;
            left: 96%;
            transform: translate(-50%, -50%) rotate(90deg) skew(10deg, 10deg);
            filter: blur(40px);
        }

        50% {
            top: 32%;
            left: 94%;
            transform: translate(-50%, -50%) rotate(90deg) skew(-5deg, 5deg);
            filter: blur(0px);
        }

        75% {
            top: 27%;
            left: 91%;
            transform: translate(-50%, -50%) rotate(90deg) skew(-10deg, 20deg);
            filter: blur(40px);
        }

        100% {
            top: 31%;
            left: 87%;
            transform: translate(-50%, -50%) rotate(90deg) skew(0deg, 10deg);
            filter: blur(0px);
        }
    }

    @keyframes banner_bg_2 {
        0% {
            bottom: 50%;
            right: 100%;
            transform: translate(50%, 50%) rotate(90deg) skew(0deg, 0deg);
            filter: blur(0px);
        }

        25% {
            bottom: 45%;
            right: 97%;
            transform: translate(50%, 50%) rotate(90deg) skew(-10deg, 10deg);
            filter: blur(60px);
        }

        50% {
            bottom: 40%;
            right: 102%;
            transform: translate(50%, 50%) rotate(90deg) skew(-15deg, -5deg);
            filter: blur(0px);
        }

        75% {
            bottom: 44%;
            right: 106%;
            transform: translate(50%, 50%) rotate(90deg) skew(0deg, -10deg);
            filter: blur(60px);
        }

        100% {
            bottom: 42%;
            right: 100%;
            transform: translate(50%, 50%) rotate(90deg) skew(10deg, 0deg);
            filter: blur(0px);
        }
    }
}

/* 向下 */
@keyframes translate_down {
    0% {
        transform: translateY(-120%);
    }

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

/* 首頁About背景 */
@keyframes white_ball_1 {
    0% {
        top: -10%;
        right: -10%;
    }

    20% {
        top: 10%;
        right: 30%;
    }

    40% {
        top: 35%;
        right: 15%;
    }

    60% {
        top: 50%;
        right: 55%;
    }

    80% {
        top: 35%;
        right: 80%;
    }

    100% {
        top: 45%;
        right: 115%;
    }
}


@keyframes white_ball_2 {
    0% {
        bottom: 40%;
        left: -30%;
    }

    20% {
        bottom: 30%;
        left: 10%;
    }

    40% {
        bottom: 5%;
        left: 5%;
    }

    60% {
        bottom: 0%;
        left: 55%;
    }

    80% {
        bottom: 15%;
        left: 90%;
    }

    100% {
        bottom: 50%;
        left: 115%;
    }
}

/* 首頁Agenda/Notes背景 */
@keyframes grad_bg {
    0% {
        top: 0%;
        right: -70%;
        transform: rotate(0deg);
    }

    20% {
        top: 10%;
        right: -10%;
        transform: rotate(-100deg);
    }

    45% {
        top: 5%;
        right: 50%;
        transform: rotate(-200deg);
    }

    60% {
        top: 30%;
        right: 10%;
        transform: rotate(-300deg);
    }

    80% {
        top: 60%;
        right: -10%;
        transform: rotate(-400deg);
    }

    100% {
        top: 0%;
        right: -70%;
        transform: rotate(-360deg);
    }
}

/* 透明出現 */
@keyframes appear_opacity {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

/* 透明消失 */
@keyframes hide_opacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* 由左到右出現 */
@keyframes appear_path {
    0% {
        clip-path: inset(0% 100% 0% 0%);
    }

    100% {
        clip-path: inset(0% 0% 0% 0%);
    }
}

/* 繞圈 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* page背景 */
@keyframes page_bg_1 {
    0% {
        top: 0;
        left: 0;
        transform: rotate(0deg);
    }

    20% {
        top: -20%;
        left: 20%;
        transform: rotate(-80deg);
    }

    40% {
        top: -50%;
        left: 10%;
        transform: rotate(-160deg);
    }

    60% {
        top: -20%;
        left: -10%;
        transform: rotate(-210deg);
    }

    80% {
        top: 30%;
        left: 5%;
        transform: rotate(-290deg);
    }

    100% {
        top: 0;
        left: 0;
        transform: rotate(-360deg);
    }
}

@keyframes page_bg_2 {
    0% {
        bottom: 0;
        right: -20%;
        transform: rotate(0deg);
    }

    20% {
        bottom: -15%;
        right: 0%;
        transform: rotate(80deg);
    }

    40% {
        bottom: -50%;
        right: -10%;
        transform: rotate(160deg);
    }

    60% {
        bottom: -20%;
        right: -40%;
        transform: rotate(210deg);
    }

    80% {
        bottom: 10%;
        right: -10%;
        transform: rotate(280deg);
    }

    100% {
        bottom: 0;
        right: -20%;
        transform: rotate(360deg);
    }
}

/* 跑馬燈 */
@keyframes marquee {
    from {
        transform: translateX(100vw)
    }

    to {
        transform: translateX(-100%)
    }
}