/* Container per i dischi volanti */
.ufo-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Disco volante base */
.ufo {
    position: absolute;
    width: 60px;
    height: 30px;
    top: 25%;
}

/* Corpo principale del disco */
.ufo-body {
    position: relative;
    width: 100%;
    height: 15px;
    background: linear-gradient(45deg, #34495e, #95a5a6, #34495e);
    border-radius: 50px;
    box-shadow: 0 0 20px rgba(52, 73, 94, 0.6), 0 0 40px rgba(52, 73, 94, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.3);
    animation: glow 2s ease-in-out infinite alternate;
}

/* Cupola superiore */
.ufo-dome {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
    border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
    backdrop-filter: blur(2px);
}



/* Raggio di luce */
.ufo-beam {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 50px;
    background: linear-gradient(0deg, rgba(149, 165, 166, 0.3), transparent);
    border-radius: 50% 50% 0 0;
    transition: width 0.5s ease;
}

/* Animazioni glow e luci */
@keyframes glow {
    0% {
        box-shadow: 0 0 20px rgba(52, 73, 94, 0.4), 0 0 40px rgba(52, 73, 94, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.3);
    }

    100% {
        box-shadow: 0 0 30px rgba(52, 73, 94, 0.8), 0 0 60px rgba(52, 73, 94, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.5);
    }
}

@keyframes lights-flash {
    0%, 100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* Animazioni di movimento per ogni UFO */
.ufo1 {
    left: -80px;
    animation: fly1 12s ease-in-out infinite;
}

.ufo2 {
    left: -80px;
    animation: fly2 15s ease-in-out infinite 3s;
    transform: scale(0.8);
}

.ufo3 {
    right: -80px;
    animation: fly3 18s ease-in-out infinite 6s;
    transform: scale(1.2);
}

.ufo4 {
    left: -80px;
    animation: fly4 20s ease-in-out infinite 9s;
    transform: scale(0.9);
}

/* Traiettorie di volo */
@keyframes fly1 {
    0% {
        left: -80px;
        top: 30%;
        transform: rotate(-5deg);
    }

    25% {
        left: 30%;
        top: 15%;
        transform: rotate(0deg);
    }

    30% {
        left: 35%;
        top: 20%;
        transform: rotate(2deg);
    }

    35% {
        left: 40%;
        top: 25%;
        transform: rotate(0deg);
    }

    50% {
        left: 60%;
        top: 10%;
        transform: rotate(5deg);
    }

    75% {
        left: 90%;
        top: 60%;
        transform: rotate(10deg);
    }

    90% {
        left: 110%;
        top: 90%;
        transform: rotate(15deg);
    }

    100% {
        left: 120%;
        top: 110%;
        transform: rotate(20deg);
    }
}

@keyframes fly2 {
    0% {
        left: -80px;
        top: 35%;
        transform: scale(0.8) rotate(0deg);
    }

    20% {
        left: 20%;
        top: 30%;
        transform: scale(0.8) rotate(-3deg);
    }

    40% {
        left: 50%;
        top: 18%;
        transform: scale(0.8) rotate(0deg);
    }

    45% {
        left: 55%;
        top: 22%;
        transform: scale(0.8) rotate(2deg);
    }

    50% {
        left: 60%;
        top: 28%;
        transform: scale(0.8) rotate(0deg);
    }

    80% {
        left: 95%;
        top: 70%;
        transform: scale(0.8) rotate(8deg);
    }

    90% {
        left: 110%;
        top: 95%;
        transform: scale(0.8) rotate(12deg);
    }

    100% {
        left: 120%;
        top: 115%;
        transform: scale(0.8) rotate(15deg);
    }
}

@keyframes fly3 {
    0% {
        right: -80px;
        top: 25%;
        transform: scale(1.2) rotate(5deg);
    }

    30% {
        right: 40%;
        top: 5%;
        transform: scale(1.2) rotate(0deg);
    }

    35% {
        right: 45%;
        top: 10%;
        transform: scale(1.2) rotate(-2deg);
    }

    40% {
        right: 50%;
        top: 15%;
        transform: scale(1.2) rotate(0deg);
    }

    70% {
        right: 80%;
        top: 55%;
        transform: scale(1.2) rotate(-8deg);
    }

    90% {
        right: 110%;
        top: 85%;
        transform: scale(1.2) rotate(-15deg);
    }

    100% {
        right: 120%;
        top: 110%;
        transform: scale(1.2) rotate(-20deg);
    }
}

@keyframes fly4 {
    0% {
        left: -80px;
        top: 20%;
        transform: scale(0.9) rotate(-3deg);
    }

    15% {
        left: 15%;
        top: 18%;
        transform: scale(0.9) rotate(0deg);
    }

    35% {
        left: 45%;
        top: 8%;
        transform: scale(0.9) rotate(3deg);
    }

    40% {
        left: 50%;
        top: 15%;
        transform: scale(0.9) rotate(1deg);
    }

    45% {
        left: 55%;
        top: 12%;
        transform: scale(0.9) rotate(-1deg);
    }

    65% {
        left: 75%;
        top: 45%;
        transform: scale(0.9) rotate(5deg);
    }

    85% {
        left: 105%;
        top: 80%;
        transform: scale(0.9) rotate(10deg);
    }

    100% {
        left: 120%;
        top: 105%;
        transform: scale(0.9) rotate(15deg);
    }
}

/* Effetto hover per attivare il raggio */
.ufo:hover .ufo-beam {
    width: 80px;
}

/* Responsive per schermi più piccoli */
@media (max-width: 480px) {
    .ufo {
        width: 45px;
        height: 22px;
    }

    .ufo-body {
        height: 12px;
    }

    .ufo-dome {
        width: 28px;
        height: 12px;
        top: -6px;
    }

    .ufo-beam {
        height: 40px;
    }
}



/*h1 {
    font-family: 'Arial', sans-serif;
    font-size: 2.5em;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}*/