.animated-bg-layer {
    position: fixed;
    inset: 0;
    z-index: 900;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint style;
}

body.has-animated-background > :not(.animated-bg-layer):not(.modal):not(.modal-backdrop) {
    position: relative;
    z-index: 2;
}

.animated-bg-item {
    position: absolute;
    left: var(--start-x);
    top: var(--start-y);
    z-index: var(--item-z);
    width: var(--item-size);
    height: var(--item-size);
    opacity: var(--opacity);
    pointer-events: none;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0) rotate(var(--base-rotate));
    animation-duration: var(--speed);
    animation-delay: var(--delay);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.animated-bg-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
}

.animated-bg-floating {
    animation-name: animatedBgFloating;
}

.animated-bg-orbit {
    animation-name: animatedBgOrbit;
    animation-timing-function: linear;
}

.animated-bg-left_to_right {
    animation-name: animatedBgLeftToRight;
    animation-timing-function: linear;
}

.animated-bg-right_to_left {
    animation-name: animatedBgRightToLeft;
    animation-timing-function: linear;
}

.animated-bg-up_down {
    animation-name: animatedBgUpDown;
}

.animated-bg-rotate {
    animation-name: animatedBgRotate;
    animation-timing-function: linear;
}

.animated-bg-random_path {
    animation-name: animatedBgRandomPath;
}

.animated-bg-pulse {
    animation-name: animatedBgPulse;
}

@keyframes animatedBgFloating {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--base-rotate)) scale(1); }
    35% { transform: translate3d(32px, -42px, 0) rotate(calc(var(--base-rotate) + 16deg)) scale(1.08); }
    70% { transform: translate3d(-28px, 28px, 0) rotate(calc(var(--base-rotate) - 10deg)) scale(.96); }
}

@keyframes animatedBgOrbit {
    from { transform: rotate(0deg) translate3d(42px, 0, 0) rotate(var(--base-rotate)); }
    to { transform: rotate(360deg) translate3d(42px, 0, 0) rotate(calc(var(--base-rotate) - 360deg)); }
}

@keyframes animatedBgLeftToRight {
    from { transform: translate3d(-35vw, 0, 0) rotate(var(--base-rotate)); }
    to { transform: translate3d(125vw, 0, 0) rotate(calc(var(--base-rotate) + 180deg)); }
}

@keyframes animatedBgRightToLeft {
    from { transform: translate3d(125vw, 0, 0) rotate(var(--base-rotate)); }
    to { transform: translate3d(-35vw, 0, 0) rotate(calc(var(--base-rotate) - 180deg)); }
}

@keyframes animatedBgUpDown {
    0%, 100% { transform: translate3d(0, -34px, 0) rotate(var(--base-rotate)); }
    50% { transform: translate3d(0, 48px, 0) rotate(calc(var(--base-rotate) + 12deg)); }
}

@keyframes animatedBgRotate {
    from { transform: translate3d(0, 0, 0) rotate(var(--base-rotate)); }
    to { transform: translate3d(0, 0, 0) rotate(calc(var(--base-rotate) + 360deg)); }
}

@keyframes animatedBgRandomPath {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--base-rotate)) scale(1); }
    20% { transform: translate3d(45px, -30px, 0) rotate(calc(var(--base-rotate) + 20deg)) scale(.94); }
    42% { transform: translate3d(-35px, -58px, 0) rotate(calc(var(--base-rotate) - 16deg)) scale(1.1); }
    66% { transform: translate3d(28px, 38px, 0) rotate(calc(var(--base-rotate) + 34deg)) scale(.98); }
    84% { transform: translate3d(-48px, 18px, 0) rotate(calc(var(--base-rotate) - 28deg)) scale(1.04); }
}

@keyframes animatedBgPulse {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--base-rotate)) scale(.86); opacity: calc(var(--opacity) * .55); }
    50% { transform: translate3d(0, 0, 0) rotate(var(--base-rotate)) scale(1.18); opacity: var(--opacity); }
}

@media (max-width: 767px) {
    .animated-bg-item {
        width: calc(var(--item-size) * .72);
        height: calc(var(--item-size) * .72);
    }
}

@media (prefers-reduced-motion: reduce) {
    .animated-bg-item {
        animation: none;
    }
}