/* =========================================
   8FLiX header logo: whole-logo animation
   Works on Astra's existing <img> logo
   ========================================= */

.site-logo-img a.custom-logo-link{
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.site-logo-img img.custom-logo.astra-logo-svg{
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
  transform-origin: center;
  will-change: transform, filter, opacity;
  animation: efxLogoWholeBob 3.2s ease-in-out infinite;
  transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
}

@media (max-width: 1024px){
  .site-logo-img img.custom-logo.astra-logo-svg{
    height: 38px;
  }
}

@media (max-width: 640px){
  .site-logo-img img.custom-logo.astra-logo-svg{
    height: 32px;
  }
}

/* Hover gives it a little extra life */
.site-logo-img a.custom-logo-link:hover img.custom-logo.astra-logo-svg{
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 0 8px rgba(255,106,0,.20));
}

/* Main motion */
@keyframes efxLogoWholeBob{
  0%, 100%{
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(255,106,0,0));
  }
  25%{
    transform: translateY(-1px) scale(1.01);
    opacity: 1;
  }
  50%{
    transform: translateY(-2px) scale(1.02);
    opacity: .98;
    filter: drop-shadow(0 0 6px rgba(255,106,0,.16));
  }
  75%{
    transform: translateY(-1px) scale(1.01);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-logo-img img.custom-logo.astra-logo-svg{
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}