.logo__site_icon > * {
    transition: all 50ms ease-out 0s, transform 500ms ease 0s;
}

body:not(:is(.scroll-direction-down)) .logo__site_icon #symbol {
    opacity: 0;
}

body:is(.scroll-direction-down) .logo__site_icon #symbol {
    opacity: 1;
}

body:is(.scroll-direction-down) .logo__site_icon:hover #symbol {
    opacity: 0;
}

.logo__site_icon #symbol {
    transition-delay: 500ms;
    transition-duration: 200ms;
}

body:is(.scroll-direction-down) .logo__site_icon #ektor,
body:is(.scroll-direction-down) .logo__site_icon #ausch {
    opacity: 0;
    transition-duration: 200ms;
    transform: translateX(-72px)
}

body:is(.scroll-direction-down) .logo__site_icon:hover #ektor,
body:is(.scroll-direction-down) .logo__site_icon:hover #ausch {
    opacity: 1;
    transform: translateX(0);
}

.logo__site_icon #ausch {
    transition-delay: 150ms;
}


body:is(.scroll-direction-down) .logo__site_icon #r2 {
    transform: translate3d(-72px,6px,0) rotate(180deg);
    transform-origin: center center;
    opacity: 1;
}

body:is(.scroll-direction-down) .logo__site_icon:hover #r2 {
    transform: translate3d(0,0,0) rotate(0);
    opacity: 0;
}

body:is(.scroll-direction-down) .logo__site_icon #r3 {
    transform: translate3d(-72px,6px,0) rotate(180deg);
    transform-origin: center center;
    opacity: 0;
}

body:is(.scroll-direction-down) .logo__site_icon:hover #r3 {
    transform: translate3d(0,0,0) rotate(0);
    opacity: 1;
}

.logo__site_icon #v {
    transition-delay: 500ms;
    transition-duration: 200ms;
}

body:is(.scroll-direction-down) .logo__site_icon #v {
    opacity: 0;
}

body:is(.scroll-direction-down) .logo__site_icon:hover #v {
    opacity: 1;
}

body:is(.scroll-direction-down) #logo p {
    opacity: 0;
    transition: opacity 0.3s linear;
}

body:is(.scroll-direction-up) #logo p {
    opacity: 1;
    transition: opacity 0.3s linear;
}