/* Shared by the storefront and dashboard; load after their layout styles. */
.brand {
  transform-origin: left center;
  animation:
    scale-up-hor-left 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both,
    logo-pulse 2.8s ease-in-out 0.4s infinite;
}

@keyframes scale-up-hor-left {
  from { transform: scaleX(0.4); }
  to { transform: scaleX(1); }
}

/* Shrink within the existing space so the loop never crowds navigation. */
@keyframes logo-pulse {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.94); opacity: 0.78; }
}

@keyframes logo-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
  .brand {
    transform: none;
    animation: logo-fade 2.8s ease-in-out infinite;
  }
}