Plane Animation Control Variables
:root{--plane-scale-min:0.3;--plane-scale-center:1;--plane-scale-return:0.8;--plane-flight-duration:15s;--plane-pause-duration:15s;--plane-total-cycle:calc(var(--plane-flight-duration) * 2 + var(--plane-pause-duration) * 2);--plane-center-width:50px;--plane-outbound-rotation:285deg;--plane-return-rotation:105deg}@keyframes slideInLeftLoop{0%{transform:translateX(-100%);opacity:0}25%{transform:translateX(0);opacity:1}70%,to{transform:translateX(0);opacity:1}}@keyframes slideInRightLoop{0%{transform:translateX(100%);opacity:0}25%{transform:translateX(0);opacity:1}70%,to{transform:translateX(0);opacity:1}}.slide-in-left-loop{animation:slideInLeftLoop 3s ease-in-out infinite}.slide-in-right-loop{animation:slideInRightLoop 3s ease-in-out infinite}@keyframes blob{0%{transform:scale(1) translate(0)}33%{transform:scale(1.1) translate(30px,-50px)}66%{transform:scale(.9) translate(-20px,20px)}to{transform:scale(1) translate(0)}}.animate-blob{animation:blob 7s infinite alternate}.animation-delay-2000{animation-delay:2s}.animation-delay-4000{animation-delay:4s}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn 1s ease-out forwards}.globe{position:relative;width:400px;height:400px;overflow:hidden;border-radius:210px;margin:0 auto}@media (min-width:640px){.globe{width:520px;height:520px;border-radius:260px}}@media (min-width:1024px){.globe{width:550px;height:550px;border-radius:325px;margin:0}}.globe:before{content:"";position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;border-radius:50%;box-shadow:inset 50px 0 100px 0 #2f548f,inset 0 0 50px 0 #2f64bb}.dark .globe:before,[data-theme=dark] .globe:before,html.dark .globe:before{box-shadow:inset 50px 0 100px 0 #000,inset 0 0 50px 0 #000}.beacon{position:absolute;z-index:2;display:block;width:4px;height:4px;border-radius:2px;background:#fff;color:#fff;text-decoration:none;transition-duration:1s}.beacon:before{z-index:3;border-radius:10px;border:1px solid #fff;box-shadow:0 0 4px 0 #fff;animation:signal 2s ease-out infinite}.beacon:after,.beacon:before{content:"";position:absolute;top:-8px;left:-8px;width:20px;height:20px}.beacon:after{z-index:4;text-indent:25px;line-height:20px}.beacon:focus:after,.beacon:hover:after{content:attr(data-location)}@keyframes signal{0%{transform:scale(0);opacity:0}50%{opacity:1}to{transform:scale(1);opacity:0}}[data-location=Hawaii]{top:154px;left:360px}[data-location=Tonga]{top:233px;left:345px}[data-location=Madagascar]{top:218px;left:120px}[data-location=Cindy-Canada]{top:111px;left:155px}[data-location=Hyderabad-India]{top:162px;left:400px}@media (min-width:640px){[data-location=Hawaii]{top:179px;left:420px}[data-location=Tonga]{top:271px;left:403px}[data-location=Madagascar]{top:254px;left:140px}[data-location=Cindy-Canada]{top:130px;left:183px}[data-location=Hyderabad-India]{top:192px;left:466px}}@media (min-width:1024px){[data-location=Hawaii]{top:205px;left:480px}[data-location=Tonga]{top:310px;left:460px}[data-location=Madagascar]{top:290px;left:160px}[data-location=Cindy-Canada]{top:147px;left:212px}[data-location=Hyderabad-India]{top:218px;left:533px}}.surface{position:relative;width:800px;height:400px;margin-left:-400px;line-height:0;background:url(/images/map.png);background-position:50%;background-repeat:no-repeat;background-size:cover;background-color:transparent;animation:axis 60s linear infinite}.plane{position:absolute;top:145px;left:212px;width:40px;height:40px;z-index:5;animation:flyRoute 24s linear infinite;transform-origin:center}@keyframes flyRoute{0%{transform:translate(0) rotate(12deg)}40%{transform:translate(321px,71px) rotate(12deg)}50%{transform:translate(321px,71px) rotate(12deg)}90%{transform:translate(0) rotate(192deg)}to{transform:translate(0) rotate(192deg)}}@media (min-width:640px){.surface{width:700px;height:350px;margin-left:-350px}@keyframes fly{0%{top:172px;left:446px;transform:scale(var(--plane-scale-min)) rotate(var(--plane-outbound-rotation))}13.75%{top:172px;left:446px;transform:scale(var(--plane-scale-center)) rotate(var(--plane-outbound-rotation))}36.25%{top:110px;left:163px;transform:scale(var(--plane-scale-center)) rotate(var(--plane-outbound-rotation))}50%{top:110px;left:163px;transform:scale(var(--plane-scale-min)) rotate(var(--plane-outbound-rotation))}50.01%{top:110px;left:163px;transform:scale(var(--plane-scale-min)) rotate(var(--plane-return-rotation))}63.75%{top:110px;left:163px;transform:scale(var(--plane-scale-center)) rotate(var(--plane-return-rotation))}86.25%{top:172px;left:446px;transform:scale(var(--plane-scale-center)) rotate(var(--plane-return-rotation))}to{top:172px;left:446px;transform:scale(var(--plane-scale-min)) rotate(var(--plane-return-rotation))}}}@media (min-width:1024px){.surface{width:800px;height:400px;margin-left:-400px}@keyframes fly{0%{top:198px;left:513px;transform:scale(var(--plane-scale-min)) rotate(var(--plane-outbound-rotation))}13.75%{top:198px;left:513px;transform:scale(var(--plane-scale-center)) rotate(var(--plane-outbound-rotation))}36.25%{top:127px;left:192px;transform:scale(var(--plane-scale-center)) rotate(var(--plane-outbound-rotation))}50%{top:127px;left:192px;transform:scale(var(--plane-scale-min)) rotate(var(--plane-outbound-rotation))}50.01%{top:127px;left:192px;transform:scale(var(--plane-scale-min)) rotate(var(--plane-return-rotation))}63.75%{top:127px;left:192px;transform:scale(var(--plane-scale-center)) rotate(var(--plane-return-rotation))}86.25%{top:198px;left:513px;transform:scale(var(--plane-scale-center)) rotate(var(--plane-return-rotation))}to{top:198px;left:513px;transform:scale(var(--plane-scale-min)) rotate(var(--plane-return-rotation))}}}@keyframes axis{0%{margin-left:-300px}50%{margin-left:0}to{margin-left:-300px}}.globe,.globe:after,.globe:before{box-sizing:border-box;margin:0;padding:0}.bright-video{filter:brightness(1.4)}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.animate-gradient{animation:gradient 3s ease infinite}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.animate-shimmer{animation:shimmer 3s linear infinite;background:linear-gradient(90deg,transparent 0,hsla(0,0%,100%,.3) 50%,transparent);background-size:1000px 100%}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in-up{animation:fadeInUp .8s ease-out forwards}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.animate-scale-in{animation:scaleIn .6s ease-out forwards}