:root {
    --vk-autumn-height: min(900px, 100vh);
}

#vk-autumn-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--vk-autumn-height);
    overflow: hidden;
    pointer-events: none;
    z-index: 9997;
}

.vk-autumn-branch {
    position: absolute;
    top: 56px;
    z-index: 2;
    width: min(35vw, 450px);
    max-width: none;
    height: auto;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .25));
}

.vk-autumn-branch--left {
    left: -5vw;
    transform: rotate(-2deg);
}

.vk-autumn-branch--right {
    right: -5vw;
    transform: rotate(2deg);
}

.vk-autumn-leaf-wrap {
    position: absolute;
    top: -140px;
    left: 0;
    width: var(--size);
    height: var(--size);
    animation: vk-autumn-fall var(--duration) linear var(--delay) forwards;
    will-change: transform, opacity;
    z-index: 4;
}

.vk-autumn-leaf {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: var(--opacity);
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .28));
    animation: vk-autumn-spin var(--spin) ease-in-out infinite alternate;
    transform-origin: 50% 45%;
    user-select: none;
}

.vk-autumn-leaf-wrap.is-near {
    filter: blur(.25px);
}

.vk-autumn-leaf-wrap.is-far .vk-autumn-leaf {
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .18)) blur(.2px);
}

@keyframes vk-autumn-fall {
    0% {
        transform: translate3d(var(--x-start), -150px, 0) rotate(var(--r-start));
        opacity: 0;
    }
    7% {
        opacity: 1;
    }
    25% {
        transform: translate3d(calc(var(--x-start) + var(--drift-a)), 22vh, 0) rotate(calc(var(--r-start) + 100deg));
    }
    50% {
        transform: translate3d(calc(var(--x-start) + var(--drift-b)), 48vh, 0) rotate(calc(var(--r-start) + 230deg));
    }
    75% {
        transform: translate3d(calc(var(--x-start) + var(--drift-c)), 74vh, 0) rotate(calc(var(--r-start) + 360deg));
    }
    100% {
        transform: translate3d(calc(var(--x-start) + var(--drift-end)), 103vh, 0) rotate(calc(var(--r-start) + 520deg));
        opacity: .95;
    }
}

@keyframes vk-autumn-spin {
    from {
        transform: rotateY(-50deg) rotateX(15deg) scale(.92);
    }
    to {
        transform: rotateY(52deg) rotateX(-13deg) scale(1.04);
    }
}

@media (max-width: 900px) {
    .vk-autumn-branch {
        width: min(45vw, 450px);
        top: 60px;
    }

    .vk-autumn-branch--left {
        left: -14vw;
    }

    .vk-autumn-branch--right {
        right: -14vw;
    }
}

@media (max-width: 600px) {
    #vk-autumn-layer {
        height: min(720px, 100vh);
    }

    .vk-autumn-branch {
        width: 50vw;
        opacity: .96;
    }

    .vk-autumn-branch--left {
        left: -18vw;
    }

    .vk-autumn-branch--right {
        right: -18vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vk-autumn-leaf-wrap {
        display: none !important;
    }
}