/* Reusable BuZz NOLA bee: automatic motion, or static artwork with opt-in. */
.hero > .buzz-bee-lane {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Above the background and watermark, below hero content. */
  z-index: 3;
}
.hero > .buzz-bee-lane > .buzz-bee-rider {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 340px;
  /* Holds the ENTIRE image outside the left edge before the first pass. */
  transform: translate3d(-100%, 0, 0);
  /* Second pass overrides the first only when its 34.25s delay has elapsed.
     Forward fill holds the first offscreen during the 25s gap, and keeps the
     second offscreen permanently after it ends. Neither animation loops. */
  animation-name: buzz-bee-first-pass, buzz-bee-second-pass;
  animation-duration: 8s, 8s;
  animation-delay: 1.25s, 34.25s;
  animation-timing-function: linear, linear;
  animation-iteration-count: 1, 1;
  animation-fill-mode: forwards, forwards;
}
.hero > .buzz-bee-lane > .buzz-bee-rider > img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes buzz-bee-first-pass {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: translate3d(100vw, 0, 0); }
}
@keyframes buzz-bee-second-pass {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: translate3d(100vw, 0, 0); }
}
@media (max-width: 1023px) {
  .hero > .buzz-bee-lane > .buzz-bee-rider { width: 270px; }
}
@media (max-width: 599px) {
  .hero > .buzz-bee-lane > .buzz-bee-rider { width: 210px; }
}

/* Outside the decorative aria-hidden lane so the button remains accessible. */
.hero > .buzz-bee-controls {
  display: none;
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
}
.buzz-bee-play {
  padding: 8px 12px;
  border: 1px solid #111;
  border-radius: 6px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.buzz-bee-play:focus-visible {
  outline: 3px solid #ffd147;
  outline-offset: 3px;
}
.buzz-bee-play:disabled { cursor: default; }
.buzz-bee-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
@media (prefers-reduced-motion: reduce) {
  /* Artwork remains visible and stationary by default. */
  .hero > .buzz-bee-lane > .buzz-bee-rider {
    animation: none;
    transform: translate3d(12px, 0, 0);
  }
  /* Reserve space beneath hero content so the control cannot cover a CTA. */
  .hero.buzz-bee-controls-ready { padding-bottom: 52px; }
  /* Show the control only after its small external script is ready. */
  .hero.buzz-bee-controls-ready > .buzz-bee-controls { display: block; }
  /* Only an explicit button press permits travel in reduced-motion mode. */
  .hero.buzz-bee-opt-in > .buzz-bee-lane > .buzz-bee-rider {
    transform: translate3d(-100%, 0, 0);
    animation: buzz-bee-first-pass 8s linear 1.25s 1 forwards,
               buzz-bee-second-pass 8s linear 34.25s 1 forwards;
  }
}
/* Ending or stopping the sequence cannot create additional passes. */
.hero.buzz-bee-terminal > .buzz-bee-lane > .buzz-bee-rider {
  animation: none;
  transform: translate3d(100vw, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .hero.buzz-bee-terminal > .buzz-bee-lane > .buzz-bee-rider {
    transform: translate3d(12px, 0, 0);
  }
}

/* Shared stacking on every hero that explicitly opts into the bee animation.
   This changes only paint order. The rider retains bottom: 0 above. */
.hero.buzz-bee-hero > .hero-content {
  z-index: 4;
}
.hero.buzz-bee-hero > .buzz-bee-controls {
  z-index: 5;
}