html, body{
  margin:0px; 
  padding:0px;
  height:100%;
}
html{background: linear-gradient(to bottom, rgb(3,77,114) 1%,rgb(113,49,99) 100%);}
body{
  overflow:hidden;
  width: 100%;
  direction: rtl;
}
.scene{
  width: 100%;
  height:100%;
  animation: focus 10s ease-in-out infinite;
  -webkit-filter:blur(5px); 
  z-index:1;
  position:absolute;
}
 @keyframes focus { 
  0% {-webkit-filter:blur(0px);}
  30% {-webkit-filter:blur(0px);}
  50% {-webkit-filter:blur(4px);}
  60% {-webkit-filter:blur(0px);}
  80% {-webkit-filter:blur(0px);}
  90% {-webkit-filter:blur(10px);}
  100% {-webkit-filter:blur(0px);}
} 
.ufoWrap{
  display: flex;
  height:100%;
  width:100%;
  position:absolute;
  z-index:3;
  justify-content: center;
  align-items: center;
}
.center{
  background: transparent; 
  height:100%;
  display:flex; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* -- ufo styles -- */

.ufoInner{
  position:relative; 
  animation: ufo 20s ease-in-out infinite;
  opacity:0.5; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@keyframes ufo { 50% {transform: translate(10px, -80px) scale(1.2) rotate(2deg);
    opacity:1.0; 
  
  }}
#ufo{
  width: 325px;
  height: 41px;
  margin: 0 auto;
  border-radius: 50%;
  background: #141618;
  box-shadow: inset -15px -4px 16px rgba(60, 29, 94, 0.2), inset 15px -4px 16px rgba(55, 50, 117, 0.19), inset 0px -4px 18px #313234, 0px -1px 0px #2b2e2a, 0px -3px 0px #222;
  position:relative;
}
#ufo:before{
content: ' ';
display: block;
width: 320px;
height: 41px;
position: relative;
margin: 0 auto;
border-radius: 50%;
background: #555;
box-shadow: inset 0px 2px 0px rgba(184, 232, 255, 0.78);
z-index: -1;
top: -7px;
}
ul.blinkers{
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  display: block;
  height: 100%;
}
ul.blinkers li{
  list-style-type:none; 
  background:#758c8a;
  width:5px; 
  height:2px; 
  position:absolute; 
  border-radius:50%;
  box-shadow: 0px -1px 2px #000, 0px 3px 2px rgba(74, 196, 235, 0.16);
}
ul.blinkers li:nth-child(1){top: 23px;left: 45px;opacity:0.5;width:5px;}
ul.blinkers li:nth-child(2){left: 119px;top: 13px;}
ul.blinkers li:nth-child(3){right: 91px; top: 15px; opacity:0.7}
ul.blinkers li:nth-child(4){bottom: 14px; right: 33px; opacity:0.4;}
.dome{
width: 101px;
height: 24px;
background: #D3F0FF;
position: relative;
top: -55px;
z-index: -2;
margin: 0 auto;
border-radius: 50%;
left: 4px;
box-shadow: inset -11px 2px 4px #61A3DF, inset -10px -18px 9px #000, 0px 57px 28px rgba(121, 179, 218, 0.8);
border-top: 2px solid rgba(255,255,255,0.5);
}
.antigrav{
  width: 133px;
  height: 14px;
  margin: 0 auto;
  background: #8ca6b9;
  position: relative;
  left: 3px;
  border-radius: 50%;
  top: -38px; 
  overflow:hidden; 
  box-shadow: 0px -4px 0px #111, 0px -17px 17px rgba(155, 227, 250, 0.13);
  /* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

}
.inner{
  width: 133px;
  height: 14px;
  margin: 0 auto;
  background: #d6f9ff;
  position: relative;
  border-radius: 50%;
  top: -7px;
  border: 1px solid #3a6075;
  z-index: 1;
  box-shadow: 0px 1px 1px rgba(14, 32, 42, 0.3);
}
.rings {
  width: 133px;
  height: 14px;
  margin: 0 auto;
  background: #7298ad;
  position: relative;
  border-radius: 50%;
  top: -5px;
  border: 1px solid #3a6075;
  overflow: hidden;
  box-shadow: inset 0px -1px 0px #BED3DF, 0px 1px 0px rgba(140, 166, 185, 0.77);
}
.rings ul {
  margin: 0px;
  padding: 0px;
  position: relative;
  width: 100%;
  top: -13px;
}
.rings ul li {
  float: left;
  background: #4a7185;
  display: block;
  width: 1px;
  height: 19px;
  margin-right: 1px;
}
.rings ul li:nth-child(3n+3){
  box-shadow: 0px 0px 0px #fff; 
  animation-name: rings; 
  animation-duration: .2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;}
@keyframes rings {
  0% {box-shadow: 0px 0px 0px rgba(255,255,255,0.8);}
  100% {box-shadow: 10px 0px 5px rgba(255,255,255,0.8);}
}

.thrust{
  width: 100%;
  position: relative;
  top: -40px;
  z-index: 1;
  animation: thrusting 10s ease-in-out infinite;
  opacity:0.2;
  -webkit-filter:blur(0px);
  display: flex;
  justify-content: center;
}
@keyframes thrusting { 50% {opacity:0.6;-webkit-filter:blur(1.0);}}

/* انیمیشن‌های جدید برای حرکت UFO به بالا */
.flying-ufo {
  animation: fly-away 2s ease-in forwards !important;
}

@keyframes fly-away {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, -1000px) scale(0.5) rotate(5deg);
    opacity: 0;
  }
}

