.studio-loading-logo {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: var(--studio-loading-size, 48px);
  height: var(--studio-loading-size, 48px);
  overflow: hidden;
  border-radius: 25%;
  vertical-align: middle;
}

.studio-loading-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Move the highlight inside a fixed mask without a blended compositor layer. */
  background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, 0.85) 50%, transparent 56%) 120% 0 / 300% 100% no-repeat;
  pointer-events: none;
  -webkit-mask: url("/logo.png") center / contain no-repeat;
  mask: url("/logo.png") center / contain no-repeat;
  animation: studio-logo-shimmer 1.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.studio-loading-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

@keyframes studio-logo-shimmer {
  0% { background-position: 120% 0; }
  52%, 100% { background-position: -20% 0; }
}

@keyframes studio-logo-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-loading-logo::after {
    display: none;
    animation: none;
  }

  .studio-loading-logo img {
    /* Keep loading feedback without sweeping or moving the logo. */
    animation: studio-logo-breathe 2.4s ease-in-out infinite;
  }
}