.swipe-hint-wrapper {
  position: relative;
  overflow: hidden;
}


.swipe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6); /* semi-transparent layer */
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto;
  padding: 0 1rem;
}

.swipe-hint {
  display: flex;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: swipeAnim 1.5s ease-in-out infinite;
  white-space: nowrap;
  flex-direction: column;
  gap: 0px;
  line-height: 10px;
}

.swipe-hint sub {
  font-size: 0.5em;
}

.swipe-hint.left {
  animation-name: swipeLeftAnim;
}

.swipe-hint.right {
  animation-name: swipeRightAnim;
}

@keyframes swipeLeftAnim {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.5;
  }
  50% {
    transform: translateX(-10px);
    opacity: 1;
  }
}

@keyframes swipeRightAnim {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.5;
  }
  50% {
    transform: translateX(10px);
    opacity: 1;
  }
}