.engine-on .thrust {
  animation: engine-thrust 0.2s ease-in-out infinite !important;
  opacity: 1 !important;
  -webkit-filter: blur(2px) !important;
}

@keyframes engine-thrust {
  0% { 
    opacity: 0.7;
    -webkit-filter: blur(2px);
  }
  50% { 
    opacity: 1;
    -webkit-filter: blur(4px);
  }
  100% { 
    opacity: 0.7;
    -webkit-filter: blur(2px);
  }
}

.engine-on .thrust ul li {
  height: 50px !important;
}

/* کلاس clickable برای نشان دادن حالت کلیک پذیری */
#ufo.clickable {
  cursor: pointer;
}

.thrust ul{
  width:39%; 
  margin:0 auto; 
  padding:0px;
  list-style-type:none;
  text-align:center;
  height:10px;
  position:relative;
}
.thrust ul li {
  display: inline-block;
  width: 15px;
  background: rgba(142, 206, 236, 0.52);
  height: 10px;
  border-radius: 0px 0px 50% 50%;
  position: absolute;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.23), inset 0px 23px 6px #8DDCF0;
  -webkit-filter: blur(4px);
}
.thrust ul li:nth-child(1) {
  animation-name: move;
  left: 3px;
  height: 40px;
  width: 10px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 25px 1px rgba(121, 179, 218, 0.6);
  animation: move1 10s ease-in-out infinite;
}
.thrust ul li:nth-child(2) {
  animation: move2 15s ease-in-out infinite;
  left: 18px;
  height: 70px;
  width: 15px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 27px 1px rgba(121, 179, 218, 0.6);
}
.thrust ul li:nth-child(3) {
  animation: move3 20s ease-in-out infinite;
  left: 33px;
  height: 91px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 39px 1px rgba(121, 179, 218, 0.6);
}
.thrust ul li:nth-child(4) {
  animation: move4 25s ease-in-out infinite;
  height: 101px;
  left: 50px;
  width: 18px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 47px 1px rgba(121, 179, 218, 0.6);
}
.thrust ul li:nth-child(5) {
  animation: move5 25s ease-in-out infinite;
  left: 68px;
  height: 94px;
  width: 14px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 36px 1px rgba(121, 179, 218, 0.6);
}
.thrust ul li:nth-child(6) {
  animation: move6 20s ease-in-out infinite;
  left: 87px;
  height: 75px;
  width: 10px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 31px 0px rgba(121, 179, 218, 0.6);
}
.thrust ul li:nth-child(7) {
  animation: move7 15s ease-in-out infinite;
  left: 96px;
  width: 9px;
  height: 50px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.39), inset 0px 18px 0px rgba(121, 179, 218, 0.6);
}
.thrust ul li:nth-child(8) {
  animation: move8 10s ease-in-out infinite;
  left: 115px;
  height: 37px;
  width: 10px;
  box-shadow: 0px 10px 20px rgba(168, 241, 255, 0.2), inset 0px 16px 0px rgba(121, 179, 218, 0.6);
  background: rgba(200, 246, 255, 0.38);
}
@keyframes move1 { 50% {height:45px;transform: translate(115px, 0px);}}
@keyframes move2 { 50% {height:75px;transform: translate(85px, 0px);}}
@keyframes move3 { 50% {height:100px;transform: translate(50px, 0px);}}
@keyframes move4 { 50% {height:120px;transform: translate(15px, 0px);}}
@keyframes move5 { 50% {height:100px;transform: translate(-20px, 0px);}}
@keyframes move6 { 50% {height:75px;transform: translate(-55px, 0px);}}
@keyframes move7 { 50% {height:60px;transform: translate(-85px, 0px);}}
@keyframes move8 { 50% {height:47px;transform: translate(-115px, 0px);}}

