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

@import "styles/anims";

$logo-anim-delay: 0s;
.logo {
    max-width: 300px;
    path, #en-square {
        fill: #fff;
    }
    path[data-inverse] {
        fill: #000;
    }
    .no-fill {
        fill: none;
        stroke: #fff;
    }
    *[char-outline] {
        stroke: #fff;
        stroke-width: 0;
    }
    &:not([data-noanim]) {
        .arknights-kr {
            $arknights-kr-anim-delay: calc(#{$logo-anim-delay} + 0s);
            $delay: calc(
                #{applyPlaybackSpeed(#{$arknights-kr-anim-delay})} +
                #{applyPlaybackSpeed(0.05s)} * var(--order)
            );
            g {
                opacity: 0;
                transform: translateY(-10px);
                animation:
                    opacity_spawn
                    applyPlaybackSpeed(0.5s)
                    #{$delay} steps(1) forwards,
                    slide_UD
                    applyPlaybackSpeed(0.8s)
                    #{$delay} $forceful forwards;
            }
        }
        .endfield-kr {
            $endfield-kr-anim-delay: calc(#{$logo-anim-delay} + 0.5s);
            $chr1-delay: $endfield-kr-anim-delay;
            .char-1 {
                & > * {
                    opacity: 0;
                }
                .t-l,
                .t-l-inner {
                    transform: translateY(-10px);
                    animation:
                        opacity_spawn
                        applyPlaybackSpeed(0.4s)
                        #{$chr1-delay} steps(1) forwards,
                        reset-transform-y
                        applyPlaybackSpeed(0.7s)
                        #{$chr1-delay} $forceful forwards;
                }
                .t-r {
                    transform: translateX(-3px);
                    animation:
                        opacity_spawn
                        applyPlaybackSpeed(0.4s)
                        #{$chr1-delay} steps(1) forwards,
                        reset-transform-x
                        applyPlaybackSpeed(0.7s)
                        #{$chr1-delay} $slow-down forwards;
                }
            }
            $movement-1-anim-delay: calc(#{$chr1-delay} + 0.2s);
            .movement-1 {
                transform: translateX(-10px);
                opacity: 0;
                animation:
                    opacity_spawn
                    applyPlaybackSpeed(0.5s)
                    #{$movement-1-anim-delay} steps(1) forwards,
                    slide_LR
                    applyPlaybackSpeed(0.8s)
                    #{$movement-1-anim-delay} $forceful forwards;
                .char-2 {
                    transform: translateX(-6.34px);
                    animation:
                        reset-transform-x
                        applyPlaybackSpeed(0.6s)
                        calc(#{$movement-1-anim-delay} + 0.6s) $slow-down forwards;
                }
            }
            .char-2 .t {
                transform: translateX(-6.34px);
                opacity: 0;
                animation:
                    opacity_spawn
                    applyPlaybackSpeed(0.3s)
                    calc(#{$movement-1-anim-delay} + 0.5s) steps(1) forwards,
                    reset-transform-x
                    applyPlaybackSpeed(0.6s)
                    calc(#{$movement-1-anim-delay} + 0.5s) $slow-down forwards;
            }
            $chr3-delay: calc(#{applyPlaybackSpeed($movement-1-anim-delay)} + 0.1s);
            .char-3 {
                opacity: 0;
                transform: translateY(-10px);
                animation:
                    opacity_spawn
                    applyPlaybackSpeed(0.5s)
                    #{$chr3-delay} steps(1) forwards,
                    slide_UD
                    applyPlaybackSpeed(0.8s)
                    #{$chr3-delay} $forceful forwards;

                $sub-delay: calc(#{$chr3-delay} + 0.73s + 0.05s * var(--order));
                .t-r {
                    transform: translateX(-3.5px);
                    animation:
                        reset-transform-x
                        applyPlaybackSpeed(0.5s)
                        #{$sub-delay} $slow-down forwards;
                }
                .b {
                    transform: translateY(-1.6px);
                    animation:
                        reset-transform-y
                        applyPlaybackSpeed(0.5s)
                        #{$sub-delay} $slow-down forwards;
                }
            }
            $chr4-delay: calc(#{$chr3-delay} + 0.2s);
            .char-4 {
                opacity: 0;
                animation:
                    opacity_spawn
                    applyPlaybackSpeed(0.5s)
                    #{$chr4-delay} steps(1) forwards;
                .b, .t {
                    $delay: calc(#{$chr4-delay} + 0.4s + 0.15s * var(--order));
                    transform: translateX(-7px);
                    animation:
                        reset-transform-x
                        applyPlaybackSpeed(0.5s)
                        #{$delay} $slow-down forwards;
                }
            }
            $chr5-delay: calc(#{$chr4-delay} + 0.7s);
            .en {
                #en-square {
                    transform: translateX(-33px);
                    animation:
                        reset-transform-x
                        applyPlaybackSpeed(0.7s)
                        calc(#{$chr5-delay}) $slow-down forwards;
                }
                g {
                    $delay: calc(#{$chr5-delay} + 0.1s * var(--order));
                    transform: translateX(-10px);
                    animation:
                        reset-transform-x
                        applyPlaybackSpeed(0.5s)
                        #{$delay} $slow-down forwards;
                }
            }
        }
    }
}