.ayg-logo {
  --logo-size: 112px;
  position: relative;
  display: inline-block;
  width: var(--logo-size);
  flex: 0 0 var(--logo-size);
  aspect-ratio: 1;
  isolation: isolate;
}

.ayg-logo--header {
  --logo-size: 26px;
  overflow: hidden;
}

.site-nav .brand-logo-link {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  direction: ltr;
}

.site-nav .brand-logo-link .ayg-logo--header {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  margin-inline-end: -2px;
}

.site-nav .brand-logo-link .nav-logo-text {
  display: block;
  line-height: 1;
}

.ayg-logo.ayg-logo--footer {
  --logo-size: 34px;
}

.ayg-logo__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

/* Override the legacy mobile `.nav-logo img` dimensions in site.css. */
.brand-logo-link .ayg-logo__layer {
  width: 100%;
  height: 100%;
  max-width: none;
  flex: none;
}

/* Assemble once on page load, then remain still so the header never distracts. */
.ayg-logo__silver-round { animation: aygSilverRoundIn 1.05s cubic-bezier(.2,.8,.2,1) both; }
.ayg-logo__gold-bar     { animation: aygGoldBarIn .9s .08s cubic-bezier(.2,.8,.2,1) both; }
.ayg-logo__gold-up      { animation: aygGoldUpIn 1s .14s cubic-bezier(.2,.8,.2,1) both; }
.ayg-logo__silver-down  { animation: aygSilverDownIn 1.05s .18s cubic-bezier(.2,.8,.2,1) both; }

@keyframes aygGoldUpIn {
  0%   { opacity: 0; transform: translate(-9px, 9px) scale(.92); filter: brightness(1); }
  65%  { opacity: 1; transform: translate(2px, -2px) scale(1.025); filter: brightness(1.1); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); filter: brightness(1); }
}

@keyframes aygGoldBarIn {
  0%   { opacity: 0; transform: translate(-8px, 8px); }
  70%  { opacity: 1; transform: translate(1px, -1px); }
  100% { opacity: 1; transform: translate(0, 0); }
}

@keyframes aygSilverRoundIn {
  0%   { opacity: 0; transform: rotate(-18deg) scale(.9); }
  70%  { opacity: 1; transform: rotate(3deg) scale(1.015); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes aygSilverDownIn {
  0%   { opacity: 0; transform: translate(7px, -8px); }
  70%  { opacity: 1; transform: translate(-1px, 1px); }
  100% { opacity: 1; transform: translate(0, 0); }
}

/* A tiny brand reminder when the home link is intentionally revisited. */
.brand-logo-link:is(:hover, :focus-visible, :active) .ayg-logo__silver-round { animation: aygLogoNudgeRound .55s ease-out both; }
.brand-logo-link:is(:hover, :focus-visible, :active) .ayg-logo__gold-bar,
.brand-logo-link:is(:hover, :focus-visible, :active) .ayg-logo__gold-up { animation: aygLogoNudgeUp .55s ease-out both; }
.brand-logo-link:is(:hover, :focus-visible, :active) .ayg-logo__silver-down { animation: aygLogoNudgeDown .55s ease-out both; }

@keyframes aygLogoNudgeRound {
  0%, 100% { transform: rotate(0); }
  45%      { transform: rotate(3deg); }
}

@keyframes aygLogoNudgeUp {
  0%, 100% { transform: translate(0, 0); filter: brightness(1); }
  45%      { transform: translate(1px, -1px); filter: brightness(1.08); }
}

@keyframes aygLogoNudgeDown {
  0%, 100% { transform: translate(0, 0); }
  45%      { transform: translate(-1px, 1px); }
}

@media (prefers-reduced-motion: reduce) {
  .ayg-logo__layer {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}