#dragons-bg {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.flying-dragon {
    position: absolute;
    top: var(--top, 30%);
    left: 0;
    width: var(--size, 140px);
    opacity: var(--opacity, 0.5);
    filter: drop-shadow(0 0 16px rgba(255, 0, 0, 0.55));
    animation: dragon-fly-ltr var(--duration, 24s) linear infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform;
}

.flying-dragon--rtl {
    animation-name: dragon-fly-rtl;
}

.dragon-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.flying-dragon__inner {
    animation:
        dragon-bob var(--bob, 3.5s) ease-in-out infinite,
        dragon-float var(--flap, 0.45s) ease-in-out infinite alternate;
}

@keyframes dragon-fly-ltr {
    0% {
        transform: translate3d(-20vw, 0, 0) rotate(-4deg);
    }
    25% {
        transform: translate3d(25vw, -24px, 0) rotate(2deg);
    }
    50% {
        transform: translate3d(55vw, 14px, 0) rotate(-2deg);
    }
    75% {
        transform: translate3d(85vw, -18px, 0) rotate(3deg);
    }
    100% {
        transform: translate3d(120vw, 0, 0) rotate(-4deg);
    }
}

@keyframes dragon-fly-rtl {
    0% {
        transform: translate3d(120vw, 0, 0) scaleX(-1) rotate(-4deg);
    }
    25% {
        transform: translate3d(85vw, -20px, 0) scaleX(-1) rotate(2deg);
    }
    50% {
        transform: translate3d(55vw, 12px, 0) scaleX(-1) rotate(-2deg);
    }
    75% {
        transform: translate3d(25vw, -16px, 0) scaleX(-1) rotate(3deg);
    }
    100% {
        transform: translate3d(-20vw, 0, 0) scaleX(-1) rotate(-4deg);
    }
}

@keyframes dragon-float {
    from {
        transform: translateY(0) rotate(-2deg);
    }
    to {
        transform: translateY(-6px) rotate(2deg);
    }
}

@keyframes dragon-bob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .flying-dragon {
        animation-duration: 60s !important;
    }

    .flying-dragon__inner {
        animation-duration: 3s !important;
    }
}