/*-- foreground --*/
.foreground{
  background: transparent;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  pointer-events:none;
  z-index: 2;
}

/*-- trees mid --*/
ul.trees2{
  position: absolute;
  bottom: 0px;
  margin: 0px;
  padding: 0px;
  width: 100%;
  text-align:center;
  -webkit-filter:blur(3px); 
}
ul.trees2 li{
  width: 0px;
display: block;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 400px solid #371c3b;
border-top: 0px solid transparent;
position:absolute;
bottom:-50px;
animation: wind 10s ease-in-out infinite;}
@keyframes wind { 50% {transform: rotate(10deg);}}

ul.trees2 li:nth-child(1) {left: -82px;bottom: 10px;}
ul.trees2 li:nth-child(2) {left: -10px;}
ul.trees2 li:nth-child(3) {left: 40px;bottom: -80px;}
ul.trees2 li:nth-child(4) {left: 90px;bottom: -100px;}
ul.trees2 li:nth-child(5) {left: 120px;bottom: -50px;}
ul.trees2 li:nth-child(6) {left: 190px;bottom: -120px;}
ul.trees2 li:nth-child(7) {left: 270px;bottom: -150px;}
ul.trees2 li:nth-child(8) {left: 320px;bottom: -180px;}
ul.trees2 li:nth-child(9) {right: -80px;}
ul.trees2 li:nth-child(10) {right: -20px;bottom: 40px;}
ul.trees2 li:nth-child(11) {right: 44px;bottom: -20px;}
ul.trees2 li:nth-child(12) {right: 100px;bottom: -40px;}
ul.trees2 li:nth-child(13) {right: 191px;bottom: -110px;}
ul.trees2 li:nth-child(14) {right: 220px;bottom: -120px;}
ul.trees2 li:nth-child(15) {right: 270px;bottom: -180px;}
ul.trees2 li:nth-child(16) {right: 340px;bottom: -210px;}

/*-- trees front --*/
ul.trees1{
  position: absolute;
  bottom: -140px;
  margin: 0px;
  padding: 0px;
  width: 100%;
  text-align:center;
  -webkit-filter:blur(8px); 
}
ul.trees1 li{
  width: 0px;
display: block;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 400px solid #251329;
border-top: 0px solid transparent;
position:absolute;
bottom:-50px;
animation: windys 20s ease-in-out infinite;
animation-delay: 3.5s;
}
@keyframes windys { 
  25% {transform: rotate(-10deg);}
  50% {transform: rotate(10deg);}

}

ul.trees1 li:nth-child(1) {left: -82px;bottom: 10px;}
ul.trees1 li:nth-child(2) {left: -10px;}
ul.trees1 li:nth-child(3) {left: 40px;bottom: -80px;}
ul.trees1 li:nth-child(4) {left: 90px;bottom: -100px;}
ul.trees1 li:nth-child(5) {left: 120px;bottom: -50px;}
ul.trees1 li:nth-child(6) {left: 190px;bottom: -120px;}
ul.trees1 li:nth-child(7) {left: 270px;bottom: -150px;}
ul.trees1 li:nth-child(8) {left: 320px;bottom: -180px;}
ul.trees1 li:nth-child(9) {right: -80px;}
ul.trees1 li:nth-child(10) {right: 0px;bottom: 30px;}
ul.trees1 li:nth-child(11) {right: 94px;bottom: -100px;}
ul.trees1 li:nth-child(12) {right: 150px;bottom: -50px;}
ul.trees1 li:nth-child(13) {right: 211px;bottom: -190px;}
ul.trees1 li:nth-child(14) {right: 240px;bottom: -150px;}
ul.trees1 li:nth-child(15) {right: 302px;bottom: -240px;}
ul.trees1 li:nth-child(16) {right: 340px;bottom: -210px;}

