/**
 * Mobile nav hamburger finger hint — light, subtle motion.
 * Hint sits left of the hamburger; finger tip aims up-right at the button.
 */

.nav-menu-hint {
  --nmh-ink: #ffffff;

  position: absolute;
  right: calc(100% + 0.05rem);
  top: 72%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  transform: translateY(-20%);
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.nav-menu-hint.is-dismissed {
  opacity: 0;
  transform: translateY(-20%) translateX(0.4rem) scale(0.92);
  visibility: hidden;
}

.nav-menu-hint__glow {
  position: absolute;
  inset: 0.15rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
  opacity: 0.85;
}

.nav-menu-hint__finger {
  position: relative;
  display: block;
  width: 1.65rem;
  height: 1.65rem;
  color: var(--nmh-ink);
  filter:
    drop-shadow(0 1px 2px rgba(15, 23, 42, 0.35))
    drop-shadow(0 0 6px rgba(253, 164, 175, 0.45));
  /* SVG tip points up; rotate so tip aims at hamburger (to the right). */
  transform-origin: 50% 80%;
  transform: rotate(48deg);
  animation: nav-menu-hint-nudge 1.85s ease-in-out infinite;
}

.nav-menu-hint__finger svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes nav-menu-hint-nudge {
  0%,
  100% {
    transform: rotate(48deg) translate(0, 0);
    opacity: 0.88;
  }
  50% {
    /* Nudge toward the hamburger (up-right in local space after rotation). */
    transform: rotate(52deg) translate(0.12rem, -0.22rem);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu-hint__finger {
    animation: none;
    opacity: 0.95;
  }
}

@media (min-width: 1024px) {
  .nav-menu-hint {
    display: none !important;
  }
}