.main-nav:not(.main-nav-primary-color) .main-nav__logo {
  margin-left: 8px;
}

.main-nav__logo {
  mask-image: url(https://p2.bahamut.com.tw/PRJ/30y/baha30-logo.svg);
}

.top_nav__wish {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}


.top_nav__wish-icon {
  position: relative;
  z-index: 1;
  height: 36px;
  filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.2));
  transform-origin: center bottom;
  animation: wish-icon-float 4s ease-in-out infinite;
}

@keyframes wish-icon-float {

  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-5px) rotate(1deg);
  }
}


.top_nav__wish:hover .top_nav__wish-icon {
  animation: wish-icon-hover 0.7s ease-in-out infinite alternate;
}

@keyframes wish-icon-hover {
  0% {
    transform: translateY(-4px) rotate(-6deg);
  }

  100% {
    transform: translateY(-4px) rotate(6deg);
  }
}

@media (prefers-reduced-motion: reduce) {

  .top_nav__wish-icon,
  .top_nav__wish:hover .top_nav__wish-icon {
    animation: none;
  }
}

.top_nav__wish-label {
  position: absolute;
  left: 100%;
  top: 40%;
  z-index: 2;
  margin-left: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding-left: 4px;
  aspect-ratio: 300 / 118;
  text-align: center;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
  background: url(https://p2.bahamut.com.tw/PRJ/30y/wish_label_s.png) center / 100% 100% no-repeat;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) translateX(-6px);
  transform-origin: left center;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

/* 只有支援 hover 的裝置（電腦版）才在 hover／提示時顯示「留下祝福」文字 */
@media (hover: hover) {
  .top_nav__wish:hover .top_nav__wish-label,
  .top_nav__wish.is-hint .top_nav__wish-label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
  }
}


@media (max-width: 480px) {

  .top_nav__wish {
    display: none;
  }
}