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

@import "styles/anims";

@keyframes reset-translateX { to { transform: translateX(0); } }

.logo {
    max-width: 300px;
    &:not([data-noanim]) {
        $arknights-delay: 0;
        .arknights {
            opacity: 0;
            transform: translateY(-10px);
            $delay: calc(
                0.1s +
                0.05s * var(--order)
            );
            animation:
                opacity_spawn
                    0.5s #{$delay} steps(1) forwards,
                slide_UD
                    0.8s #{$delay} $forceful forwards;
        }

        $endfield-delay: 0.3s;
        @function endfieldAnimDelay($additionalDelay: 0s) {
            @return calc(
                #{$endfield-delay} +
                0.05s * var(--order) + #{$additionalDelay}
            );
        }
        .end, .field {
            transform: translateX(-5px);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            //opacity: 0;
            animation:
                //opacity_spawn 0s #{endfieldAnimDelay(.05s)} steps(1) forwards,
                expand_LR 0.5s #{endfieldAnimDelay()} forwards,
                reset-translateX 0.5s #{endfieldAnimDelay()} forwards,
        }
        #cn {
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            animation: expand_LR
                0.5s #{endfieldAnimDelay(0.2s)} forwards;
            .a,
            .e-chr1,
            .e-chr2,
            .e-chr3 {
                --order: 1;
                transform: translateX(-10px);
                animation: reset-translateX
                    0.5s #{endfieldAnimDelay(0.5s)} $slow-down forwards;
            }
            .a {
                --order: 0;
                transform: translateX(-5px);
            }
        }
    }
}