.flying-dragon2222 {
    position: absolute;
    top: 100px;
    left: 100%; /* start offscreen right */
    width: 400px;
    height: 300px;
    background-image: url("/img/flying1.png");
    background-repeat: no-repeat;
    background-size: contain;
    animation: flyDragon 30s linear infinite;
    pointer-events: none;
    z-index: 5;
    mask-image: linear-gradient(
        to left,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to left,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

@keyframes flyDragon {
    0% {
        transform: translateX(0) rotate(-70deg);
    }
    70% {
        transform: translateX(-150vw) rotate(-20deg);
    }
    100% {
        transform: translateX(-150vw) rotate(-20deg);
    }
}
.flying-dragon-back22222 {
    position: absolute;
    top: 140px; /* slightly different vertical position */
    left: 120%; /* start farther right (delayed start) */
    width: 270px; /* slightly smaller to show distance */
    height: 200px;
    background-image: url("/img/flying6.png");
    background-repeat: no-repeat;
    background-size: contain;
    animation: flyDragonBack 40s linear infinite;
    pointer-events: none;
    z-index: 4; /* behind the front dragon */
    filter: blur(1px) opacity(0.4); /* blur & fade for depth */
    mask-image: linear-gradient(
        to left,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to left,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

/* Same animation as front dragon but starts shifted */
@keyframes flyDragonBack {
    0% {
        transform: translateX(0) rotate(30deg);
    }
    70% {
        transform: translateX(-150vw) rotate(-20deg);
    }
    100% {
        transform: translateX(-150vw) rotate(-20deg);
    }
}

/* Flying the second dragon LEFT TO RIGHT */
.flying-dragon1222222 {
    position: absolute;
    top: 60px; /* slightly different vertical position */
    left: -200px; /* start offscreen left (width of image) */
    width: 300px;
    height: 300px;
    background-image: url("/img/flying4.png"); /* your second dragon image */
    background-repeat: no-repeat;
    background-size: contain;
    animation: flyDragon1 30s linear infinite;
    pointer-events: none;
    z-index: 5;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}
@keyframes flyDragon1 {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    70% {
        transform: translateX(150vw) rotate(10deg);
    }
    100% {
        transform: translateX(150vw) rotate(20deg);
    }
}

.floating-sun {
    position: absolute;
    top: 80px;
    right: 1080px;
    width: 250px;
    height: 200px;
    background-image: url("/img/new.png");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: screen; /* or try multiply or overlay */
}
@keyframes floating-sun {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    70% {
        transform: translateX(150vw) rotate(10deg);
    }
    100% {
        transform: translateX(150vw) rotate(20deg);
    }
}
.floating-castle {
    position: absolute;
    top: 430px;
    right: 70px;
    width: 250px;
    height: 200px;
    background-image: url("/img/castlwwwwwe.png");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    mix-blend-mode: screen; /* or try multiply or overlay */
    filter: blur(1px) opacity(0.9); /* blur & fade for depth */
}
.floating-castle2 {
    position: absolute;
    top: 400px;
    right: 1100px;
    width: 250px;
    height: 200px;
    background-image: url("/img/castlewwwww2.png");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    mix-blend-mode: screen; /* or try multiply or overlay */
}
@media screen and (max-width: 1024px) {
    .floating-sun {
        position: absolute;
        top: 80px;
        right: 400px;
        width: 250px;
        height: 200px;
        background-image: url("/img/new.png");
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
        z-index: 4;
        mix-blend-mode: screen; /* or try multiply or overlay */
    }
}