/*-- trees back --*/
ul.trees3 {
position: absolute;
bottom: -140px;
margin: 0px;
padding: 0px;
width: 100%;
text-align: center;
-webkit-filter: blur(2px);
left: 250px;
}
ul.trees3 li {
width: 0px;
display: block;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 400px solid #432247;
border-top: 0px solid transparent;
position: absolute;
bottom: -50px;
animation: windy 10s ease-in-out infinite;
animation-delay: 1.5s;
}
@keyframes windy { 50% {transform: rotate(10deg);}}

ul.trees3 li:nth-child(1) {left: -82px;bottom: 10px;}
ul.trees3 li:nth-child(2) {left: -19px;bottom: -23px;}
ul.trees3 li:nth-child(3) {left: 66px;bottom: -60px;}
ul.trees3 li:nth-child(4) {left: 90px;bottom: -100px;}
ul.trees3 li:nth-child(5) {left: 120px;bottom: -90px;}
ul.trees3 li:nth-child(6) {left: 153px;bottom: -110px;}
ul.trees3 li:nth-child(7) {left: 191px;bottom: -139px;}
ul.trees3 li:nth-child(8) {left: 253px;bottom: -180px;}
ul.trees3 li:nth-child(9) {right: 370px;bottom: 70px;}
ul.trees3 li:nth-child(10) {right: 420px;bottom: 50px;}
ul.trees3 li:nth-child(11) {right: 504px;bottom: -20px;}
ul.trees3 li:nth-child(12) {right: 550px;bottom: -50px;}
ul.trees3 li:nth-child(13) {right: 627px;bottom: -100px;}
ul.trees3 li:nth-child(14) {right: 670px;bottom: -91px;}
ul.trees3 li:nth-child(15) {right: 696px;bottom: -132px;}
ul.trees3 li:nth-child(16) {right: 730px;bottom: -150px;}

@media screen and (min-height: 0px) and (max-height: 600px) {
  ul.trees1 {bottom: -270px;}
  ul.trees2 {bottom: -170px;}
  ul.trees3 {bottom: -300px;}
}

