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

@import 'styles/anims';
@import './CN-anim.module.scss';
@import '../logoAnimFunc';

.patch {
    fill: #fff;
}

$logo-anim-delay: 0s;
.logo {
    path {
        fill: #fff;
        &[data-inverse] {
            fill: #000;
        }
    }
    &:not([data-noanim])
    {
        //#region CN-"Arknights"
        $arknights-cn-anim-delay: calc(#{$logo-anim-delay} + 0s);
        .arknights-cn {
            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 CN-"Endfield"
        $endfield-cn-anim-delay: .3s;
        @function endfieldCNAnimDelay($additionalDelay: 0s) {
            @return StaggeredAnimDelay($endfield-cn-anim-delay, $additionalDelay);
        }
        .g-chr1 {
            .chr1 {
                opacity: 0;
                transform: translateY(10px);
                animation:
                    opacity_spawn
                        0.75s endfieldCNAnimDelay(.1s) steps(1) forwards,
                    slide_DU
                        1.2s endfieldCNAnimDelay(.1s) $forceful forwards;
            }
            #endfield-cn-chr1-stroke-tl-1 {
                transform: translateX(-10px);
                animation:
                    opacity_spawn
                        0.75s endfieldCNAnimDelay() steps(1) forwards,
                    slide_LR
                        1.2s endfieldCNAnimDelay() $forceful forwards;
            }
        }
        .g-chr2 {
            path {
                opacity: 0;
                transform: translateX(10px);
                animation:
                    opacity_spawn
                        0.75s endfieldCNAnimDelay(.08s) steps(1) forwards,
                    slide_RL
                        1.2s endfieldCNAnimDelay(.08s) $forceful forwards;
            }
        }
        .g-chr3 {
            path {
                opacity: 0;
                transform: translateX(10px);
                animation:
                    opacity_spawn
                        0.75s endfieldCNAnimDelay(.2s) steps(1) forwards,
                    slide_RL
                        1.2s endfieldCNAnimDelay(.2s) $forceful forwards;
            }
            #endfield-cn-chr3-1 { animation-delay:endfieldCNAnimDelay(.16s) }
            #endfield-cn-chr3-2 { animation-delay:endfieldCNAnimDelay(.26s) }
        }
        .g-chr4 {
            transform: translateX(-0.2px);
            clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);
            animation: expand_DU 0.7s endfieldCNAnimDelay(.6s) forwards;
            .arknights, .endfield {
                transform: translateY(10px);
                animation:
                    slide_DU
                        0.7s endfieldCNAnimDelay(.35s) $forceful forwards;
            }
            .arknights { --order: 1 }
            .endfield { --order: 2 }
        }
        //#endregion
    }
}