/* Custom entrance + press animation for the new logo image.
   Replaces the old logo's vector wipe/morph (which was hard-coded to that
   specific path geometry and can't run on an arbitrary raster logo). */
.logo__mark img {
  transition: transform 150ms cubic-bezier(0.5, 0, 0.4, 1);
  transform-origin: 50% 50%;
  will-change: transform, clip-path;
  aspect-ratio: 576 / 602;
}

.logo__mark img.logo-fx-enter {
  animation: logo-fx-wipe 640ms cubic-bezier(0.5, 0, 0.4, 1) both;
}

@keyframes logo-fx-wipe {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transform: scale(0.92);
  }
  60% {
    opacity: 1;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: scale(1);
  }
}

.logo__mark:hover img {
  transform: scale(1.08) rotate(-3deg);
}

.logo__mark.logo-fx-pressed img {
  transform: scale(0.86) rotate(2deg);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  .logo__mark img.logo-fx-enter {
    animation: none;
  }
  .logo__mark:hover img,
  .logo__mark.logo-fx-pressed img {
    transform: none;
  }
}