.satellite-approach{--satellite-reveal:0;position:absolute;z-index:18;top:50%;right:clamp(14px,4vw,62px);width:min(34vw,440px);aspect-ratio:1.45;transform:translate(26px,-44%) scale(.94);opacity:0;visibility:hidden;pointer-events:none;filter:drop-shadow(0 26px 50px rgba(0,0,0,.58));transition:opacity .18s linear,transform .7s cubic-bezier(.16,1,.3,1),visibility .18s}
.satellite-approach.visible{opacity:var(--satellite-reveal);visibility:visible;transform:translate(0,-50%) scale(1)}
.satellite-frame{position:absolute;inset:22px 0 34px;overflow:hidden;border:1px solid rgba(153,239,255,.42);border-radius:18px;background:#02070a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0 44px rgba(0,0,0,.42),0 0 34px rgba(65,221,235,.12)}
.satellite-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.03 + var(--satellite-reveal) * .38));filter:saturate(1.04) contrast(1.08) brightness(.84);transition:transform .12s linear,opacity .68s cubic-bezier(.16,1,.3,1),filter .68s ease;will-change:transform,opacity}
.satellite-destination-frame{z-index:1;opacity:0;transform:scale(1.08)!important;filter:saturate(1.02) contrast(1.02) brightness(.68)!important}
.satellite-scan,.satellite-crosshair,.satellite-vignette{z-index:2;transition:opacity .46s ease}
.satellite-approach.handoff .satellite-source{opacity:0;filter:saturate(.72) contrast(.92) brightness(.5)}
.satellite-approach.handoff .satellite-destination-frame{opacity:1;transform:scale(1.015)!important;filter:saturate(1.03) contrast(1.02) brightness(.82)!important}
.satellite-approach.handoff .satellite-scan,.satellite-approach.handoff .satellite-crosshair{opacity:0}
.satellite-approach.handoff .satellite-vignette{opacity:.38}
.satellite-approach.complete{opacity:0!important;visibility:hidden;transition-duration:.52s}
.satellite-orbit-label,.satellite-meta{position:absolute;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;color:#d9f9ff;text-shadow:0 2px 12px #000;font:800 11px/1.2 system-ui}
.satellite-orbit-label{top:0;justify-content:flex-start;gap:7px;letter-spacing:.05em}.satellite-orbit-label i{width:6px;height:6px;border-radius:50%;background:#75fff2;box-shadow:0 0 13px #75fff2;animation:satellitePulse 1.4s ease-in-out infinite}
.satellite-meta{bottom:7px}.satellite-meta b{color:#fff}.satellite-meta span{direction:ltr;color:#8eece9;font-variant-numeric:tabular-nums}
.satellite-scan{position:absolute;inset:-80% 0;background:linear-gradient(transparent 46%,rgba(111,255,242,.14) 49%,rgba(255,255,255,.18) 50%,transparent 53%);transform:translateY(calc(var(--satellite-reveal) * 52%));mix-blend-mode:screen}
.satellite-vignette{position:absolute;inset:0;background:radial-gradient(circle at var(--sat-x) var(--sat-y),transparent 0 10%,rgba(0,0,0,.12) 34%,rgba(0,4,8,.56) 100%)}
.satellite-crosshair{position:absolute;left:var(--sat-x);top:var(--sat-y);width:58px;height:58px;transform:translate(-50%,-50%) scale(calc(.72 + var(--satellite-reveal) * .28));border:1px solid rgba(255,255,255,.78);border-radius:50%;box-shadow:0 0 20px rgba(117,255,242,.3)}
.satellite-crosshair::before,.satellite-crosshair::after{content:"";position:absolute;background:rgba(255,255,255,.86);box-shadow:0 0 8px #75fff2}.satellite-crosshair::before{left:50%;top:-8px;width:1px;height:74px}.satellite-crosshair::after{top:50%;left:-8px;width:74px;height:1px}.satellite-crosshair i{position:absolute;inset:9px;border:1px dashed rgba(117,255,242,.78);border-radius:50%;animation:satelliteSpin 6s linear infinite}
.satellite-approach.arrived .satellite-frame{border-color:rgba(255,211,128,.7);box-shadow:0 0 42px rgba(255,190,91,.16)}
@keyframes satelliteSpin{to{transform:rotate(360deg)}}@keyframes satellitePulse{50%{opacity:.45;transform:scale(.72)}}
@media(max-width:720px){.satellite-approach{top:auto;right:12px;bottom:max(150px,20vh);width:min(48vw,260px);transform:translate(18px,12px) scale(.92)}.satellite-approach.visible{transform:none}.satellite-frame{inset:20px 0 31px;border-radius:13px}.satellite-crosshair{width:42px;height:42px}.satellite-crosshair::before{height:56px}.satellite-crosshair::after{width:56px}.satellite-meta{font-size:9px}}
@media(prefers-reduced-motion:reduce){.satellite-approach,.satellite-frame img,.satellite-scan,.satellite-crosshair,.satellite-vignette{transition:none}.satellite-crosshair i,.satellite-orbit-label i{animation:none}}