wagtail/client/scss/components/_logo.scss

@keyframes tail-wag {
  from {
    transform: rotate(-3deg);
  }

  to {
    transform: rotate(7deg);
  }
}

.logo {
  display: flex;
  align-items: center;
  padding: 0.6em 1.2em;
  color: #aaa;
  -webkit-font-smoothing: auto;
  position: relative;

  &:hover {
    color: $color-white;
  }

  @include media-breakpoint-up(sm) {
    display: block;
    margin: 2em auto;
    text-align: center;
  }
}

.wagtail-logo-container__mobile {
  margin-inline-end: 10px;
  background-color: #555;
  border-radius: 50%;
  padding: 5px 7.5px;

  .wagtail-logo {
    width: 20px;
    float: left;
    border: 0;
  }
}

.wagtail-logo-container__desktop {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #555;
  border-radius: 50%;
  margin: 0 auto;
  transition: all 0.25s cubic-bezier(0.28, 0.15, 0, 2.1);

  .page404__bg & {
    background-color: transparent;
  }

  .wagtail-logo-container-inner {
    width: 52px;
    height: 100px;
    margin: auto;
    position: relative;

    .page404__bg & {
      width: auto;
      height: auto;
      position: static;
    }
  }

  .wagtail-logo {
    display: block;
    // Remove once we drop support for Safari 13.
    // stylelint-disable-next-line property-disallowed-list
    left: 0;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: inherit;

    &.wagtail-logo__eye--open {
      // stylelint-disable-next-line declaration-no-important
      display: inline !important; // doesn't work without `!important`, likely a specificity issue
    }

    &.wagtail-logo__eye--closed {
      // stylelint-disable-next-line declaration-no-important
      display: none !important;
    }
  }

  // Wagtail 'serious' animation (nod):
  &.logo-serious {
    &:hover {
      transform: rotate(4deg);
    }
  }

  // Wagtail 'playful' animation (tail-wag, triggered by JS in base.html):
  &.logo-playful {
    &:hover {
      transform: rotate(8deg);
      transition: transform 1.2s ease;

      .wagtail-logo {
        // stylelint-disable max-nesting-depth
        &.wagtail-logo__tail {
          animation: tail-wag 0.09s alternate;
          animation-iteration-count: infinite;
        }

        &.wagtail-logo__eye--open {
          // stylelint-disable-next-line declaration-no-important
          display: none !important;
        }

        &.wagtail-logo__eye--closed {
          // stylelint-disable-next-line declaration-no-important
          display: inline !important;
        }
      }
    }
  }
}

// Media for Windows High Contrast mode

@media (forced-colors: $media-forced-colours) {
  .wagtail-logo-container__desktop {
    background-color: $system-color-link-text;
  }
}