/*-- background --*/
.background{
  width:100%;
  height:100%;
  position:absolute;
  z-index:1;
}
/*-- stars --*/
.stars{
  width:100%;
  height:100%;
  position:relative;  
  background:transparent;
  background-size:100%;
  background-position:0px 15px ;
}
.stars li {
background: radial-gradient(ellipse at center, rgba(230,234,237,1) 0%,rgba(21,118,151,0) 100%);
list-style-type: none;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
display: block;
position: absolute;
}
.stars li.small {width: 5px;height: 5px;}
.stars li:nth-child(1) {top: 46%;left: 5%;}
.stars li:nth-child(2) {top: 51%;left: 9%;}
.stars li:nth-child(3) {top: 68%;left: 10%;}
.stars li:nth-child(4) {left: 17.4%;bottom: 31%;}
.stars li:nth-child(5) {left: 18.3%;top: 68%;}
.stars li:nth-child(6) {left: 21%;bottom: 38%;}
.stars li:nth-child(7) {left: 23%;top: 62%;}
.stars li:nth-child(8) {left: 25%;top: 63%;}
.stars li:nth-child(9) {left: 27%;top: 17%;}
.stars li:nth-child(10) {left: 33%;top: 17%;}
.stars li:nth-child(11) {top: 45%;left: 29%;}
.stars li:nth-child(12) {left: 34%;top: 50%;}
.stars li:nth-child(13) {left: 35.4%;top: 50.3%;}
.stars li:nth-child(14) {left: 34.8%;top: 51%;}
.stars li:nth-child(15) {top: 58%;left: 33.5%;}
.stars li:nth-child(16) {left: 23.6%;bottom: 20%;}
.stars li:nth-child(17) {left: 32%;top: 17.5%;}
.stars li:nth-child(18) {left: 42%;top: 6%;}
.stars li:nth-child(19) {left: 42%;top: 18%;}
.stars li:nth-child(20) {left: 43.2%;top: 21%;}
.stars li:nth-child(21) {left: 45.5%;top: 25%;}
.stars li:nth-child(22) {left: 45%;bottom: 29%;}
.stars li:nth-child(23) {right: 46%;bottom: 33.2%;}
.stars li:nth-child(24) {right: 45.2%;bottom: 29.7%;}
.stars li:nth-child(25) {bottom: 26%;left: 55.4%;}
.stars li:nth-child(26) {bottom: 29.7%;left: 56.7%;}
.stars li:nth-child(27) {bottom: 33.7%;left: 57.4%;}
.stars li:nth-child(28) {left: 57%;top: 24%;}
.stars li:nth-child(29) {left: 62.5%;top: 12%;}
.stars li:nth-child(30) {left: 72%;top: 4%;}
.stars li:nth-child(31) {left: 79%;top: 16.5%;}
.stars li:nth-child(32) {left: 85%;top: 48%;}
.stars li:nth-child(33) {left: 42.4%;top: 9%;}
.stars li:nth-child(34) {left: 67%;top: 39%;}
.stars li:nth-child(35) {left: 74.5%;top: 25.5%;}
.stars li:nth-child(36) {left: 74.8%;top: 27.4%;}
.stars li:nth-child(37) {left: 78%;top: 24%;}
.stars li:nth-child(38) {left: 91.5%;top: 30.5%;}
.stars li:nth-child(39) {left: 95.5%;top: 29.5%;}
.stars li:nth-child(40) {left: 91.8%;top: 33.5%;}
.stars li:nth-child(41) {left: 96.8%;top: 39.8%;}
.stars li:nth-child(42) {left: 98.5%;top: 41.2%;}
.stars li:nth-child(43) {left: 90.5%;top: 47.5%;}
.stars li:nth-child(44){left: 80%;top: 54%;}
.stars li:nth-child(45) {left: 97%;top: 61%;}
.stars li:nth-child(46) {left: 77%;top: 61%;}
.stars li:nth-child(47) {left: 79.5%;top: 63.5%;}
.stars li:nth-child(48) {left: 71%;top: 73%;}

/*-- camera details --*/
.camera{
  position: absolute;  
  height:100%;
  width:100%;
  z-index:3;
  pointer-events:none;
}
.battery{
position: absolute;
top: 20px;
left: 20px;
width: 80px;
height: 34px;
border: 2px solid white;
border-radius: 5px;
padding: 4px;
box-sizing: border-box;
}
.battery:after{
content: ' ';
background: white;
width: 5px;
height: 21px;
position: absolute;
right: -10px;
border-radius: 0px 2px 2px 0px;
top: 4px;
}
.juice{
background:red;
width:15%;
height:100%;
animation: blinky 1s ease-in-out infinite;
animation-delay: 2s;
}
@keyframes blinky { 
  0% {background:transparent;}
  49% {background:transparent;}
  50% {background:red;}
}
.rec{
  position:absolute;
  right: 30px;
  top: 20px;
  color:#fff;
  font-size:30px;
}
.rec span span{
  width:20px;
  height:20px;
  display:inline-block;
  background:red;
  border-radius:50%;
  margin-right:10px;
  animation: blinky 1s ease-in-out infinite;
}
.meta{
  position:absolute;
  bottom:10px;
  right:30px;
  color:#fff;
  font-size:20px;
  letter-spacing:1px;
}
.exposure{
  border: 2px solid #fff;
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
  top: 3px;
  margin-left: 0px;
}
.exposure:after{
  content: ' ';
  position: absolute;
  width: 0px;
  display: block;
  height: 0px;
  top: 0px;
  right: 0px;
  border-left: 0px solid transparent;
  border-right: 20px solid white;
  border-bottom: 0px solid transparent;
  border-top: 20px solid transparent;
}
.exposure span{
  font-size:12px;
}
.exposure span.plus{
  position: absolute;
  top: -2px;
  left: 2px;}
