/* Night stars for the PetPal page, night only. They sit in the empty space above the logo and in the strip under the nav. */
html.neon body{position:relative;}
html.neon body::after{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;z-index:1;pointer-events:none;background:transparent;box-shadow:calc(100vw - 1227px) 98px 0px 0px rgba(214,200,255,0.66),calc(100vw - 197px) 290px 0px 0px rgba(255,255,255,0.58),calc(100vw - 42px) 283px 0px 0px rgba(255,255,255,0.90),calc(100vw - 305px) 113px 0px 0px rgba(214,200,255,0.62),calc(100vw - 71px) 189px 0px 0px rgba(200,245,255,0.85),calc(100vw - 126px) 155px 0px 0px rgba(255,255,255,0.73),calc(100vw - 826px) 106px 0px 0px rgba(255,255,255,0.98),calc(100vw - 602px) 216px 0px 0px rgba(200,245,255,0.95),calc(100vw - 362px) 125px 0px 0px rgba(255,230,180,0.78);animation:bgTwA 5.5s ease-in-out infinite;}
html.neon main#levelsRoot{position:relative;}
@keyframes bgTwA{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes bgTwB{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes bgTwD{0%,100%{opacity:.55}50%{opacity:1}}
html.neon body::before{content:"";position:absolute;left:0;right:0;top:0;height:700px;z-index:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.5'/%3E%3Cstop offset='.35' stop-color='rgb(255,255,255)' stop-opacity='.15'/%3E%3Cstop offset='1' stop-color='rgb(255,255,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Cpath d='M20 1.5Q21.6 18.4 38.5 20Q21.6 21.6 20 38.5Q18.4 21.6 1.5 20Q18.4 18.4 20 1.5Z' fill='rgb(255,255,255)'/%3E%3Ccircle cx='20' cy='20' r='2.2' fill='%23fff'/%3E%3C/svg%3E") calc(100vw - 406.5px) 168.5px/13px 13px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(255,232,180)' stop-opacity='.5'/%3E%3Cstop offset='.35' stop-color='rgb(255,232,180)' stop-opacity='.15'/%3E%3Cstop offset='1' stop-color='rgb(255,232,180)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Cpath d='M20 1.5Q21.6 18.4 38.5 20Q21.6 21.6 20 38.5Q18.4 21.6 1.5 20Q18.4 18.4 20 1.5Z' fill='rgb(255,232,180)'/%3E%3Ccircle cx='20' cy='20' r='2.2' fill='%23fff'/%3E%3C/svg%3E") calc(100vw - 214.5px) 125.5px/9px 9px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='rgb(214,200,255)' stop-opacity='.5'/%3E%3Cstop offset='.35' stop-color='rgb(214,200,255)' stop-opacity='.15'/%3E%3Cstop offset='1' stop-color='rgb(214,200,255)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Cpath d='M20 1.5Q21.6 18.4 38.5 20Q21.6 21.6 20 38.5Q18.4 21.6 1.5 20Q18.4 18.4 20 1.5Z' fill='rgb(214,200,255)'/%3E%3Ccircle cx='20' cy='20' r='2.2' fill='%23fff'/%3E%3C/svg%3E") calc(100vw - 564.0px) 251.0px/8px 8px no-repeat;animation:bgTwD 6s ease-in-out infinite;}
html.neon main#levelsRoot::before{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;z-index:1;pointer-events:none;box-shadow:calc(100vw - 531px) -45px 0px 0px rgba(255,255,255,0.97),calc(100vw - 308px) 130px 0px 0px rgba(255,255,255,0.62),calc(100vw - 461px) 68px 0px 0px rgba(200,245,255,0.75),calc(100vw - 390px) 85px 0px 0px rgba(255,230,180,0.90),calc(100vw - 678px) 39px 0px 0px rgba(255,230,180,0.58),calc(100vw - 581px) 152px 0px 0px rgba(214,200,255,0.57);animation:bgTwB 3.8s ease-in-out infinite;}
@media (max-width:1200px){html.neon body::after,html.neon body::before,html.neon main#levelsRoot::before{display:none;}}
@media (prefers-reduced-motion:reduce){html.neon body::after,html.neon body::before,html.neon main#levelsRoot::before{animation:none;}}
/* Soft edge where the last chapter (card colour) meets the dark closing scene, instead of a hard line. The strip sits on the top
   of the scene and fades from the chapter colour to nothing. It scrolls away with the top of the section once the scene is pinned. */
html.neon .closing-transition::before{content:"";position:absolute;left:0;right:0;top:0;height:220px;z-index:8;pointer-events:none;
  background:linear-gradient(180deg,#12132a 0%,rgba(18,19,42,.78) 22%,rgba(18,19,42,.45) 48%,rgba(18,19,42,.18) 75%,rgba(18,19,42,0) 100%);}