/* Shared floating Placoria brand mark (homepage nav, signed-in app, admin). */

.m-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #231b36;
  text-decoration: none;
}

/* animated brand mark: large suitcase that floats DOWN over the app bar,
   pops in on load, bobs gently, and catches a silhouette shimmer */
.m-nav-brand-mark {
  position: relative;
  display: inline-flex;
  width: 64px;
  height: 64px;
  margin: 0 0 0 -6px;
  z-index: 40;
  animation:
    m-logo-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    m-logo-float 5s ease-in-out 0.8s infinite;
}

.m-nav-brand-logo {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(var(--lp-primary-rgb), 0.22));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.m-nav-brand:hover .m-nav-brand-logo {
  transform: rotate(-9deg) scale(1.12);
}

.m-nav-brand-text {
  line-height: 1;
}

.m-nav-brand-text i {
  font-style: normal;
  color: #7c3aed; /* Placoria Violet on light surfaces; use Lilac #c4b5fd on dark */
}

@keyframes m-logo-pop {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.4) rotate(-22deg);
  }
  100% {
    opacity: 1;
    transform: translateY(18px) scale(1) rotate(0);
  }
}

@keyframes m-logo-float {
  0%,
  100% {
    transform: translateY(18px);
  }
  50% {
    transform: translateY(11px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-nav-brand-mark {
    animation: none;
    transform: translateY(16px);
  }
  .m-nav-brand-logo {
    transition: none;
  }
}

@media (max-width: 768px) {
  .m-nav-brand-mark,
  .m-nav-brand-logo {
    width: 50px;
    height: 50px;
  }
}