endpild-laman/components/logo/JP/JP-small.module.scss

@import "styles/anims";
@import "styles/orders";
@import '../logoAnimFunc';

$logo-anim-delay: 0s;
.logo {
    path, rect {
        fill: #fff;
        &[data-inverse] {
            fill: #000;
        }
    }
    &:not([data-noanim]) {
        //#region JP-"Arknights"
        $arknights-cn-anim-delay: calc(#{$logo-anim-delay} + 0s);
        .arknights {
            opacity: 0;
            transform: translateY(-10px);

            $delay: StaggeredAnimDelay($arknights-cn-anim-delay);
            animation:
                opacity_spawn 0.5s #{$delay} steps(1) forwards,
                slide_UD 0.8s #{$delay} $forceful forwards;
        }
        //#endregion

        //#region JP-"Endfield"
        $endfield-cn-anim-delay: calc(#{$logo-anim-delay} + 0.5s);
        #chr1,
        #chr4,
        #chr5,
        #chr6,
        #chr7 {
            opacity: 0;
            transform: translateY(-10px);

            $delay: StaggeredAnimDelay($endfield-cn-anim-delay);
            animation:
                opacity_spawn 0.5s #{$delay} steps(1) forwards,
                slide_UD 0.8s #{$delay} $forceful forwards;
        }
        #chr2 {
            $delay: StaggeredAnimDelay($endfield-cn-anim-delay);
            #chr2-t {
                opacity: 0;
                transform: translateY(-10px);
                animation:
                    opacity_spawn 0.5s #{$delay} steps(1) forwards,
                    slide_UD 0.8s #{$delay} $forceful forwards;
            }
            #chr2-b {
                opacity: 0;
                transform: translateY(10px);
                animation:
                    opacity_spawn 0.5s #{$delay} steps(1) forwards,
                    slide_DU 0.8s #{$delay} $forceful forwards;
            }
        }
        #chr3, #chr8 {
            $delay: StaggeredAnimDelay($arknights-cn-anim-delay, 0.4s);
            .main {
                opacity: 0;
                transform: translateY(10px);

                animation:
                    opacity_spawn 0.5s #{$delay} steps(1) forwards,
                    slide_DU 0.8s #{$delay} $forceful forwards;
            }
            .sub-1, .sub-2 {
                transform-origin: bottom center;
                transform: scaleY(2) translateY(calc(8px));
                opacity: 0;
                @keyframes reset-transform {
                    to { transform: scaleY(1) translateY(0); }
                }
                animation:
                    reset-transform 0.5s #{$delay} $forceful forwards,
                    opacity_spawn 0.3s #{$delay} steps(1) forwards,
            }
            .sub-1 { animation-delay: calc(#{$delay} + 0.25s); }
            .sub-2 { animation-delay: calc(#{$delay} + 0.3s); }
        }
        #chr9 {
            $delay: StaggeredAnimDelay($endfield-cn-anim-delay, 0.28s);
            clip-path: polygon(0 0, 0 0, 100% 0, 100% 0);
            animation:
                expand_UD 0.5s #{$delay} $forceful forwards;

            .a { @extend ._1}
            .e1 { @extend ._2 }
            .e2 { @extend ._3 }
            .e3 { @extend ._4 }
            .a, .e1, .e2, .e3 {
                $delay: StaggeredAnimDelay($endfield-cn-anim-delay, 0.53s);
                opacity: 0;
                transform: translateY(-10px);
                animation:
                    opacity_spawn 0.5s #{$delay} steps(1) forwards,
                    slide_UD 0.8s #{$delay} $forceful forwards;
            }

        }

        //#endregion
    }
}