@media (prefers-reduced-motion: no-preference) {
  body > header .brand {
    position: relative;
  }

  body > header .brand::after {
    content: "";
    position: absolute;
    inset: 3px 0;
    background: url("./burj-khalifa.svg") center / auto 100% no-repeat;
    pointer-events: none;
    opacity: 0;
    animation: wh-burj-fade 8s ease-in-out infinite;
  }

  body > header .brand img.logo {
    animation: wh-logo-fade 8s ease-in-out infinite;
  }

  body > header .brand:hover img.logo,
  body > header .brand:focus-visible img.logo,
  body > header .brand:hover::after,
  body > header .brand:focus-visible::after {
    animation: none;
  }

  @keyframes wh-logo-fade {
    0%, 45%, 100% {
      opacity: 1;
    }

    65%, 75% {
      opacity: 0;
    }
  }

  @keyframes wh-burj-fade {
    0%, 45%, 100% {
      opacity: 0;
      transform: perspective(240px) rotateY(-18deg) scale(.93);
    }

    65%, 75% {
      opacity: 1;
      transform: perspective(240px) rotateY(10deg);
    }
  }
}

.wh-home-mascot {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero > .wh-home-mascot {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    display: block;
    height: clamp(74px, 9vw, 108px);
    overflow: hidden;
    pointer-events: none;
    direction: ltr;
  }

  .wh-home-mascot-track {
    position: absolute;
    left: 100%;
    bottom: 5px;
    width: max-content;
    animation: wh-home-mascot-pass 24s linear infinite;
  }

  .wh-home-mascot-track img {
    display: block;
    width: clamp(68px, 8.5vw, 100px);
    height: auto;
  }

  @media (max-width: 720px) {
    .wh-home-mascot-track {
      animation-duration: 12s;
    }
  }

  @keyframes wh-home-mascot-pass {
    0% { transform: translateX(0); }
    85%, 100% { transform: translateX(calc(-100vw - 100%)); }
  }

}