/* Version 2: a walking lion trail and a floating South Africa seal. */
.hbt-site #hbt-intro { position: relative; isolation: isolate; }
.hbt-site #hbt-intro .hbt-intro-copy,
.hbt-site #hbt-intro .hbt-immersive-collage { position: relative; z-index: 1; }
.hbt-site #hbt-intro .hbt-lion-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #272726;
  fill: currentColor;
  stroke: none;
  pointer-events: none;
  z-index: 0;
}
.hbt-lion-step { opacity: 0; transition: opacity 180ms linear; }
.hbt-lion-step.hbt-step-live { opacity: var(--hbt-track-ink, .48); }
.hbt-lion-step.hbt-step-landing {
  animation: hbt-paw-land 360ms ease-out both;
  animation-play-state: paused;
}
.hbt-lion-trail[data-trail-state="walking"] .hbt-step-landing { animation-play-state: running; }
@keyframes hbt-paw-land {
  0%, 52% { opacity: 0; }
  100% { opacity: var(--hbt-track-ink, .48); }
}
.hbt-site #hbt-intro .hbt-collage-seal {
  width: 144px;
  height: 144px;
  right: 0;
  bottom: 25px;
  gap: 9px;
  z-index: 6;
  border: 2px solid #ddba83;
  background: radial-gradient(circle at 30% 20%, #2c6655, #103e35 72%);
  color: #ffe4b8;
  box-shadow: 0 15px 35px #102d3638, 0 0 0 6px #fff9efdb, 0 0 0 7px #c9a97566;
  animation: hbt-seal-float 6s ease-in-out infinite;
  animation-play-state: paused;
  will-change: transform;
}
.hbt-site #hbt-intro.hbt-details-in-view .hbt-collage-seal { animation-play-state: running; }
.hbt-site #hbt-intro .hbt-collage-seal::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed #f2d3a65e;
  border-radius: 50%;
  pointer-events: none;
}
.hbt-site #hbt-intro .hbt-collage-seal b { font-size: 29px; line-height: 1.02; }
.hbt-site #hbt-intro .hbt-collage-seal span { font-size: 8px; letter-spacing: .15em; }
@keyframes hbt-seal-float {
  0%, 100% { transform: translateY(0) rotate(7deg); }
  50% { transform: translateY(-9px) rotate(4deg); }
}
@media (max-width: 1000px) {
  .hbt-site #hbt-intro .hbt-collage-seal { width: 115px; height: 115px; bottom: 17px; gap: 7px; }
  .hbt-site #hbt-intro .hbt-collage-seal b { font-size: 24px; }
  .hbt-site #hbt-intro .hbt-collage-seal span { font-size: 6.5px; }
}
@media (max-width: 700px) {
  .hbt-site #hbt-intro .hbt-collage-seal { width: 108px; height: 108px; right: 3px; bottom: 19px; }
  .hbt-site #hbt-intro .hbt-collage-seal b { font-size: 23px; }
  .hbt-site #hbt-intro .hbt-collage-seal span { font-size: 6px; }
}
@media (max-width: 360px) {
  .hbt-site #hbt-intro .hbt-collage-seal { width: 96px; height: 96px; gap: 6px; }
  .hbt-site #hbt-intro .hbt-collage-seal b { font-size: 21px; }
  .hbt-site #hbt-intro .hbt-collage-seal span { font-size: 5.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hbt-lion-step { transition: none; animation: none; }
  .hbt-site #hbt-intro .hbt-collage-seal { animation: none; transform: rotate(7deg); will-change: auto; }
}
.hbt-capture .hbt-site #hbt-intro .hbt-collage-seal { animation: none; transform: rotate(7deg); }
@media print {
  .hbt-lion-trail { display: none; }
  .hbt-site #hbt-intro .hbt-collage-seal { animation: none; }
}