/* مشهد أبراج الاتصالات */
.stage {
  position: absolute; inset: 0 0 auto 0; height: var(--sh); overflow: hidden; z-index: 0; transition: height .55s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(180deg, var(--sky1) 0, var(--sky2) 42%, var(--sky3) 78%, var(--sky4) 100%);
}
.stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 110px; background: linear-gradient(180deg, transparent, var(--bg)); }
.stage svg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: max(100%, calc(var(--sh) * 2.1053)); overflow: visible; display: block; }

.stars circle { animation: twinkle 3.6s ease-in-out infinite; }
.stars circle:nth-child(2n) { animation-delay: 1.2s; }
.stars circle:nth-child(3n) { animation-delay: 2.1s; }
@media (prefers-color-scheme: light) { :root:not([data-theme=dark]) .stars { display: none; } }
:root[data-theme=light] .stars { display: none; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.rg { vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; animation: ring 3.9s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(15); opacity: 0; } }
.rg.burst { animation: none; stroke-width: 2; }
#scene.ping .rg.burst { animation: burst 1.1s cubic-bezier(.2,.6,.3,1) both; }
@keyframes burst { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(22); opacity: 0; } }

.bm { opacity: .55; transform-box: fill-box; transform-origin: right center; animation: beam 5s ease-in-out infinite; }
.bm.b2 { transform-origin: left center; animation-delay: 2.5s; }
@keyframes beam { 0%, 100% { opacity: .15; transform: scaleX(.82); } 50% { opacity: .75; transform: scaleX(1); } }

.bc, .bcm { fill: var(--ring); animation: blink 1.9s ease-in-out infinite; }
.bcm { animation-duration: 1.4s; }
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }