/* Northern Lights — page titles whose letters are a window onto a running aurora night sky.
   Markup: <div class="nl-wm"><div class="nl-wm-sky" aria-hidden="true">…stars + bands…</div><h1 class="nl-wm-mask">Title</h1></div> */
.nl-wm{position:relative;isolation:isolate}
.nl-wm-sky{position:absolute;inset:0;overflow:hidden;background:#01030A}
.nl-wm-mask{position:relative;margin:0;background:#FFFFFF;color:#000000;mix-blend-mode:screen;padding-bottom:0.14em}
.nl-st{position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%}
.nl-st.a{box-shadow:926px 86px 0 0 rgba(238,244,255,.9),953px 131px 0 0 rgba(238,244,255,.9),1202px 97px 0 1px rgba(238,244,255,.9),1048px 43px 0 0 rgba(238,244,255,.9),381px 48px 0 0 rgba(238,244,255,.9),290px 46px 0 0 rgba(238,244,255,.9),1299px 21px 0 0 rgba(238,244,255,.9),811px 131px 0 0 rgba(238,244,255,.9),1260px 132px 0 1px rgba(238,244,255,.9),30px 70px 0 1px rgba(238,244,255,.9),73px 97px 0 0 rgba(238,244,255,.9),668px 25px 0 0 rgba(238,244,255,.9),400px 65px 0 1px rgba(238,244,255,.9),602px 55px 0 1px rgba(238,244,255,.9),174px 34px 0 0 rgba(238,244,255,.9),833px 82px 0 0 rgba(238,244,255,.9),470px 112px 0 0 rgba(238,244,255,.9),143px 128px 0 0 rgba(238,244,255,.9),820px 55px 0 0 rgba(238,244,255,.9),791px 34px 0 0 rgba(238,244,255,.9),107px 140px 0 0 rgba(238,244,255,.9),552px 132px 0 1px rgba(238,244,255,.9),241px 68px 0 1px rgba(238,244,255,.9),206px 5px 0 1px rgba(238,244,255,.9),997px 90px 0 0 rgba(238,244,255,.9),385px 129px 0 0 rgba(238,244,255,.9),1213px 155px 0 0 rgba(238,244,255,.9),40px 107px 0 1px rgba(238,244,255,.9),673px 151px 0 0 rgba(238,244,255,.9),1303px 124px 0 1px rgba(238,244,255,.9),1176px 69px 0 0 rgba(238,244,255,.9),863px 24px 0 1px rgba(238,244,255,.9),526px 15px 0 0 rgba(238,244,255,.9),1246px 36px 0 1px rgba(238,244,255,.9);animation:nl-twinkle 3.8s ease-in-out infinite alternate}
.nl-st.b{box-shadow:347px 75px 0 0 rgba(238,244,255,.55),905px 55px 0 0 rgba(238,244,255,.55),669px 107px 0 0 rgba(238,244,255,.55),406px 24px 0 0 rgba(238,244,255,.55),1194px 62px 0 0 rgba(238,244,255,.55),275px 154px 0 0 rgba(238,244,255,.55),83px 64px 0 0 rgba(238,244,255,.55),566px 86px 0 0 rgba(238,244,255,.55),965px 140px 0 0 rgba(238,244,255,.55),1279px 81px 0 0 rgba(238,244,255,.55),64px 142px 0 0 rgba(238,244,255,.55),545px 121px 0 0 rgba(238,244,255,.55),223px 22px 0 0 rgba(238,244,255,.55),708px 76px 0 0 rgba(238,244,255,.55),458px 44px 0 0 rgba(238,244,255,.55),1097px 58px 0 0 rgba(238,244,255,.55),1009px 115px 0 0 rgba(238,244,255,.55),32px 18px 0 0 rgba(238,244,255,.55);animation:nl-twinkle 5.2s ease-in-out 1.2s infinite alternate-reverse}
.nl-bd{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.nl-bd.g{filter:blur(26px)}
.nl-bd.r{filter:blur(3px);opacity:.7;-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 3px,rgba(0,0,0,.45) 3px 9px,#000 9px 11px,rgba(0,0,0,.3) 11px 23px);mask-image:repeating-linear-gradient(90deg,#000 0 3px,rgba(0,0,0,.45) 3px 9px,#000 9px 11px,rgba(0,0,0,.3) 11px 23px)}
/* curtains travel diagonally from bottom-left (SW) to top-right (NE), fading in and out; staggered so the letters are never empty */
.nl-bd1{left:5%;width:85%;top:-30%;height:155%;background:linear-gradient(to top,rgba(150,255,200,0) 0%,rgba(90,255,170,.8) 16%,rgba(70,230,220,.5) 40%,rgba(175,110,255,.35) 70%,rgba(190,110,255,0) 100%);animation:nl-diag 32s linear infinite}
.nl-bd2{left:15%;width:80%;top:-40%;height:140%;background:linear-gradient(to top,rgba(150,255,200,0) 0%,rgba(70,230,220,.6) 18%,rgba(60,120,255,.45) 48%,rgba(160,90,255,.4) 74%,rgba(190,110,255,0) 100%);animation:nl-diag 32s linear -10.7s infinite}
.nl-bd3{left:10%;width:70%;top:-10%;height:125%;background:linear-gradient(to top,rgba(150,255,200,0) 0%,rgba(90,255,170,.55) 18%,rgba(140,100,255,.32) 60%,rgba(190,110,255,0) 100%);animation:nl-diag 32s linear -21.3s infinite}
.nl-bd4{left:-30%;width:80%;top:-55%;height:130%;background:linear-gradient(to top,rgba(150,255,200,0) 0%,rgba(90,255,170,.75) 20%,rgba(70,230,220,.5) 45%,rgba(175,110,255,.38) 72%,rgba(190,110,255,0) 100%);animation:nl-diag 32s linear -16s infinite}
@keyframes nl-diag{0%{opacity:0;transform:translate(-55%,28%) skewY(-10deg) skewX(-18deg)}18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translate(55%,-28%) skewY(-10deg) skewX(-18deg)}}
@keyframes nl-twinkle{from{opacity:.3}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.nl-bd1,.nl-bd2,.nl-bd3,.nl-bd4{animation-duration:90s}.nl-st{animation:none}}
