.lds-ripple {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #000000;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 6px;
    left: 6px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 6px;
    left: 6px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 6px;
    left: 6px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 12px;
    height: 12px;
    opacity: 0;
  }
}





.lightbox.-opening .lightbox_bg {
    animation: inkFill 2s steps(24) forwards;
  }
  .lightbox.-closing .lightbox_bg {
    animation: inkFill-reverse 1s steps(24) forwards;
  }


  .lightbox {
    position: fixed;
    top: 0;
    left: 0;
    /* Was z-index: 2 — but .lightbox creates a stacking context here, which
       TRAPPED its .upgradeFrame children (z:9999 inside) at effective page z=2,
       BELOW #v2-topbar (z:1000). Users saw the topbar text ("Urbexology.com",
       Discord chip, ☰) rendering ON TOP of proModal/antiDumbModal.
       Bump to 1002 (matches the duplicate rule in style.css:1365 so the two
       stay in sync). Duplicate rule left in style.css — both are needed
       since the two rules define different properties. */
    z-index: 1002;
    height: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
  }
  .lightbox.-visible {
    opacity: 1;
    visibility: visible;
  }
  
  .lightbox_bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-2%, -50%, 0);
    /* Dimensions overwritten by JavaScript to proportionally fit viewport */
    height: 100%;
    /* Sprite png is composed of 25 frames */
    width: 2500%;
  /* Image is included in data-uri base 64 at bottom of the CSS */
  /*   background-image: url(../img/ink.png); */
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    opacity: 0.9;
  }

  
  
  @keyframes inkFill {
    0% {
      /* translateX(-2%) is used to horizontally center the first frame inside the viewport ??? */
      transform: translate3d(-2%, -50%, 0);
      opacity: 0.9;
    }
    100% {
      /* translateX(-98%) (2% + 96%) is used to horizontally center the last frame inside the viewport  */
      transform: translate3d(-98%, -50%, 0);
      opacity: .9;
    }
  }
  
  @keyframes inkFill-reverse {
    0% {transform: translate3d(-98%, -50%, 0);}
    100% {transform: translate3d(-2%, -50%, 0);}
  }






    
  /* Ink sprite (imgs/ink.png) is only fetched when the lightbox
     actually opens — most users never trigger the pro-upgrade modal.
     background-image is on the -opening/-visible/-closing states so
     the browser lazy-fetches on first activation. */
  .lightbox.-opening .lightbox_bg,
  .lightbox.-visible .lightbox_bg,
  .lightbox.-closing .lightbox_bg {
      background-image: url('imgs/ink.png');
  }