/* ChatAI Engine — header logo motion only.
 *
 * Scope: the public marketing header's brand mark (`.mk-header__logo`,
 * rendered by brandlockup() in app/Support/helpers.php). Nothing else on the
 * site is touched by this file — no layout, colour, typography or other
 * component changes. Loaded after all three marketing designs
 * (original / swiss / motion) so it layers on top of whichever is active;
 * their `.mk-header__logo` markup and CSS are identical, so one file covers
 * all three without duplicating rules per design.
 *
 * Concept: the existing mark is already a small connected-node network (four
 * nodes, one diamond of links) inside a chat bubble — a literal drawing of
 * "conversations from many channels, joined." Rather than adding new imagery,
 * this brings that network to life: the mark eases into view, a single soft
 * signal ring blooms outward once as it "comes online," then settles into a
 * slow, low-contrast breathing glow — an always-on presence, not a
 * decoration competing with the product. Hover/focus repeats the ring as a
 * quiet acknowledgement. The artwork itself (shape, colour, wordmark) is
 * never modified, only the box it sits in.
 */

.mk-header__logo {
  position: relative;
  isolation: isolate;
}

/* Soft ambient aura, sized to the mark's own footprint: brandlockup() is
   natively 1262x380 and the mark is the leading square, so a box as tall as
   the rendered logo (and, via aspect-ratio, as wide) lines up with the mark
   without needing to know its exact pixel offset. */
.mk-header__logo::before,
.mk-header__logo::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 22%;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.mk-header__logo::before {
  transform: scale(.88);
  background: radial-gradient(circle, color-mix(in srgb, var(--mk-brand) 55%, transparent) 0%, transparent 72%);
}

.mk-header__logo::after {
  transform: scale(.88);
  border: 1.5px solid color-mix(in srgb, var(--mk-brand) 70%, transparent);
}

.mk-header__logo img.brandlockup {
  transition: transform .35s cubic-bezier(.19, 1, .22, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .mk-header__logo img.brandlockup {
    animation: mkLogoIn .7s cubic-bezier(.19, 1, .22, 1) both;
  }
  .mk-header__logo::before {
    animation: mkLogoAuraIn .8s cubic-bezier(.19, 1, .22, 1) .1s both,
               mkLogoBreathe 5.5s ease-in-out 1.2s infinite;
  }
  .mk-header__logo::after {
    animation: mkLogoRing 1.1s cubic-bezier(.16, 1, .3, 1) .15s both;
  }

  .mk-header__logo:hover img.brandlockup,
  .mk-header__logo:focus-visible img.brandlockup {
    transform: scale(1.035) translateY(-1px);
  }
  .mk-header__logo:hover::before,
  .mk-header__logo:focus-visible::before {
    animation: mkLogoBreathe 2.2s ease-in-out infinite;
  }
  .mk-header__logo:hover::after,
  .mk-header__logo:focus-visible::after {
    animation: mkLogoRing 1s cubic-bezier(.16, 1, .3, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-header__logo img.brandlockup,
  .mk-header__logo:hover img.brandlockup,
  .mk-header__logo:focus-visible img.brandlockup {
    animation: none;
    transform: none;
  }
  .mk-header__logo::before,
  .mk-header__logo::after {
    animation: none;
    opacity: 0;
  }
}

@keyframes mkLogoIn {
  from { opacity: 0; transform: scale(.94) translateY(2px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes mkLogoAuraIn {
  from { opacity: 0; }
  to   { opacity: .38; }
}

@keyframes mkLogoBreathe {
  0%, 100% { opacity: .28; transform: scale(.88); }
  50%      { opacity: .46; transform: scale(.96); }
}

@keyframes mkLogoRing {
  from { opacity: .55; transform: scale(.86); }
  to   { opacity: 0;   transform: scale(1.3); }
}