/* ==========================================================================
   WF Logo with hover spin — smooth, with subtle axis tilt
   Drop-in replacement for Salient's PNG logo
   ========================================================================== */

/* Hide the existing PNG logo images that Salient outputs */
#header-outer #logo img,
#header-outer .starting-logo,
#header-outer .dark-version,
#header-outer .mobile-logo {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Make the logo container a positioning context with 3D perspective */
#header-outer #logo,
#header-outer .brand_container {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  perspective: 1000px;
}

/* The injected SVG sits on top of the (now invisible) PNG */
.wf-logo-svg {
  position: absolute;
  top: 50%;
  left: 0;
  width: auto;
  height: 40px;
  color: #3BBFFF;
  transform: translate3d(0, -50%, 0);
  transform-style: preserve-3d;
  cursor: pointer;
  pointer-events: auto;
}

/* Spin once on hover — Y-axis flip with a subtle tilt at the midpoint */
#header-outer #logo:hover .wf-logo-svg,
#header-outer .brand_container:hover .wf-logo-svg {
  animation: wf-spin 1s ease-out;
  will-change: transform;
}

@keyframes wf-spin {
  0%   { transform: translate3d(0, -50%, 0) rotateY(0deg)   rotateZ(0deg); }
  50%  { transform: translate3d(0, -50%, 0) rotateY(180deg) rotateZ(5deg); }
  100% { transform: translate3d(0, -50%, 0) rotateY(360deg) rotateZ(0deg); }
}

/* Slightly smaller on mobile */
@media (max-width: 768px) {
  .wf-logo-svg { height: 32px; }
}