/* ORBITA 22 · PLANETARY DEEP FIELD / PERFORMANCE FIRST
   All motion is local to the ecosystem scene and uses transform + opacity only. */
#app-shell .eco-deepfield{contain:paint}
#app-shell .eco-deepfield-nebula{filter:none;opacity:.18}
#app-shell .eco-planetarium{position:absolute;z-index:0;inset:0;overflow:hidden;isolation:isolate;contain:layout paint;pointer-events:none}
#app-shell .eco-planet-orbit{position:absolute;left:50%;top:50%;width:1px;height:1px;border:1px solid rgba(145,204,241,.13);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
#app-shell .eco-planet-orbit-a{left:19%;top:49%;width:102px;height:66px;transform:translate(-50%,-50%) rotate(-28deg);border-color:rgba(99,213,236,.2)}
#app-shell .eco-planet-orbit-b{left:82%;top:49%;width:116px;height:78px;transform:translate(-50%,-50%) rotate(32deg);border-style:dashed;border-color:rgba(187,159,247,.19)}
#app-shell .eco-planet{position:absolute;display:block;width:34px;height:34px;border-radius:50%;backface-visibility:hidden;transform:translate3d(0,0,0);box-shadow:inset -7px -6px 11px rgba(3,8,25,.72),inset 3px 3px 7px rgba(232,250,255,.28),0 0 12px rgba(104,190,237,.18)}
#app-shell .eco-planet::before{content:"";position:absolute;inset:2px;border-radius:50%;background:linear-gradient(112deg,transparent 24%,rgba(255,255,255,.12) 48%,transparent 66%);opacity:.75}
#app-shell .eco-planet-azure{left:19%;top:49%;width:29px;height:29px;background:radial-gradient(circle at 29% 25%,#e5ffff 0,#70d4e9 10%,#2877b4 43%,#112c62 78%,#08132f 100%)}
#app-shell .eco-planet-ringed{left:82%;top:49%;width:39px;height:39px;background:radial-gradient(circle at 32% 24%,#fff1db 0,#e2a88a 13%,#a45d78 47%,#40345f 77%,#161a3b 100%);box-shadow:inset -8px -7px 12px rgba(5,7,25,.74),inset 3px 2px 8px rgba(255,244,225,.3),0 0 15px rgba(221,154,202,.16)}
#app-shell .eco-planet-ringed::after{content:"";position:absolute;left:-13px;top:12px;width:64px;height:15px;border:2px solid rgba(224,194,255,.62);border-left-color:rgba(224,194,255,.17);border-right-color:rgba(224,194,255,.26);border-radius:50%;transform:rotate(-19deg);box-shadow:0 0 6px rgba(188,151,255,.2)}
#app-shell .eco-planet-ringed i{position:absolute;left:-9px;top:15px;width:57px;height:8px;border:1px solid rgba(255,215,187,.42);border-radius:50%;transform:rotate(-19deg)}
#app-shell .eco-planet-ember{left:67%;top:18%;width:15px;height:15px;background:radial-gradient(circle at 30% 24%,#fff0c3 0,#f5b477 18%,#c85d61 52%,#542c65 82%,#171c3d 100%);box-shadow:inset -3px -3px 5px rgba(9,7,28,.72),0 0 9px rgba(255,170,119,.24)}
#app-shell .eco-moon-track{position:absolute;left:82%;top:49%;width:63px;height:63px;border:1px dashed rgba(221,205,255,.2);border-radius:50%;transform:translate(-50%,-50%) rotate(34deg)}
#app-shell .eco-moon-track i{position:absolute;left:50%;top:-3px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#c5daef 42%,#536985 100%);box-shadow:0 0 7px rgba(191,226,255,.65)}
#app-shell .eco-asteroid-belt{position:absolute;left:50%;top:52%;width:62%;height:22%;border:1px dashed rgba(177,167,223,.11);border-radius:50%;transform:translate(-50%,-50%) rotate(-17deg)}
#app-shell .eco-asteroid-belt i{position:absolute;display:block;width:3px;height:3px;border-radius:50%;background:#b9c9dd;box-shadow:0 0 4px rgba(166,194,229,.36)}
#app-shell .eco-asteroid-belt i:nth-child(1){left:8%;top:28%;width:2px;height:2px}
#app-shell .eco-asteroid-belt i:nth-child(2){left:21%;top:78%;width:4px;height:3px}
#app-shell .eco-asteroid-belt i:nth-child(3){left:39%;top:9%}
#app-shell .eco-asteroid-belt i:nth-child(4){left:56%;top:88%;width:2px;height:2px}
#app-shell .eco-asteroid-belt i:nth-child(5){left:73%;top:15%;width:4px;height:3px}
#app-shell .eco-asteroid-belt i:nth-child(6){left:88%;top:68%}
#app-shell .eco-asteroid-belt i:nth-child(7){left:96%;top:35%;width:2px;height:2px}
#app-shell .eco-meteor{position:absolute;display:block;width:2px;height:2px;border-radius:50%;background:#f1fbff;opacity:0;box-shadow:0 0 6px 2px rgba(172,225,255,.72);transform:translate3d(0,0,0);backface-visibility:hidden}
#app-shell .eco-meteor::before{content:"";position:absolute;right:0;top:0;width:66px;height:1.5px;transform:translateY(-50%) rotate(-24deg);transform-origin:right center;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(123,204,255,.16),rgba(218,244,255,.86));}
#app-shell .eco-meteor-a{left:5%;top:25%;animation:eco102-meteor-a 21s ease-in infinite}
#app-shell .eco-meteor-b{right:8%;top:31%;animation:eco102-meteor-b 27s ease-in infinite 6s}
#app-shell .eco-meteor-c{left:34%;bottom:17%;animation:eco102-meteor-c 33s ease-in infinite 12s}
#app-shell .eco-deepstar{position:absolute;width:2px;height:2px;border-radius:50%;background:#dff7ff;box-shadow:0 0 6px rgba(144,217,255,.58)}
#app-shell .eco-deepstar-a{left:39%;top:26%}
#app-shell .eco-deepstar-b{right:31%;bottom:22%;width:3px;height:3px}
#app-shell .eco-deepstar-c{left:13%;bottom:18%;width:1px;height:1px}
#app-shell #orbita-ecosystem[data-eco-mode="aurora"] .eco-planet-azure{background:radial-gradient(circle at 29% 25%,#ecfff9 0,#8af4da 11%,#298c9c 47%,#123758 79%,#08132f 100%)}
#app-shell #orbita-ecosystem[data-eco-mode="aurora"] .eco-planet-ember{background:radial-gradient(circle at 30% 24%,#e7fff0 0,#7fe2c8 18%,#318b8c 56%,#203357 100%)}
#app-shell #orbita-ecosystem[data-eco-mode="quantum"] .eco-planet-ringed::after{border-color:rgba(153,185,255,.74);box-shadow:0 0 8px rgba(142,170,255,.34)}
#app-shell #orbita-ecosystem[data-eco-mode="quantum"] .eco-asteroid-belt{border-color:rgba(162,147,255,.24)}
@keyframes eco102-meteor-a{0%,68%,100%{opacity:0;transform:translate3d(0,0,0)}4%{opacity:.9}18%{opacity:0;transform:translate3d(35vw,21vw,0)}}
@keyframes eco102-meteor-b{0%,72%,100%{opacity:0;transform:translate3d(0,0,0)}5%{opacity:.85}20%{opacity:0;transform:translate3d(-33vw,25vw,0)}}
@keyframes eco102-meteor-c{0%,76%,100%{opacity:0;transform:translate3d(0,0,0)}4%{opacity:.72}19%{opacity:0;transform:translate3d(30vw,-22vw,0)}}
@media(prefers-reduced-motion:no-preference){
 #app-shell .eco-planet-azure{animation:eco102-planet-float-a 42s ease-in-out infinite}
 #app-shell .eco-planet-ringed{animation:eco102-planet-float-b 54s ease-in-out infinite}
 #app-shell .eco-planet-ember{animation:eco102-planet-float-c 36s ease-in-out infinite}
 #app-shell .eco-moon-track{animation:eco102-moon-orbit 48s linear infinite}
}
@keyframes eco102-planet-float-a{0%,100%{translate:0 0}50%{translate:5px -7px}}
@keyframes eco102-planet-float-b{0%,100%{translate:0 0}50%{translate:-5px 6px}}
@keyframes eco102-planet-float-c{0%,100%{translate:0 0}50%{translate:3px 5px}}
@keyframes eco102-moon-orbit{to{rotate:360deg}}
@media(max-width:640px){
 #app-shell .eco-planet-azure{width:23px;height:23px}
 #app-shell .eco-planet-ringed{width:30px;height:30px}
 #app-shell .eco-planet-ringed::after{left:-10px;top:10px;width:50px;height:12px}
 #app-shell .eco-planet-ringed i{left:-7px;top:12px;width:44px;height:7px}
 #app-shell .eco-planet-ember{width:11px;height:11px}
 #app-shell .eco-asteroid-belt{width:70%;height:18%;opacity:.62}
 #app-shell .eco-meteor-b{display:none}
 #app-shell .eco-meteor-a{animation-duration:30s}
 #app-shell .eco-meteor-c{animation-duration:38s}
 #app-shell .eco-deepfield-nebula{filter:none;opacity:.12}
 #app-shell .eco-constellation-lines circle{filter:none}
}
@media(max-width:380px){
 #app-shell .eco-asteroid-belt{display:none}
 #app-shell .eco-meteor-c{display:none}
 #app-shell .eco-planet-orbit-a{width:74px;height:48px}
 #app-shell .eco-planet-orbit-b{width:82px;height:58px}
 #app-shell .eco-moon-track{width:48px;height:48px}
}
@media(hover:none),(pointer:coarse){
 #app-shell .eco-meteor-a{animation-duration:32s}
 #app-shell .eco-meteor-c{animation-duration:44s}
 #app-shell .eco-planet-azure,#app-shell .eco-planet-ringed,#app-shell .eco-planet-ember{animation-duration:64s}
 #app-shell .eco-asteroid-belt{opacity:.52}
}
@media(prefers-reduced-motion:reduce){
 #app-shell .eco-meteor,#app-shell .eco-planet-azure,#app-shell .eco-planet-ringed,#app-shell .eco-planet-ember,#app-shell .eco-moon-track{animation:none!important;translate:none!important;rotate:none!important;opacity:1}
}
@media(prefers-reduced-data:reduce){
 #app-shell .eco-meteor,#app-shell .eco-asteroid-belt,#app-shell .eco-deepstar{display:none!important}
 #app-shell .eco-planet-azure,#app-shell .eco-planet-ringed,#app-shell .eco-planet-ember,#app-shell .eco-moon-track{animation:none!important}
 #app-shell .eco-deepfield-nebula{filter:none!important;opacity:.08!important}
}
@media(max-width:640px) and (prefers-reduced-motion:no-preference){
 #app-shell .eco-asteroid-belt{animation:none!important}
}
@media(hover:none),(pointer:coarse){
 #app-shell .eco-probe-b,#app-shell .eco-probe-c{display:none!important}
 #app-shell .eco-deepfield-nebula{filter:none!important;opacity:.1}
}