.exposure span.minus{
  color: #371c3b;
  position: absolute;
  z-index: 1;
  right: 0px;
  font-size: 17px;
  bottom: -5px;
}
.timer{
  position:absolute;
  bottom:30px;
  left:30px;
  color:#fff;
  font-size:20px;
  letter-spacing:1px;
}

/* استایل برای متن زیر UFO */
.ufo-text {
  font-family: 'Vazirmatn', sans-serif;
  color: #fff;
  text-align: center;
  font-size: 24px;
  margin-top: 20px;
  position: relative;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.5);
  font-weight: 700;
  opacity: 0.9;
  transition: all 0.5s ease;
  cursor: pointer;
  padding: 10px;
  border-radius: 15px;
  width: 100%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.ufo-text:hover {
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 0 25px rgba(0, 255, 255, 0.6);
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.1);
}

.engine-on .ufo-text {
  text-shadow: 0 0 15px #0ff, 0 0 25px #0ff;
  animation: text-glow 1s infinite alternate;
}

@keyframes text-glow {
  from {
    opacity: 0.9;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.7), 0 0 25px rgba(0, 255, 255, 0.5);
  }
  to {
    opacity: 1;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.9), 0 0 30px rgba(0, 255, 255, 0.7), 0 0 40px rgba(0, 255, 255, 0.5);
  }
}

.flying-ufo .ufo-text {
  animation: text-fade 0.5s forwards;
  opacity: 0;
  display: none;
}

@keyframes text-fade {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(50px);
    display: none;
  }
}

/* متن تلپورت */
.teleport-text {
  font-family: 'Vazirmatn', sans-serif;
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
  opacity: 0;
  text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff;
  transform: translateY(30px);
  transition: all 0.5s ease;
  display: none;
}

.flying-ufo ~ .foreground .teleport-text {
  display: block;
  animation: teleport-text-show 2s forwards;
}

@keyframes teleport-text-show {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(1.2);
  }
}

/* استایل‌های جدید برای افکت‌های ویژه */

/* اشعه نور */
.beam-wrapper {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 300px;
  pointer-events: none;
  opacity: 0;
  display: none;
  z-index: -1;
}

.beam {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(120, 220, 255, 0.8), rgba(120, 220, 255, 0.1));
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 0 30px rgba(120, 220, 255, 0.8), 0 0 50px rgba(120, 220, 255, 0.4);
  transform-origin: top;
  transform: scaleY(0);
}

.engine-on .beam-wrapper {
  display: block;
  animation: beam-appear 0.5s forwards;
}

.engine-on .beam {
  animation: beam-scale 0.5s forwards, beam-flicker 0.2s infinite alternate;
}

@keyframes beam-appear {
  to { opacity: 1; }
}

@keyframes beam-scale {
  to { transform: scaleY(1); }
}

@keyframes beam-flicker {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* ذرات اشعه */
.beam-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.beam-particles span {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  top: 30px;
  display: none;
}

.engine-on .beam-particles span {
  display: block;
  animation: beam-particle-move 2s infinite linear;
}

.beam-particles span:nth-child(1) { left: 10%; animation-delay: 0.1s; }
.beam-particles span:nth-child(2) { left: 20%; animation-delay: 0.3s; }
.beam-particles span:nth-child(3) { left: 30%; animation-delay: 0.5s; }
.beam-particles span:nth-child(4) { left: 40%; animation-delay: 0.2s; }
.beam-particles span:nth-child(5) { left: 50%; animation-delay: 0.4s; }
.beam-particles span:nth-child(6) { left: 60%; animation-delay: 0.7s; }
.beam-particles span:nth-child(7) { left: 70%; animation-delay: 0.1s; }
.beam-particles span:nth-child(8) { left: 80%; animation-delay: 0.6s; }
.beam-particles span:nth-child(9) { left: 90%; animation-delay: 0.3s; }
.beam-particles span:nth-child(10) { left: 15%; animation-delay: 0.5s; }
.beam-particles span:nth-child(11) { left: 25%; animation-delay: 0.2s; }
.beam-particles span:nth-child(12) { left: 35%; animation-delay: 0.4s; }
.beam-particles span:nth-child(13) { left: 45%; animation-delay: 0.7s; }
.beam-particles span:nth-child(14) { left: 55%; animation-delay: 0.1s; }
.beam-particles span:nth-child(15) { left: 65%; animation-delay: 0.3s; }

@keyframes beam-particle-move {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(290px) scale(0.5);
    opacity: 0;
  }
}

