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

@import 'styles/anims';
@import 'EN-big.anim';

.logo {
    width: clamp(700px, 100%, 2000px);
    height: clamp(400px, 100%, 1000px);
    path {
        fill: #fff;
    }
    &[data-noanim] {
        #cn-square-1, #cn-square-2, #end-n-blocker { opacity: 0; }
        #cn { opacity: 1; }
    }
    &:not([data-noanim]){
        #cn-square-1 {
            animation:
                logo_cn_1
                    applyPlaybackSpeed(1s) steps(1),
                opacity_fade
                    applyPlaybackSpeed(0s)
                    applyPlaybackSpeed(1s) $forceful forwards;
        }
        #cn-square-2 {
            transform: translate(-12px, -12px);
            animation:
                opacity_spawn
                    applyPlaybackSpeed(0s)
                    applyPlaybackSpeed(0.8s) steps(1) forwards,
                logo_cn_2
                    applyPlaybackSpeed(0.4s)
                    applyPlaybackSpeed(0.8s) steps(1) forwards,
                opacity_fade
                    applyPlaybackSpeed(0.2s)
                    applyPlaybackSpeed(1s) steps(1) forwards;
        }
        #cn {
            animation:
                opacity_spawn
                    applyPlaybackSpeed(0.2s)
                    applyPlaybackSpeed(1s) steps(1) forwards,
                opacity_fade
                    applyPlaybackSpeed(0.3s)
                    applyPlaybackSpeed(1.6s) steps(1) forwards,
                logo_cn_main_scale
                    applyPlaybackSpeed(0s)
                    applyPlaybackSpeed(1.5s) steps(1) forwards,
                opacity_spawn
                    applyPlaybackSpeed(0.6s)
                    applyPlaybackSpeed(1.5s) steps(1) forwards;
            transform-origin: center;
            #cn-path {
                animation:
                    logo_cn_main_stroke
                        applyPlaybackSpeed(1.1s)
                        applyPlaybackSpeed(1s) steps(1) forwards,
                    logo_cn_main_translate
                        applyPlaybackSpeed(0.97s)
                        applyPlaybackSpeed(1.5s) $forceful forwards;
            }
        }
        .arknights {
            opacity: 0;
            transform: translateY(-10px);
            $delay: calc(
                    applyPlaybackSpeed(1.8s) +
                    applyPlaybackSpeed(0.05s) * var(--order)
            );
            animation:
                opacity_spawn
                    applyPlaybackSpeed(0.5s) #{$delay} steps(1) forwards,
                slide_UD
                    applyPlaybackSpeed(0.8s) #{$delay} $forceful forwards;
        }
        .end {
            opacity: 0;
            animation: opacity_spawn
                applyPlaybackSpeed(0.5s)
                applyPlaybackSpeed(3.3s) $forceful forwards;
        }
        .field {
            opacity: 0;
            animation: opacity_spawn
                applyPlaybackSpeed(0.5s)
                applyPlaybackSpeed(4.25s) $forceful forwards;
        }
        #end-e {
            transform: translateX(10px);
            animation:
                opacity_spawn
                    applyPlaybackSpeed(0.5s)
                    applyPlaybackSpeed(2.5s) steps(1) forwards,
                slide_RL
                    applyPlaybackSpeed(0.6s)
                    applyPlaybackSpeed(2.7s) $slow-down forwards;
        }
        #end-d {
            transform: translateX(-8.5px);
            animation:
                opacity_spawn
                    applyPlaybackSpeed(0.35s)
                    applyPlaybackSpeed(3.2s) steps(1) forwards,
                end_d_slideLR
                    applyPlaybackSpeed(1s)
                    applyPlaybackSpeed(3.4s) $slow-down forwards;
        }
        #end-n {
            animation: opacity_spawn
                applyPlaybackSpeed(0s)
                applyPlaybackSpeed(3.5s) steps(1) forwards;
        }
        #end-n-blocker {
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            animation:
                expand_LR
                    applyPlaybackSpeed(0.5s)
                    applyPlaybackSpeed(3s) $forceful forwards,
                collapse_LR
                    applyPlaybackSpeed(0.5s)
                    applyPlaybackSpeed(3.5s) $forceful forwards;
        }
        #field-f {
            animation:
                opacity_spawn
                    applyPlaybackSpeed(0.4s)
                    applyPlaybackSpeed(3.35s) steps(1) forwards,
                slide_RL
                    applyPlaybackSpeed(0.6s)
                    applyPlaybackSpeed(3.35s) $forceful forwards;
        }
        #field-i {
            animation:
                opacity_spawn
                    applyPlaybackSpeed(0.4s)
                    applyPlaybackSpeed(3.45s) steps(1) forwards,
                slide_RL
                    applyPlaybackSpeed(0.6s)
                    applyPlaybackSpeed(3.45s) $forceful forwards,
                field_e_stretch
                    applyPlaybackSpeed(0.75s)
                    applyPlaybackSpeed(3.45s) $forceful forwards;
        }
        #field-e-2 {
            animation:
                opacity_spawn
                    applyPlaybackSpeed(0.4s)
                    applyPlaybackSpeed(3.45s) steps(1) forwards,
                slide_RL
                    applyPlaybackSpeed(0.6s)
                    applyPlaybackSpeed(3.45s) $forceful forwards,
                field_e_path
                    applyPlaybackSpeed(1s)
                    applyPlaybackSpeed(3.5s) $forceful forwards,
                field_e_stretch
                    applyPlaybackSpeed(0.75s)
                    applyPlaybackSpeed( 3.45s) $forceful forwards;
        }
        #field-e {
            animation:
                opacity_spawn
                    applyPlaybackSpeed(0.4s)
                    applyPlaybackSpeed(3.5s) steps(1) forwards,
                slide_RL
                    applyPlaybackSpeed(0.6s)
                    applyPlaybackSpeed(3.5s) $forceful forwards,
                field_e_path
                    applyPlaybackSpeed(1s)
                    applyPlaybackSpeed(3.5s) $forceful forwards,
                field_e_stretch
                    applyPlaybackSpeed(1s)
                    applyPlaybackSpeed(3.5s) $forceful forwards;
        }
        #field-l {
            animation:
                opacity_spawn
                    applyPlaybackSpeed(0.3s)
                    applyPlaybackSpeed(3.85s) steps(1) forwards,
                slide_DU
                    applyPlaybackSpeed(0.7s)
                    applyPlaybackSpeed(3.75s) $slow-down forwards;
        }
        #field-d {
            animation:
                opacity_spawn
                    applyPlaybackSpeed(0s)
                    applyPlaybackSpeed(4.2s) steps(1) forwards;
        }
        #field-d-2 {
            transform: translateY(10px);
            animation:
                opacity_spawn
                    applyPlaybackSpeed(0.14s)
                    applyPlaybackSpeed(4.1s) steps(1) forwards,
                slide_DU
                    applyPlaybackSpeed(0.6s)
                    applyPlaybackSpeed(4.1s) $slow-down forwards;
        }
    }
}

#field-d {
    fill: transparent;
    stroke: #fff;
    stroke-width: 0.1;
}