:root{
  --brand-accent: #0d9488;
  --brand-accent-dark: #0f766e;
  --brand-pop: #f59e0b;
}

@keyframes brand-logo-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes brand-emoji-in {
  from {
    transform: rotate(-30deg) scale(0.5);
  }
  to {
    transform: rotate(0deg) scale(1);
  }
}

.brand-logo{
  -webkit-tap-highlight-color: transparent;
}

.brand-logo-wrap{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  animation: brand-logo-in 0.5s ease-out forwards;
}

.brand-logo-inner{
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.brand-wordmark{
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1;
  color: var(--color-slate-800, #1e293b);
  /* Subtle depth: one soft shadow so type doesn’t look flat */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.brand-emoji-wrap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: brand-emoji-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
  /* Slight “sticker” lift: soft bg + shadow */
  padding: 0.15em;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.95));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.brand-emoji-char{
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", emoji;
  font-variant-emoji: emoji;
  line-height: 1;
}

/* size: sm (nav) */
.brand-logo[data-size="sm"] .brand-wordmark{
  font-size: 1.25rem;
}
.brand-logo[data-size="sm"] .brand-emoji-char{
  font-size: 1.25rem;
}

/* size: md */
.brand-logo[data-size="md"] .brand-wordmark{
  font-size: 2.25rem;
}
.brand-logo[data-size="md"] .brand-emoji-char{
  font-size: 1.875rem;
}

/* size: lg */
.brand-logo[data-size="lg"] .brand-wordmark{
  font-size: 3rem;
}
.brand-logo[data-size="lg"] .brand-emoji-char{
  font-size: 2.25rem;
}

@media (hover:hover){
  .brand-logo:hover .brand-wordmark{
    transform: translateY(-0.5px);
  }
}