/* ذرات معلق */
.particles-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
  display: none;
}

.engine-on ~ .foreground .particles-container {
  display: block;
}

.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, white 1px, transparent 1px),
    radial-gradient(circle at 40% 70%, white 1px, transparent 1px),
    radial-gradient(circle at 60% 20%, white 1px, transparent 1px),
    radial-gradient(circle at 80% 50%, white 1px, transparent 1px),
    radial-gradient(circle at 10% 60%, white 1px, transparent 1px),
    radial-gradient(circle at 30% 90%, white 1px, transparent 1px),
    radial-gradient(circle at 50% 40%, white 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, white 1px, transparent 1px),
    radial-gradient(circle at 90% 10%, white 1px, transparent 1px);
  background-size: 200px 200px;
  animation: particles-rise 3s linear infinite;
  opacity: 0;
}

.engine-on ~ .foreground .particles {
  animation: particles-rise 5s linear infinite, particles-appear 1s forwards;
}

@keyframes particles-rise {
  from { background-position: 0 0; }
  to { background-position: 0 -200px; }
}

@keyframes particles-appear {
  to { opacity: 0.5; }
}

/* کاونت داون */
.countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  display: none;
  z-index: 10;
}

.countdown-number, .countdown-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Vazirmatn', sans-serif;
  font-size: 60px;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
  opacity: 0;
  transform: scale(0.5);
}

.countdown-text {
  font-size: 40px;
}

.engine-on .countdown {
  display: block;
}

.engine-on .countdown-number:nth-child(1) {
  animation: countdown 1s forwards;
}

.engine-on .countdown-number:nth-child(2) {
  animation: countdown 1s forwards 1s;
}

.engine-on .countdown-number:nth-child(3) {
  animation: countdown 1s forwards 2s;
}

.engine-on .countdown-text {
  animation: countdown 1s forwards 3s;
}

@keyframes countdown {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  10% {
    opacity: 1;
    transform: scale(1.2);
  }
  70% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

/* استایل‌های رسپانسیو برای دستگاه‌های مختلف */
@media screen and (max-width: 1024px) {
  /* تبلت و دستگاه‌های متوسط */
  #ufo {
    width: 280px;
    height: 35px;
  }
  
  #ufo:before {
    width: 275px;
    height: 35px;
  }
  
  .dome {
    width: 90px;
    height: 22px;
    top: -50px;
  }
  
  .antigrav {
    width: 120px;
    top: -34px;
  }
  
  .beam-wrapper {
    width: 80px;
    height: 250px;
  }
  
  .ufo-text {
    font-size: 22px;
  }
  
  .teleport-text {
    font-size: 24px;
  }
}

