.orb-brand {
    --logo-wordmark-w: clamp(70px, 5.6vw, 96px);
    --logo-orb: clamp(28px, 2.35vw, 38px);
    --logo-orb-gap: 7px;
    display: inline-flex;
    align-items: center;
    width: auto;
    text-decoration: none;
  }

  .orb-brand-lockup {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--logo-orb);
    padding-left: calc(var(--logo-orb) + var(--logo-orb-gap));
  }

  .orb-brand-wordmark-clip {
    display: block;
    width: var(--logo-wordmark-w);
    overflow: hidden;
    clip-path: inset(0 0 0 0);
    animation: orbBrandReveal 7.06s linear infinite;
  }

  .orb-brand img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 12px rgba(255, 255, 255, 0.22)) drop-shadow(0 1px 12px rgba(0, 0, 0, 0.28));
  }

  .orb-brand-wordmark {
    width: var(--logo-wordmark-w);
  }

  .orb-brand-orb-stage {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 2;
    width: var(--logo-orb);
    height: var(--logo-orb);
    margin-top: calc(var(--logo-orb) / -2);
    animation: orbBrandRollAcross 7.06s linear infinite;
    pointer-events: none;
  }

  .orb-brand-orb-idle {
    width: 100%;
    height: 100%;
  }

  .orb-brand-orb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(88, 196, 255, 0.35)) drop-shadow(0 1px 10px rgba(0, 0, 0, 0.28));
    animation: orbBrandOrbSpin 7.06s linear infinite;
  }

  .orb-brand-orb-spin {
    width: 100%;
    height: 100%;
  }

  @keyframes orbBrandReveal {
    0% {
      clip-path: inset(0 100% 0 0);
      animation-timing-function: cubic-bezier(0.22, 0.82, 0.2, 1);
    }
    11.08% { clip-path: inset(0 0 0 0); }
    24.07%, 33.47% {
      clip-path: inset(0 0 0 0);
      animation-timing-function: cubic-bezier(0.22, 0.82, 0.2, 1);
    }
    46.47% { clip-path: inset(0 0 0 0); }
    57.54%, 100% { clip-path: inset(0 100% 0 0); }
  }

  @keyframes orbBrandRollAcross {
    0% {
      transform: translateX(calc(var(--logo-orb) + var(--logo-orb-gap)));
      animation-timing-function: cubic-bezier(0.22, 0.82, 0.2, 1);
    }
    11.08% { transform: translateX(calc(var(--logo-orb) + var(--logo-orb-gap) + var(--logo-wordmark-w) - var(--logo-orb))); }
    24.07%, 33.47% {
      transform: translateX(0);
      animation-timing-function: cubic-bezier(0.22, 0.82, 0.2, 1);
    }
    46.47% { transform: translateX(calc(var(--logo-orb) + var(--logo-orb-gap) + var(--logo-wordmark-w) - var(--logo-orb))); }
    57.54%, 100% { transform: translateX(calc(var(--logo-orb) + var(--logo-orb-gap))); }
  }

  @keyframes orbBrandOrbSpin {
    0% {
      transform: rotate(0deg);
      animation-timing-function: cubic-bezier(0.22, 0.82, 0.2, 1);
    }
    11.08% { transform: rotate(360deg); }
    24.07%, 33.47% {
      transform: rotate(0deg);
      animation-timing-function: cubic-bezier(0.22, 0.82, 0.2, 1);
    }
    46.47% { transform: rotate(-360deg); }
    57.54%, 100% { transform: rotate(0deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .orb-brand-wordmark-clip,
    .orb-brand-orb-stage,
    .orb-brand-orb-idle,
    .orb-brand-orb,
    .orb-brand-orb-spin {
      animation: none;
    }
  }


a.orb-brand .orb-brand-wordmark{width:var(--logo-wordmark-w);height:auto;max-width:none}a.orb-brand .orb-brand-orb{width:100%;height:100%;max-width:none}
.touch-sidebar-header .orb-brand{--logo-wordmark-w:54px;--logo-orb:20px;--logo-orb-gap:5px}.touch-dashboard .topbar>.orb-brand{--logo-wordmark-w:44px;--logo-orb:16px;--logo-orb-gap:4px}@media(max-width:360px){.touch-dashboard .topbar>.orb-brand{--logo-wordmark-w:34px;--logo-orb:12px;--logo-orb-gap:3px}}

/* Keep the wordmark transparent: clipping a blurred shadow creates a gray box. */
a.orb-brand img.orb-brand-wordmark{filter:none}

/* The mobile product switch's generic .brand img sizing must not enlarge
   the animated sphere beyond its stage or override the wordmark width. */
.touch-dashboard .topbar > a.orb-brand img.orb-brand-orb {
  width: 100%;
  height: 100%;
  max-width: none;
}
.touch-dashboard .topbar > a.orb-brand img.orb-brand-wordmark {
  width: var(--logo-wordmark-w);
  height: auto;
  max-width: none;
}