endpild-laman/components/logo/MountainContour/MountainContour.module.scss

@import "styles/anims";

.wing {
    transform-origin: 26.2px 31.5px;
}

.MCLogo {
    aspect-ratio: 124 / 47;
    path {
        fill: #fff;
        &[data-inverse] {
            fill: #000;
        }
    }
    &:not([data-noanim])
    {
        transform: translateX(-25%);
        animation: reset-transform 0.8s 0.5s $forceful forwards;

        --icon-anim-delay: 1.52s;
        #dragonfly {
            transform: translate(28px, 20px);
            animation: reset-transform 0.8s var(--icon-anim-delay) $slow-down forwards;
            .wing {
                animation: reset-rotate 0.8s calc(var(--icon-anim-delay) + 0.3s) $slow-down forwards;
            }
            #l-wing-main { transform: rotate(-15deg) }
            #l-wing-sub { transform: rotate(-8deg) }
            #r-wing-main { transform: rotate(15deg) }
            #r-wing-sub { transform: rotate(8deg) }
        }

        #particles path {
            transform: translateX(5px);
            opacity: 0;
            animation:
                reset-transform 0.8s calc(var(--icon-anim-delay) + 0.1s) $slow-down forwards,
                opacity_spawn 0s calc(var(--icon-anim-delay) + 0.55s + var(--order) * 0.08s) steps(1) forwards;
        }

        --text-anim-delay: 1.47s;
        #txt-mt {
            transform: translateX(6px);
            opacity: 0;
            animation:
                opacity_spawn 0s calc(var(--text-anim-delay) + 0.4s) steps(1) forwards,
                slide_RL 0.7s var(--text-anim-delay) $forceful forwards;
        }
        #txt-ct {
            transform: translateX(6px);
            opacity: 0;
            animation:
                opacity_spawn 0s calc(var(--text-anim-delay) + 0.05s + 0.4s) steps(1) forwards,
                slide_RL 0.7s calc(var(--text-anim-delay) + 0.1s) $forceful forwards;
        }
    }
}