/* Shared Vaela brand components. Hand-written; consumes only variables owned by
   Production/branding/brand.tokens.json (via the generated tokens.css).
   Load order on any page: tokens.css, typography.css, components.css. */

/* Brand lockup: three-circle mark + Newsreader wordmark. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  color: inherit;
  text-decoration: none;
}

/* The approved three-circle symbol: translucent overlapping circles, NO outlines.
   Size the wrapper per placement; the orbs scale with it. */
.vaela-mark {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  isolation: isolate;
}

.vaela-mark > i,
.vaela-mark > span {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: var(--orb-opacity);
  mix-blend-mode: multiply;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  will-change: transform;
}

.vaela-mark .orb-taupe {
  width: 55%;
  height: 55%;
  left: 4%;
  top: 3%;
  background: var(--brand-orb-taupe);
}
.vaela-mark .orb-olive {
  width: 52%;
  height: 52%;
  right: 1%;
  top: 21%;
  background: var(--brand-orb-olive);
}
.vaela-mark .orb-clay {
  width: 48%;
  height: 48%;
  left: 27%;
  bottom: 0;
  background: var(--brand-orb-clay);
}

/* Loading/thinking swirl. NOT a resting-logo state: apply .is-swirling only
   while something is genuinely in progress, remove it when done (same class
   vocabulary the app uses, review m6). Reduced-motion users always see the
   static mark. */
@media (prefers-reduced-motion: no-preference) {
  .vaela-mark.is-swirling .orb-taupe {
    animation: vaela-swirl-a var(--motion-swirl) infinite;
  }
  .vaela-mark.is-animating .orb-taupe {
    animation: vaela-swirl-a var(--motion-swirl);
  }

  .vaela-mark.is-swirling .orb-olive {
    animation: vaela-swirl-b var(--motion-swirl) infinite;
  }
  .vaela-mark.is-animating .orb-olive {
    animation: vaela-swirl-b var(--motion-swirl);
  }

  .vaela-mark.is-swirling .orb-clay {
    animation: vaela-swirl-c var(--motion-swirl) infinite;
  }
  .vaela-mark.is-animating .orb-clay {
    animation: vaela-swirl-c var(--motion-swirl);
  }
}

/* Each orb follows a distinct compact arc. Transforms never change width,
   height, or border radius, so the mark cannot deform into rounded squares. */
@keyframes vaela-swirl-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  32% {
    transform: translate3d(24%, 12%, 0) scale(0.98);
  }
  68% {
    transform: translate3d(11%, 34%, 0) scale(1.02);
  }
}

@keyframes vaela-swirl-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  32% {
    transform: translate3d(-18%, 23%, 0) scale(1.02);
  }
  68% {
    transform: translate3d(-28%, -5%, 0) scale(0.98);
  }
}

@keyframes vaela-swirl-c {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  32% {
    transform: translate3d(-8%, -28%, 0) scale(0.98);
  }
  68% {
    transform: translate3d(21%, -18%, 0) scale(1.02);
  }
}