/* Interactive brand heart. Sign-in intentionally uses the unadorned SVG. */
.vx-heart-logo {
  position: relative;
  color: #d4a55a;
  isolation: isolate;
  overflow: visible;
}

.vx-heart-logo--mobile {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.vx-heart-logo::before,
.vx-heart-logo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
}

.vx-heart-logo--wordmark::before,
.vx-heart-logo--wordmark::after {
  left: 12px;
}

.vx-heart-logo--admin::before,
.vx-heart-logo--admin::after {
  left: 20px;
}

.vx-heart-logo::before {
  box-shadow:
    -7px -6px currentColor,
    0 -8px currentColor,
    7px -6px currentColor,
    8px 3px currentColor,
    4px 8px currentColor,
    -6px 7px currentColor;
}

.vx-heart-logo::after {
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  box-shadow:
    -9px 1px currentColor,
    -5px -8px currentColor,
    5px -8px currentColor,
    9px -1px currentColor,
    0 10px currentColor;
}

.vx-heart-logo:hover .vx-heart-core,
.vx-heart-logo:hover > svg {
  animation: vx-heart-logo-glow 1100ms ease-out both;
}

.vx-heart-logo:hover::before {
  animation: vx-heart-logo-radiate-a 1250ms cubic-bezier(0.18, 0.72, 0.26, 1) both;
}

.vx-heart-logo:hover::after {
  animation: vx-heart-logo-radiate-b 1250ms cubic-bezier(0.18, 0.72, 0.26, 1) 90ms both;
}

@keyframes vx-heart-logo-glow {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(212, 165, 90, 0));
  }
  42% {
    transform: scale(1.1);
    filter:
      drop-shadow(0 0 12px rgba(255, 210, 112, 1))
      drop-shadow(0 0 22px rgba(212, 165, 90, 0.65));
  }
  100% {
    transform: scale(1.05);
    filter:
      drop-shadow(0 0 8px rgba(255, 210, 112, 0.9))
      drop-shadow(0 0 14px rgba(212, 165, 90, 0.45));
  }
}

@keyframes vx-heart-logo-radiate-a {
  0% { opacity: 0; }
  18% { opacity: 0.95; }
  52% { opacity: 0.7; }
  100% {
    opacity: 0;
    box-shadow:
      -27px -23px currentColor,
      0 -34px currentColor,
      27px -23px currentColor,
      34px 9px currentColor,
      17px 31px currentColor,
      -24px 27px currentColor;
  }
}

@keyframes vx-heart-logo-radiate-b {
  0% { opacity: 0; }
  18% { opacity: 0.9; }
  52% { opacity: 0.6; }
  100% {
    opacity: 0;
    box-shadow:
      -35px 3px currentColor,
      -19px -31px currentColor,
      20px -32px currentColor,
      36px -4px currentColor,
      0 36px currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vx-heart-logo:hover .vx-heart-core,
  .vx-heart-logo:hover > svg {
    animation: none;
    filter:
      drop-shadow(0 0 8px rgba(255, 210, 112, 0.9))
      drop-shadow(0 0 14px rgba(212, 165, 90, 0.45));
  }

  .vx-heart-logo:hover::before,
  .vx-heart-logo:hover::after {
    animation: none;
  }
}