:root {
  --ag-logo-dark-bg: #0A131F;
  --ag-logo-blue: #39BDE8;
  --ag-logo-blue-muted: #2B6F92;
  --ag-logo-white: #F2F8FC;
}

.ag-logo {
  --ag-logo-mark-size: 36px;
  --ag-logo-word-size: 20px;
  --ag-logo-gap: .55em;
  display: inline-flex;
  align-items: center;
  gap: var(--ag-logo-gap);
  min-width: 0;
  color: var(--ag-logo-white);
  line-height: 1;
  text-decoration: none;
}

.ag-logo__mark {
  display: block;
  flex: 0 0 auto;
  width: var(--ag-logo-mark-size);
  height: var(--ag-logo-mark-size);
  overflow: visible;
}

.ag-logo__inner,
.ag-logo__perim,
.ag-logo__shield,
.ag-logo__pupil {
  transform-box: fill-box;
  transform-origin: center;
}

.ag-logo__inner {
  animation: ag-logo-spin 34s linear infinite;
}

.ag-logo__perim {
  animation: ag-logo-ring-breathe 5.2s ease-in-out infinite;
}

.ag-logo__shield {
  transform: scale(1);
}

.ag-logo__sweep {
  animation: ag-logo-sweep 4.8s cubic-bezier(.4, 0, .6, 1) infinite;
}

.ag-logo__pupil {
  animation: ag-logo-pulse 3.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.ag-logo__wordmark {
  display: inline-flex;
  min-width: 0;
  color: var(--ag-logo-white);
  font-size: var(--ag-logo-word-size);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.ag-logo__wordmark span:first-child {
  color: var(--ag-logo-white);
}

.ag-logo__wordmark span:last-child {
  color: var(--ag-logo-blue);
}

.ag-logo--mark .ag-logo__wordmark {
  display: none;
}

.sr-app-header__brand {
  gap: 0;
}

.sr-app-header__brand .ag-logo {
  --ag-logo-mark-size: 34px;
  --ag-logo-word-size: 18px;
  --ag-logo-gap: 8px;
}

.login-brandline .ag-logo {
  --ag-logo-mark-size: 34px;
  --ag-logo-word-size: 18px;
  --ag-logo-gap: 9px;
}

.auth-brand .ag-logo {
  --ag-logo-mark-size: 38px;
  --ag-logo-word-size: 20px;
  --ag-logo-gap: 9px;
}

@keyframes ag-logo-inner-in {
  from { opacity: 0; transform: rotate(60deg); }
  to { opacity: 1; transform: rotate(0); }
}

@keyframes ag-logo-spin {
  to { transform: rotate(-360deg); }
}

@keyframes ag-logo-ring-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}

@keyframes ag-logo-ring-in {
  from { opacity: 0; transform: rotate(-150deg) scale(.88); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes ag-logo-shield-in {
  from { opacity: 0; transform: scale(.84); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ag-logo-sweep {
  0% { opacity: 0; transform: translateY(-40px); }
  12%, 88% { opacity: 1; }
  100% { opacity: 0; transform: translateY(40px); }
}

@keyframes ag-logo-pupil-in {
  0% { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes ag-logo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

@keyframes ag-logo-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ag-logo *,
  .ag-logo__wordmark span {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 700px) {
  .sr-app-header__brand .ag-logo {
    --ag-logo-mark-size: 32px;
    --ag-logo-word-size: 17px;
  }
}

@media (max-width: 430px) {
  .sr-app-header__brand .ag-logo__wordmark {
    display: none;
  }
}
