.brenner-click-walker {
  --brenner-walk-duration: 6.5s;
  /* Same size as the chat launcher's Brenner (bogz.io widget/core.js:
     .launcher.img is 140px tall, 104px at <= 560px). The walk frames'
     character fills 96.9% of the frame height, so the box is scaled up by
     that much to make the two characters the same height. */
  --brenner-launcher-h: 140px;
  position: fixed;
  top: var(--brenner-lane-top, 8px);
  left: 0;
  z-index: 2147483000;
  display: block;
  height: calc(var(--brenner-launcher-h) / 0.969);
  aspect-ratio: 35 / 64;
  pointer-events: none;
  opacity: 0;
  contain: layout paint;
  will-change: transform;
  filter: drop-shadow(0 6px 16px rgb(0 0 0 / 0.35));
}

/* `hidden` must win over display:block above, or the off-screen GIF keeps
   decoding frames on every page while invisible. display:none also pauses it. */
.brenner-click-walker[hidden] {
  display: none;
}

.brenner-click-walker picture,
.brenner-click-walker img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brenner-click-walker[data-direction="right"] picture {
  transform: scaleX(-1);
}

.brenner-click-walker.is-walking[data-direction="left"] {
  animation: brenner-cross-left var(--brenner-walk-duration) linear both;
}

.brenner-click-walker.is-walking[data-direction="right"] {
  animation: brenner-cross-right var(--brenner-walk-duration) linear both;
}

.brenner-click-walker.is-resting {
  left: var(--brenner-rest-left, 8px);
  opacity: 1;
  transform: none;
}

/* Load-time entrance: in from the left edge to --brenner-enter-x (the
   launcher's spot). On arrival the JS hides him and reveals the launcher in
   the same frame, so there is no fade here. */
.brenner-click-walker.is-entering {
  opacity: 1;
  animation: brenner-enter var(--brenner-walk-duration) linear both;
}

/* The concierge launcher stays out of sight until he has walked into its
   place. The widget renders inside a closed shadow root, but visibility is
   inherited across the shadow boundary from its host. */
html.brenner-entering [data-shop-concierge] {
  visibility: hidden !important;
}

@keyframes brenner-cross-left {
  from {
    opacity: 1;
    transform: translate3d(100vw, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes brenner-cross-right {
  from {
    opacity: 1;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(100vw, 0, 0);
  }
}

@keyframes brenner-enter {
  from {
    transform: translate3d(var(--brenner-start-x, -100%), 0, 0);
  }
  to {
    transform: translate3d(var(--brenner-enter-x, 0px), 0, 0);
  }
}

@media (max-width: 560px) {
  .brenner-click-walker {
    --brenner-launcher-h: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brenner-click-walker {
    animation: none !important;
    will-change: auto;
  }
}