/*
  Brand mark shared by every surface: the app navbar, sign-in pages and the entry kiosk.
  Load after gj-ui.css where both are present, so the tile overrides the white navbar logo tile.
  The tile matches the mobile app icon: a green tile painted here behind the transparent mark
  (settings.PLATFORM_MARK_ON_DARK), framed in white. Radar waves pulse out from the tile edge,
  the same ping as the site sidebar mark, staggered so one wave is always travelling.
  Brand colors are fixed, like the icon itself, so the tile reads the same in light and dark.
*/
:is(.gj-ui, .gj-kiosk) .gj-logo-radar {
  --gj-mark-glow: 95, 224, 207;
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 23%;
  background:
    radial-gradient(120% 120% at 25% 15%, rgba(46, 156, 144, .45), transparent 60%),
    linear-gradient(135deg, #11514d, #0b3a37 55%, #062322);
  /* The hairline keeps the white border visible on white surfaces in light mode. */
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .1), 0 8px 22px -6px rgba(var(--gj-mark-glow), .55);
  animation: gj-logo-in .9s cubic-bezier(.34, 1.56, .64, 1) .1s backwards;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease;
}

/* Both pseudo-elements are waves; this also resets the sign-in bar's sheen pseudo-element. */
:is(.gj-ui, .gj-kiosk) .gj-logo-radar::before,
:is(.gj-ui, .gj-kiosk) .gj-logo-radar::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: none;
  border: 2px solid rgb(var(--gj-mark-glow));
  border-radius: inherit;
  opacity: 0;
  transform: none;
  pointer-events: none;
  animation: gj-logo-wave 2.8s cubic-bezier(0, 0, .2, 1) infinite;
}

:is(.gj-ui, .gj-kiosk) .gj-logo-radar::after {
  animation-delay: 1.4s;
}

:is(.gj-ui, .gj-kiosk) .gj-logo-radar img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  background: none;
  border-radius: 0;
}

.gj-ui .gj-navbar__brand:hover .gj-logo-radar,
.gj-ui .gj-authbar__brand:hover .gj-logo-radar,
.gj-ui .gj-navbar__brand:focus-visible .gj-logo-radar,
.gj-ui .gj-authbar__brand:focus-visible .gj-logo-radar,
.gj-kiosk a:is(:hover, :focus-visible) > .gj-logo-radar {
  transform: rotate(-6deg) scale(1.08);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .1), 0 10px 26px -6px rgba(var(--gj-mark-glow), .85);
}

@keyframes gj-logo-in {
  from { opacity: 0; transform: scale(.4) rotate(-25deg); }
  60% { opacity: 1; }
}

@keyframes gj-logo-wave {
  0% { opacity: .8; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(1.45); }
}

@media (prefers-reduced-motion: reduce) {
  /* The radar waves stop; the tile and its glow stay. */
  :is(.gj-ui, .gj-kiosk) .gj-logo-radar { animation: none; transition: none; }
  :is(.gj-ui, .gj-kiosk) .gj-logo-radar::before,
  :is(.gj-ui, .gj-kiosk) .gj-logo-radar::after { display: none; }
}