/* Shared Gater mark: original app icon plus the supplied raster wordmark. */
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; white-space: nowrap; }
.brand-logo { display: block; flex: 0 0 38px; width: 38px; height: 38px; object-fit: cover; object-position: center 35%; border-radius: 12px; box-shadow: 0 0 18px rgba(240, 123, 145, .18); }
.brand-wordmark-wrap { position: relative; display: inline-block; flex: 0 0 auto; width: 128px; aspect-ratio: 714 / 141; isolation: isolate; }
.brand-wordmark { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
html[data-theme="light"] .brand-wordmark { filter: brightness(0) saturate(100%); }
.brand-wordmark-wrap::before,
.brand-wordmark-wrap::after { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; opacity: 0; background: var(--brand-glitch-color); -webkit-mask: url("/assets/gater-wordmark.png") left center / 100% 100% no-repeat; mask: url("/assets/gater-wordmark.png") left center / 100% 100% no-repeat; }
.brand-wordmark-wrap::before { --brand-glitch-color: #ef4a9b; }
.brand-wordmark-wrap::after { --brand-glitch-color: #9483ed; }
.brand-wordmark-wrap.is-initial-glitch::before { animation: gater-initial-glitch 680ms steps(1, end) both; }
.brand-wordmark-wrap.is-initial-glitch::after { animation: gater-initial-glitch-alt 680ms steps(1, end) both; }
.brand-wordmark-wrap.is-ambient-glitch::before { animation: gater-ambient-glitch 440ms steps(1, end) both; }
.brand-wordmark-wrap.is-ambient-glitch::after { animation: gater-ambient-glitch-alt 440ms steps(1, end) both; }
@keyframes gater-initial-glitch {
  0%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  16% { opacity: .48; transform: translateX(-2px); clip-path: inset(15% 0 65%); }
  29% { opacity: 0; }
  43% { opacity: .32; transform: translateX(1px); clip-path: inset(63% 0 16%); }
  58% { opacity: 0; }
}
@keyframes gater-initial-glitch-alt {
  0%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  20% { opacity: .38; transform: translateX(2px); clip-path: inset(57% 0 23%); }
  34% { opacity: 0; }
  48% { opacity: .26; transform: translateX(-1px); clip-path: inset(24% 0 55%); }
  62% { opacity: 0; }
}
@keyframes gater-ambient-glitch {
  0%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  35% { opacity: .2; transform: translateX(-1px); clip-path: inset(18% 0 63%); }
  67% { opacity: .12; transform: translateX(1px); clip-path: inset(65% 0 16%); }
}
@keyframes gater-ambient-glitch-alt {
  0%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  43% { opacity: .16; transform: translateX(1px); clip-path: inset(61% 0 19%); }
  72% { opacity: .1; transform: translateX(-1px); clip-path: inset(17% 0 65%); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body:not(.is-motion-paused) .brand-wordmark-wrap:hover::before { animation: gater-initial-glitch 650ms steps(1, end) both; }
  body:not(.is-motion-paused) .brand-wordmark-wrap:hover::after { animation: gater-initial-glitch-alt 650ms steps(1, end) both; }
}
@media (max-width: 760px) {
  .brand { gap: 8px; }
  .brand-logo { flex-basis: 34px; width: 34px; height: 34px; border-radius: 11px; }
  .landing nav .brand-wordmark-wrap { width: clamp(78px, 22vw, 94px); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-wordmark-wrap::before,
  .brand-wordmark-wrap::after { animation: none !important; }
}