.orbit-container{width:400px;height:calc(var(--orbit-radius)*2 + 300px);margin:0 auto;position:relative}.center-component{z-index:2;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.orbit-circle{transform-origin:0 0;width:100px;height:100px;animation:50s linear infinite rotate;position:absolute;top:50%;left:50%}.orbit-circle img{border-radius:50%;width:100%;height:100%;animation:50s linear infinite spin}@keyframes rotate{0%{transform:rotate(calc(360deg*var(--i)/var(--total)))translateX(var(--orbit-radius))}to{transform:rotate(calc(360deg*var(--i)/var(--total) + 360deg))translateX(var(--orbit-radius))}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width:768px){.orbit-container{width:90vw;height:calc(var(--orbit-radius)*2 + 150px)}.orbit-circle{width:10vw;height:10vw}}
.loader-container{z-index:1;flex-direction:column;align-items:center;gap:1rem;display:flex;position:relative}.traffic-light{-webkit-backdrop-filter:blur(20px)saturate(180%);backdrop-filter:blur(20px)saturate(180%);background:linear-gradient(145deg,#1a1a1a 0%,#2d2d2d 40%,#1e1e1e 100%);border:1px solid #ffffff14;border-radius:28px;width:100px;padding:24px;position:relative;box-shadow:0 40px 80px #00000080,0 20px 40px #0000004d,0 8px 16px #0003,inset 0 2px #ffffff0d,inset 0 -2px 20px #000c}.light-row{justify-content:center;align-items:center;margin:18px 0;display:flex;position:relative}.light-row:first-child{margin-top:0}.light-row:last-child{margin-bottom:0}.light{border:2px solid #ffffff0f;border-radius:50%;width:40px;height:40px;transition:all .6s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.light:before{content:"";filter:blur(6px);opacity:.4;background:linear-gradient(135deg,#ffffff26 0%,#0000 60%);border-radius:50%;width:28px;height:24px;position:absolute;top:16px;left:20px}.light:after{content:"";background:radial-gradient(circle at 35% 35%,#ffffff14 0%,#0000 65%);border-radius:50%;position:absolute;inset:0}.red-light{background:radial-gradient(circle,#2d1515 0%,#1a0808 80%),linear-gradient(135deg,#331212,#1a0606);animation:4s ease-in-out infinite redSequence;box-shadow:inset 0 6px 12px #0006,inset 0 -3px 6px #ffffff05}@keyframes redSequence{0%{background:radial-gradient(circle,#f44 0%,#c11 80%),linear-gradient(135deg,#f55,#d22);border-color:#ff444440;transform:scale(1.05);box-shadow:0 0 40px #f449,0 0 80px #ff44444d,0 0 120px #ff444426,inset 0 3px 6px #ffffff26,inset 0 -3px 6px #0006}25%,75%,to{background:radial-gradient(circle,#2d1515 0%,#1a0808 80%),linear-gradient(135deg,#331212,#1a0606);border-color:#ffffff0f;transform:scale(1);box-shadow:inset 0 6px 12px #0006,inset 0 -3px 6px #ffffff05}}.yellow-light{background:radial-gradient(circle,#2d2d15 0%,#1a1a08 80%),linear-gradient(135deg,#333312,#1a1a06);animation:4s ease-in-out infinite yellowSequence;box-shadow:inset 0 6px 12px #0006,inset 0 -3px 6px #ffffff05}@keyframes yellowSequence{0%,50%,to{background:radial-gradient(circle,#2d2d15 0%,#1a1a08 80%),linear-gradient(135deg,#333312,#1a1a06);border-color:#ffffff0f;transform:scale(1);box-shadow:inset 0 6px 12px #0006,inset 0 -3px 6px #ffffff05}25%{background:radial-gradient(circle,#fd4 0%,#c90 80%),linear-gradient(135deg,#fe5,#da2);border-color:#ffdd4440;transform:scale(1.05);box-shadow:0 0 40px #fd49,0 0 80px #ffdd444d,0 0 120px #ffdd4426,inset 0 3px 6px #ffffff26,inset 0 -3px 6px #0006}}.green-light{background:radial-gradient(circle,#152d15 0%,#081a08 80%),linear-gradient(135deg,#123312,#061a06);animation:4s ease-in-out infinite greenSequence;box-shadow:inset 0 6px 12px #0006,inset 0 -3px 6px #ffffff05}@keyframes greenSequence{0%,25%,75%{background:radial-gradient(circle,#152d15 0%,#081a08 80%),linear-gradient(135deg,#123312,#061a06);border-color:#ffffff0f;transform:scale(1);box-shadow:inset 0 6px 12px #0006,inset 0 -3px 6px #ffffff05}50%,to{background:radial-gradient(circle,#4f4 0%,#1c1 80%),linear-gradient(135deg,#5f5,#2d2);border-color:#44ff4440;transform:scale(1.05);box-shadow:0 0 40px #4f49,0 0 80px #44ff444d,0 0 120px #44ff4426,inset 0 3px 6px #ffffff26,inset 0 -3px 6px #0006}}.loading-status{color:#ffffff80;letter-spacing:.5px;font-size:12px;font-weight:500;animation:4s ease-in-out infinite statusUpdate}.loading-status:before{content:"Initializing red signal...";animation:4s ease-in-out infinite textUpdate}@keyframes textUpdate{0%,24%{content:"Hold on..."}25%,49%{content:"Almost ready..."}50%,74%{content:"Enjoy your stay:)"}75%,to{content:"Completing traffic sequence..."}}@keyframes statusUpdate{0%,to{opacity:1}12.5%,37.5%,62.5%,87.5%{opacity:.5}}