@media (min-width:768px){
  .sky-map{
    will-change:transform;
    transform:translate3d(0,0,0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform-origin:50% 42%;
  }
  .sky-map::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("/assets/sky-map.svg") center / cover no-repeat;
    animation:sky-breathe 9s ease-in-out infinite;
  }
  .sky-map::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(circle at 18% 11%, rgba(232,251,255,.55) 0 1px, transparent 3px),
      radial-gradient(circle at 74% 14%, rgba(232,251,255,.5) 0 1.2px, transparent 3.5px),
      radial-gradient(circle at 24% 16%, rgba(200,255,248,.45) 0 1px, transparent 3px),
      radial-gradient(circle at 86% 18%, rgba(232,251,255,.4) 0 1px, transparent 3px),
      radial-gradient(circle at 19% 52%, rgba(255,255,255,.5) 0 1.1px, transparent 3.2px);
    animation:sky-flare 6.5s ease-in-out infinite;
  }
  @supports (animation-timeline: scroll()){
    .sky-map{
      animation:sky-parallax linear both;
      animation-timeline:scroll();
    }
  }
}

@keyframes sky-parallax{
  from{transform:translate3d(0,0,0) rotate(0deg);}
  to{transform:translate3d(0,-3.5vh,0) rotate(18deg);}
}
@keyframes sky-breathe{
  0%,100%{opacity:0.85;}
  50%{opacity:1;}
}
@keyframes sky-flare{
  0%,100%{opacity:0.35;}
  40%{opacity:1;}
  70%{opacity:0.45;}
}

@media (max-width:767px){
  .sky-map,
  .sky-map::before,
  .sky-map::after{
    display:none !important;
    animation:none !important;
    content:none !important;
    background:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .sky-map,
  .sky-map::before,
  .sky-map::after{
    animation:none !important;
  }
  .sky-map{
    transform:translate3d(0,0,0);
    will-change:auto;
  }
}