/* Two distant worlds add depth without adding additional rendering layers. */
#app-shell .eco-planet-frost{left:34%;top:78%;width:18px;height:18px;background:radial-gradient(circle at 28% 22%,#f2ffff 0,#a6eaf0 15%,#4d94c0 54%,#233b6e 88%,#101a39 100%);box-shadow:inset -4px -4px 6px rgba(4,9,27,.7),0 0 8px rgba(127,215,255,.18)}
#app-shell .eco-planet-violet{left:91%;top:17%;width:13px;height:13px;background:radial-gradient(circle at 28% 24%,#fff0ff 0,#d9b8ff 16%,#8262be 56%,#282449 90%,#15172f 100%);box-shadow:inset -3px -3px 4px rgba(8,6,27,.7),0 0 7px rgba(191,152,255,.2)}
#app-shell #orbita-ecosystem[data-eco-mode="aurora"] .eco-planet-frost{background:radial-gradient(circle at 28% 22%,#f3fffb 0,#a3efd7 16%,#4b9e99 56%,#1a4154 90%,#101a39 100%)}
#app-shell #orbita-ecosystem[data-eco-mode="quantum"] .eco-planet-violet{background:radial-gradient(circle at 28% 24%,#fff 0,#d8d0ff 17%,#927be2 56%,#35326d 90%,#15172f 100%)}
@media(max-width:640px){#app-shell .eco-planet-frost{width:14px;height:14px}#app-shell .eco-planet-violet{width:10px;height:10px}}