@media screen and (max-width: 768px) {
  /* تبلت‌های کوچک و موبایل‌های بزرگ */
  #ufo {
    width: 230px;
    height: 30px;
    margin: 0 auto;
    left: 0;
    right: 0;
    position: relative;
  }
  
  .ufoWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 45%;
    transform: translateY(-50%);
    height: auto;
  }
  
  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    vertical-align: initial;
  }
  
  .ufoInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
  }
  
  #ufo:before {
    width: 225px;
    height: 30px;
  }
  
  .dome {
    width: 75px;
    height: 18px;
    top: -45px;
  }
  
  .antigrav {
    width: 100px;
    top: -30px;
    height: 12px;
  }
  
  .ufo-text {
    font-size: 20px;
  }
  
  .teleport-text {
    font-size: 22px;
  }
  
  .thrust ul li {
    transform: scale(0.8);
  }
  
  .beam-wrapper {
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .thrust {
    padding-left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .thrust ul {
    padding-left: 0;
    text-align: center;
  }
  
  .countdown-number {
    font-size: 50px;
  }
  
  .countdown-text {
    font-size: 34px;
  }
  
  .particles {
    background-size: 150px 150px;
  }
  
  @keyframes particles-rise {
    from { background-position: 0 0; }
    to { background-position: 0 -150px; }
  }
}

@media screen and (max-width: 480px) {
  /* موبایل */
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  
  .scene {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #ufo {
    width: 180px;
    height: 25px;
    margin: 0 auto;
    left: 0;
    right: 0;
    position: relative;
  }
  
  #ufo:before {
    width: 175px;
    height: 25px;
    top: -6px;
  }
  
  .dome {
    width: 60px;
    height: 15px;
    top: -40px;
    left: 3px;
  }
  
  .ufoWrap {
    position: fixed;
    top: 38%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .antigrav {
    width: 80px;
    height: 10px;
    top: -26px;
  }
  
  .rings {
    height: 10px;
  }
  
  .inner {
    height: 10px;
  }
  
  .center {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .ufoInner {
    transform: none !important;
    animation: none !important;
    opacity: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  /* تنظیم کلاس flying-ufo در موبایل */
  .flying-ufo {
    animation: fly-away-mobile 2s ease-in forwards !important;
  }

  @keyframes fly-away-mobile {
    0% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateY(-1000px) scale(0.5);
      opacity: 0;
    }
  }
  
  /* متن ورود به شهر مجازی */
  .ufo-text {
    margin-top: 30px;
    font-size: 16px;
    width: 90%;
    max-width: 250px;
  }
  
  /* فیکس کانتر */
  .countdown {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* فیکس افکت‌های نوری */
  .beam-wrapper {
    width: 60px;
    height: 150px;
    bottom: -35px;
  }
  
  .ufoInner.engine-on {
    animation: ufo-engine-on 0.5s forwards !important;
  }
  
  @keyframes ufo-engine-on {
    to {
      opacity: 1;
    }
  }
  
  .teleport-text {
    font-size: 20px;
    width: 90%;
    margin: 0 auto;
  }
  
  .thrust ul {
    width: 50%;
  }
  
  .thrust ul li {
    transform: scale(0.6);
  }
  
  .particles {
    background-size: 100px 100px;
  }
  
  @keyframes particles-rise {
    from { background-position: 0 0; }
    to { background-position: 0 -100px; }
  }
  
  ul.trees1 li, ul.trees2 li, ul.trees3 li {
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 300px solid;
  }
}

@media screen and (max-width: 320px) {
  /* موبایل‌های کوچک */
  #ufo {
    width: 150px;
    height: 20px;
    margin: 0 auto;
  }
  
  .ufoWrap {
    top: 40%;
  }
  
  #ufo:before {
    width: 145px;
    height: 20px;
    top: -5px;
  }
  
  .dome {
    width: 50px;
    height: 13px;
    top: -35px;
  }
  
  .antigrav {
    width: 65px;
    height: 8px;
    top: -22px;
  }
  
  .rings {
    height: 8px;
  }
  
  .inner {
    height: 8px;
  }
  
  .ufo-text {
    font-size: 16px;
    padding: 6px;
  }
  
  .teleport-text {
    font-size: 18px;
  }
  
  .beam-wrapper {
    width: 50px;
    height: 130px;
  }
  
  ul.trees1 li, ul.trees2 li, ul.trees3 li {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 220px solid;
  }
}

/* تنظیمات ویژه برای ارتفاع‌های مختلف */
@media screen and (max-height: 700px) and (min-width: 481px) {
  .ufoWrap {
    top: -50px;
    position: relative;
  }
  
  ul.trees1 {bottom: -170px;}
  ul.trees2 {bottom: -100px;}
  ul.trees3 {bottom: -200px;}
}

@media screen and (max-height: 600px) {
  .ufoWrap {
    top: -80px;
    position: relative;
  }
  
  .ufo-text {
    margin-top: 0;
  }
}

/* تنظیمات اختصاصی برای جهت‌های مختلف موبایل */
@media screen and (max-width: 480px) and (orientation: landscape) {
  .ufoWrap {
    top: 50%;
    position: fixed;
    transform: translateY(-50%);
  }
  
  #ufo {
    transform: scale(0.7);
    margin: 0 auto;
    position: relative;
  }
  
  ul.trees1 {bottom: -240px;}
  ul.trees2 {bottom: -140px;}
  ul.trees3 {bottom: -270px;}
}

@keyframes ufo-mobile { 
  50% {
    opacity: 1;
  }
}