/* LiveVoice looping logo animation, shared by the hero banner and the
   thumbnail contexts. The icon and wordmark are split into two
   independently-positioned pieces (not one flat image) so the icon can
   slide between its "docked" position (part of the lockup, states
   1-3) and "centered alone" position (state 4, symbol only) while the
   wordmark just fades in/out around it. Percentages below are the
   icon/wordmark's exact bounding-box fractions of the original 521x111
   lockup artwork, so this reproduces the source logo pixel-for-pixel
   when both pieces are shown together. js/lv-logo-loop.js drives which
   state is active. */
.lv-logo-loop {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  transition: background-color ease;
}
.lv-logo-frame {
  position: relative;
  width: 55%;
  aspect-ratio: 521 / 111;
}
.lv-icon {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 21.628%;
  height: 99.28%;
  color: #F56230;
  transition: color ease, left ease;
}
.lv-icon.is-centered { left: 39.186%; }
.lv-icon svg { width: 100%; height: 100%; display: block; }

.lv-wordmark {
  position: absolute;
  left: 33.09%;
  top: 20.82%;
  width: 66.796%;
  height: 57.32%;
  color: #000000;
  opacity: 1;
  transition: opacity ease;
}
.lv-wordmark svg { width: 100%; height: 100%; display: block; }

/* .hero-banner img{object-fit:cover} (base.css/case-study.css) would
   otherwise conflict by specificity if any <img> is ever reintroduced
   here; kept as a defensive no-op guard for the thumbnail rollout */
.hero-banner .lv-logo-layer,
.project-frame .lv-logo-layer,
.card-image .lv-logo-layer { object-fit: contain; }

/* .card-image normally gets its height from its <img>'s natural
   aspect ratio (mobile-projects.css sets width:100% only); since this
   widget has no intrinsic size of its own, give it one explicitly so
   it doesn't collapse to 0 height */
.card-image:has(.lv-logo-loop) { aspect-ratio: 2 / 1; }

@media (prefers-reduced-motion: reduce) {
  .lv-logo-loop,
  .lv-icon,
  .lv-wordmark { transition: none; }
}