/* ChatAI Engine — brand mark motion only.
 *
 * Scope: the public marketing site's mark + wordmark (`.mk-brand-lockup`,
 * used in both the header and the footer of views/layouts/marketing.php).
 * Nothing else on the site is touched by this file — no layout, colour,
 * typography or other component changes.
 *
 * The mark itself is brandmark() from app/Support/helpers.php, inline SVG
 * rather than the flat brandlockup() PNG, because the wordmark next to it
 * needs "ChatAi" and "Engine" in two different colours -- only possible
 * when the wordmark is real text, not a raster image.
 *
 * Concept: the 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-brand-lockup::before,
.mk-brand-lockup::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-brand-lockup::before {
  transform: scale(.88);
  background: radial-gradient(circle, color-mix(in srgb, var(--mk-brand) 55%, transparent) 0%, transparent 72%);
}

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

.mk-brand-lockup .brandmark {
  transition: transform .35s cubic-bezier(.19, 1, .22, 1);
}

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

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

@media (prefers-reduced-motion: reduce) {
  .mk-brand-lockup .brandmark,
  .mk-brand-lockup:hover .brandmark,
  .mk-brand-lockup:focus-visible .brandmark {
    animation: none;
    transform: none;
  }
  .mk-brand-lockup::before,
  .mk-brand-lockup::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); }
}