#cheiro-belt-visual {
  position: fixed;
  z-index: 4;
  width: min(15rem, 20vw);
  aspect-ratio: 1.36;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 5px;
  background: #171411;
  box-shadow: 0 18px 48px rgb(0 0 0 / 38%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 220ms ease-out;
  will-change: left, top, opacity;
}

#cheiro-belt-visual.is-visible { opacity: 1; }

#cheiro-belt-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cheiro-belt-visual figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 1.8rem 0.75rem 0.65rem;
  color: #fff;
  background: linear-gradient(transparent, rgb(0 0 0 / 78%));
  font-size: 0.78rem;
  line-height: 1.15;
}

.cheiro-belt-visual__number {
  color: rgb(255 255 255 / 72%);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}

#cheiro-belt-visual strong { font-weight: 600; }

#cheiro-belt-visual.is-arriving img {
  animation: cheiro-belt-arrive 520ms cubic-bezier(.2, .75, .2, 1) both;
}

@keyframes cheiro-belt-arrive {
  from { opacity: 0; filter: blur(4px); transform: translateY(72px) scale(.96); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@media (max-width: 47.999rem) {
  #cheiro-belt-visual { width: min(12rem, 56vw); }
  #cheiro-belt-visual figcaption { font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  #cheiro-belt-visual.is-arriving img { animation: none; }
}