/*フェードイン */
.fadeIn {
    opacity: 0;
}

.st-fadeIn {
    animation: an-fadeIn 2s ease 1 forwards;
    opacity: 0;
}

.st-fadeIn-top {
    animation: an-fadeIn-top 5s 1 forwards;
    opacity: 0;
}

@keyframes an-fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes an-fadeIn-top {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*バウンス */
.bound {}

.st-bound {
    animation: an-bound 1s cubic-bezier(0.33, 1, 0.68, 1) infinite;
    transform: translateY(0);
}

@keyframes an-bound {
    0% {
        transform: translateY(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    25% {
        transform: translateY(-15px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        transform: translateY(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    75% {
        transform: translateY(-5px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        transform: translateY(0)
    }
}

.st-popIn {
    animation: an-popn 1.5s ease-out 1 forwards;
    transform: translateY(0);
}

@keyframes an-popn {
    0% {
        transform: translateY(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    25% {
        transform: translateY(-25px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        transform: translateY(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    75% {
        transform: translateY(-10px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        transform: translateY(0)
    }
}

/*左から*/
.leftIn {
    transform: translateX(-100px);
    opacity: 0;
}

.st-leftIn {
    animation: an-leftIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
    transform: translateX(-100px);
    opacity: 0;
}

@keyframes an-leftIn {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

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

/*右から */
.rightIn {
    transform: translateX(100px);
    opacity: 0;
}

.st-rightIn {
    animation: an-rightIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
    transform: translateX(100px);
    opacity: 0;
}

@keyframes an-rightIn {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

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


/*ズームイン */
.zoomIn {
    transform: scale(1.25);
    opacity: 0;
}

.st-zoomIn {
    animation: an-zoomIn 2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
    transform: scale(1.25);
    opacity: 0;
}

@keyframes an-zoomIn {
    0% {
        opacity: 0;
        transform: scale(1.25);
    }

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


/*アップ */
.upIn {
    transform: translateY(50px);
    opacity: 0;
}

.st-upIn {
    animation: an-upIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
    transform: translateY(50px);
    opacity: 0;
}

@keyframes an-upIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

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

/*ステップ*/
.delay02 {
    animation-delay: 0.05s;
}

.delay03 {
    animation-delay: 0.1s;
}

.delay04 {
    animation-delay: 0.15s;
}

.delay05 {
    animation-delay: 0.2s;
}

.delay06 {
    animation-delay: 0.25s;
}

.delay07 {
    animation-delay: 0.3s;
}

.delay08 {
    animation-delay: 0.35s;
}

.delay09 {
    animation-delay: 0.4s;
}

.delay10 {
    animation-delay: 0.45s;
}

.delay11 {
    animation-delay: 0.5s;
}

.delay12 {
    animation-delay: 0.55s;
}

.delay13 {
    animation-delay: 0.6s;
}

.delay14 {
    animation-delay: 0.65s;
}

.delay15 {
    animation-delay: 0.7s;
}

/*回転*/
.fukidashi {
    animation: an-fukidashi 3s linear infinite;
    transform: translateY(0)
}

@keyframes an-fukidashi {
    0% {
        transform: translateY(0)
    }

    10% {
        transform: translateY(10px)
    }

    20% {
        transform: translateY(0)
    }

    30% {
        transform: translateY(10px)
    }

    40% {
        transform: translateY(0)
    }

    100% {
        rotate: 0;
    }
}


.star01 {
    animation: an-round01 10s linear infinite;
    rotate: 0;
    opacity: 1;
}

@keyframes an-round01 {
    0% {
        rotate: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        rotate: 360deg;
        opacity: 1;
    }
}

.star02 {
    animation: an-round02 7s linear infinite;
    rotate: 45deg;
    opacity: 0.8;
}

@keyframes an-round02 {
    0% {
        rotate: 45deg;
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    100% {
        rotate: -405deg;
        opacity: 0.8;
    }
}

.star03 {
    animation: an-round03 10s linear infinite;
    rotate: -20deg;
    opacity: 1;
}

@keyframes an-round03 {
    0% {
        rotate: -20deg;
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        rotate: 340deg;
        opacity: 1;
    }
}

.star04 {
    animation: an-round04 10s linear infinite;
    rotate: -20deg;
    opacity: 0.5;
}

@keyframes an-round04 {
    0% {
        rotate: -20deg;
        opacity: 0.5;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        rotate: 340deg;
        opacity: 0.5;
    }
}

.star05 {
    animation: an-round05 6s linear infinite;
    rotate: -50deg;
    opacity: 1;
}

@keyframes an-round05 {
    0% {
        rotate: -50deg;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        rotate: -410deg;
        opacity: 1;
    }
}

.star06 {
    animation: an-round06 6s linear infinite;
    rotate: -50deg;
    opacity: 1;
}

@keyframes an-round06 {
    0% {
        rotate: 0deg;
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        rotate: 360deg;
        opacity: 1;
    }
}

.star07 {
    animation: an-round07 6s linear infinite;
    rotate: -50deg;
    opacity: 1;
}

@keyframes an-round07 {
    0% {
        rotate: 0deg;
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        rotate: -360deg;
        opacity: 1;
    }
}


/* Initial state */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* Active state */
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slightly slower version (for large sections) */
.reveal--slow {
    transition-duration: 1.1s;
}

/* Stagger support */
.reveal[data-delay="1"] {
    transition-delay: 0.08s;
}

.reveal[data-delay="2"] {
    transition-delay: 0.16s;
}

.reveal[data-delay="3"] {
    transition-delay: 0.24s;
}

.reveal[data-delay="4"] {
    transition-delay: 0.32s;
}

.reveal[data-delay="5"] {
    transition-delay: 0.4s;
}