/* UFO SKY */
.sky{
position:fixed;
inset:0;
z-index:-1;
overflow:hidden;
background:
radial-gradient(1200px 600px at 50% 10%, #0b2a1a 0%, #020503 70%);
}
.stars{
position:absolute;
inset:0;
background-image:
radial-gradient(1px 1px at 10% 20%, #9f9, transparent),
radial-gradient(1px 1px at 30% 80%, #9f9, transparent),
radial-gradient(1px 1px at 70% 40%, #9f9, transparent),
radial-gradient(1px 1px at 90% 10%, #9f9, transparent);
animation: starsMove 60s linear infinite;
opacity:.6;
}
@keyframes starsMove{
from{transform:translateY(0)}
to{transform:translateY(200px)}
}
/* UFO */
.ufo{
position:absolute;
top:15%;
width:140px;
height:40px;
background:linear-gradient(180deg,#cfd,#6a8);
border-radius:50%;
box-shadow:0 0 30px rgba(120,255,180,.6);
animation: ufoFloat 18s linear infinite;
}
.ufo::before{
content:"";
position:absolute;
top:-18px;
left:35px;
width:70px;
height:25px;
background:rgba(180,255,220,.6);
border-radius:50%;
box-shadow:0 0 20px rgba(120,255,180,.8);
}
.ufo-1{ left:-200px; animation-delay:0s; }
.ufo-2{ top:28%; left:-400px; animation-delay:6s; transform:scale(.8); }
@keyframes ufoFloat{
0%{transform:translateX(-200px) translateY(0)}
50%{transform:translateX(110vw) translateY(-20px)}
100%{transform:translateX(140vw) translateY(0)}
}
/* BEAM */
.beam{
position:absolute;
top:35px;
left:50%;
transform:translateX(-50%);
width:30px;
height:0;
background:linear-gradient(180deg, rgba(120,255,180,.7), transparent);
animation: beam 6s ease-in-out infinite;
filter:blur(1px);
}
@keyframes beam{
0%,60%,100%{height:0; opacity:0}
70%{height:220px; opacity:.6}
80%{height:260px; opacity:.8}
}
/* COW (symboliczna, bo wiadomo) */
.cow{
position:absolute;
bottom:-40px;
left:55%;
width:40px;
height:25px;
background:#fff;
border-radius:6px;
animation:cowLift 6s ease-in-out infinite;
opacity:.85;
}
@keyframes cowLift{
0%,60%,100%{transform:translateY(0); opacity:0}
75%{transform:translateY(-180px); opacity:1}
}