/* ===========================================================================
   Star field. Three repeating tiles drifting on the compositor instead of a
   canvas repainting every frame: cheaper, battery-friendly, and it does not
   make the browser drop paints on a very long page.
   =========================================================================== */
#sky{position:fixed;inset:-10%;z-index:0;pointer-events:none;overflow:hidden}
#sky i{position:absolute;inset:0;display:block;background-repeat:repeat;will-change:transform}

#sky .s1{
  background-size:420px 420px;
  background-image:
    radial-gradient(0.86px 0.86px at 165px 77px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.66px 0.66px at 37px 274px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.62px 0.62px at 259px 109px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.76px 0.76px at 214px 35px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.68px 0.68px at 30px 289px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.98px 0.98px at 322px 321px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.86px 0.86px at 295px 299px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.16px 1.16px at 23px 285px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.95px 0.95px at 214px 73px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.04px 1.04px at 286px 417px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.02px 1.02px at 297px 292px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.06px 1.06px at 49px 280px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.92px 0.92px at 316px 105px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.9px 0.9px at 397px 160px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.76px 0.76px at 185px 153px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.76px 0.76px at 357px 399px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.17px 1.17px at 268px 253px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.24px 1.24px at 147px 311px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.71px 0.71px at 262px 214px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.87px 0.87px at 77px 250px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.97px 0.97px at 391px 285px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.83px 0.83px at 174px 355px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.9px 0.9px at 296px 408px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.05px 1.05px at 138px 242px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.06px 1.06px at 31px 374px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.85px 0.85px at 145px 366px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.83px 0.83px at 11px 236px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.74px 0.74px at 252px 30px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.76px 0.76px at 66px 378px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.71px 0.71px at 254px 41px,rgba(77,235,255,.95),rgba(0,0,0,0));
  opacity:.55; animation:drift1 260s linear infinite;
}
#sky .s2{
  background-size:640px 640px;
  background-image:
    radial-gradient(1.61px 1.61px at 562px 284px,rgba(177,156,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.47px 1.47px at 563px 285px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.02px 1.02px at 389px 236px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.43px 1.43px at 154px 237px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.05px 1.05px at 496px 603px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.24px 1.24px at 4px 149px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.15px 1.15px at 624px 579px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.42px 1.42px at 527px 632px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.21px 1.21px at 467px 572px,rgba(177,156,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.29px 1.29px at 403px 106px,rgba(177,156,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.95px 0.95px at 63px 195px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.99px 0.99px at 451px 166px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.35px 1.35px at 104px 0px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.92px 0.92px at 372px 628px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.02px 1.02px at 628px 385px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.19px 1.19px at 355px 616px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.69px 1.69px at 118px 499px,rgba(177,156,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.15px 1.15px at 491px 495px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.49px 1.49px at 104px 350px,rgba(177,156,255,.95),rgba(0,0,0,0)),
    radial-gradient(0.92px 0.92px at 165px 528px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.63px 1.63px at 150px 556px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.31px 1.31px at 93px 267px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.33px 1.33px at 364px 228px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.55px 1.55px at 228px 627px,rgba(255,255,255,.95),rgba(0,0,0,0));
  opacity:.42; animation:drift2 420s linear infinite;
}
#sky .s3{
  background-size:900px 900px;
  background-image:
    radial-gradient(2.12px 2.12px at 825px 245px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.79px 1.79px at 204px 530px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.58px 1.58px at 28px 809px,rgba(255,157,180,.9),rgba(0,0,0,0)),
    radial-gradient(1.91px 1.91px at 198px 709px,rgba(255,157,180,.9),rgba(0,0,0,0)),
    radial-gradient(2.24px 2.24px at 457px 827px,rgba(255,157,180,.9),rgba(0,0,0,0)),
    radial-gradient(1.52px 1.52px at 373px 82px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.64px 1.64px at 481px 201px,rgba(177,156,255,.95),rgba(0,0,0,0)),
    radial-gradient(2.14px 2.14px at 639px 624px,rgba(177,156,255,.95),rgba(0,0,0,0)),
    radial-gradient(2.1px 2.1px at 668px 352px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.42px 1.42px at 854px 676px,rgba(177,156,255,.95),rgba(0,0,0,0)),
    radial-gradient(2.05px 2.05px at 801px 728px,rgba(177,156,255,.95),rgba(0,0,0,0)),
    radial-gradient(2.09px 2.09px at 182px 444px,rgba(255,157,180,.9),rgba(0,0,0,0)),
    radial-gradient(2.25px 2.25px at 88px 820px,rgba(177,156,255,.95),rgba(0,0,0,0)),
    radial-gradient(2.04px 2.04px at 474px 411px,rgba(255,255,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.47px 1.47px at 742px 162px,rgba(77,235,255,.95),rgba(0,0,0,0)),
    radial-gradient(1.89px 1.89px at 28px 154px,rgba(177,156,255,.95),rgba(0,0,0,0));
  opacity:.5; animation:drift3 640s linear infinite;
}
@keyframes drift1{to{transform:translate3d(-420px,210px,0)}}
@keyframes drift2{to{transform:translate3d(-640px,-320px,0)}}
@keyframes drift3{to{transform:translate3d(900px,450px,0)}}

/* twinkle: a slow opacity breath on the middle layer only, so it reads as
   depth rather than as flicker */
@keyframes breathe{0%,100%{opacity:.28}50%{opacity:.55}}
#sky .s2{animation:drift2 420s linear infinite, breathe 9s ease-in-out infinite}

/* shooting stars */
#sky b{position:absolute;display:block;width:160px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));
  opacity:0;filter:drop-shadow(0 0 6px rgba(77,235,255,.9));
  animation:shoot var(--d) linear infinite;animation-delay:var(--dl)}
#sky b::after{content:"";position:absolute;right:-2px;top:-2px;width:6px;height:6px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px 2px rgba(77,235,255,.8)}
@keyframes shoot{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(18deg)}
  2%{opacity:1}
  12%{opacity:1}
  16%,100%{opacity:0;transform:translate3d(62vw,22vw,0) rotate(18deg)}
}

@media(prefers-reduced-motion:reduce){
  #sky i,#sky b{animation:none!important}
  #sky b{opacity:0}
}