@charset "utf-8";

/*--預約呼吸--*/
@keyframes join_br {
    0% {
        filter: brightness(1.1);
        transform: scale(0.9);
    }

    50% {
        filter: brightness(0.8);
        transform: scale(0.85);
    }

    100% {
        filter: brightness(1.1);
        transform: scale(0.9);
    }
}



@keyframes bg {
    0% {
        background-size: auto 150%;
        filter: blur(30px);
        filter: blur(30px);
    }

    99% {
        background-size: auto 100%;
        backdrop-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        
    }
}


@keyframes bg_sp {
    0% {
        background-size:150%;
        filter: blur(30px);
        filter: blur(30px);
    }

    99% {
        background-size: 100%;
        backdrop-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        
    }
}



@-webkit-keyframes fadeInUp00 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInUp00 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

/*--防糊--*/
@keyframes fadeInUp002 {
    0% {
        opacity: 0;
        transform: translateY(20px) translateZ(0);
    }

    100% {
        opacity: 1;
        /* 加入極微小的旋轉或 Z 軸偏移，維持 GPU 加速狀態 */
        transform: translateY(0) translateZ(0) rotate(0.001deg);
    }
}

/* 如果有用到 prefix 版也建議同步修改 */
@-webkit-keyframes fadeInUp002 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px) translateZ(0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0) translateZ(0) rotate(0.001deg);
    }
}



/*----飛飛----*/
@keyframes fly1 {
    0% {
        transform: translateY(3%);
    }

    50% {
        transform: translateY(-2%);
    }

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

@keyframes fly2 {
    0% {
        transform: translateY(-2%);
    }

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

    100% {
        transform: translateY(-2%);
    }
}


@keyframes shake10-86 {

    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-5deg);
    }

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



@-webkit-keyframes fadeInRight00 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInRight00 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}



@-webkit-keyframes fadeInLeft00 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInLeft00 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}



@-webkit-keyframes fadeInDown00 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInDown00 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}




/*轉星星2*/
@keyframes spin_star-2 {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0;
    }

    10% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }


    50% {
        opacity: 1;
    }

    70% {
        transform: rotate(360deg) scale(0);
        opacity: 0;
    }

    100% {
        transform: rotate(0deg) scale(1);
        opacity: 0;
    }
}