.logo-container{
  animation: logoGlow 5.5s ease-in-out infinite;
}
@keyframes logoGlow{
  0%,100%{
    filter:
      drop-shadow(0 18px 40px rgba(0,0,0,.45))
      drop-shadow(0 0 16px rgba(88,161,255,.35));
  }
  50%{
    filter:
      drop-shadow(0 18px 40px rgba(0,0,0,.45))
      drop-shadow(0 0 28px rgba(88,161,255,.6));
  }
}

.tagline{
  opacity: 0;
  transform: translateY(8px);
  animation: fadeInUp .8s ease .3s forwards;
}

@keyframes fadeInUp{
  to{
    opacity: 1;
    transform: none;
  }
}

.arrow::after{
  animation: bob 1.4s ease-in-out infinite;
}


@keyframes bob{
  0%,100%{
    transform: translate(-50%,0) rotate(-45deg);
  }
  50%{
    transform: translate(-50%,6px) rotate(-45deg);
  }
}


.lightbox img{
  transform: scale(.985);
  opacity: .001;
  will-change: transform, opacity;
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    opacity  .35s cubic-bezier(.22,1,.36,1);
}


.lightbox.open img{
  transform: none;
  opacity: 1;
}


#hero-lightbox figure{
  position: relative;
}

#hero-lb-ghost-img,
#hero-lb-ghost-cap{
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
} 

#hero-lb-ghost-img{
  top: 0;
}

#hero-lb-ghost-cap{
  bottom: 0;
  text-align: center;
}


#card-lightbox .spotlight-item.panel{
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform, opacity;
}


.card-dots .card-dot{
  transform: scale(.85);
  opacity: .7;
  transition:
    transform .25s cubic-bezier(.22,1,.36,1),
    background-color .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;
}

.card-dots .card-dot:hover{
  transform: scale(.95);
  opacity: .9;
}

.card-dots .card-dot.is-active,
.card-dots .card-dot[aria-current="true"]{
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(122,170,255,.18);
}