.ayg-logo {
  --logo-width: 70px;
  position: relative;
  display: inline-flex;
  align-items: center;
  width: var(--logo-width);
  flex: 0 0 var(--logo-width);
  aspect-ratio: 1095 / 563;
  isolation: isolate;
}

.ayg-logo--header {
  --logo-width: 56px;
}

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

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

.ayg-logo.ayg-logo--footer {
  --logo-width: 70px;
}

.ayg-logo__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 50%;
  will-change: transform, filter;
}

/* Defeat the legacy mobile `.nav-logo img { width/height: 38px }` rule.
   Each ribbon must fill the wide logo viewport, not a square image box. */
.site-nav .brand-logo-link .ayg-logo__layer {
  width: 100%;
  height: 100%;
  max-width: none;
  flex: none;
}

.ayg-logo__silver {
  animation: aygSilverFlow 6s cubic-bezier(.22,.75,.24,1) infinite;
}

.ayg-logo__gold {
  animation: aygGoldFlow 6s cubic-bezier(.22,.75,.24,1) infinite;
}

@keyframes aygGoldFlow {
  0%, 100% { transform: translate(-1px,1px) rotate(-.2deg); filter: brightness(.98); }
  12% { transform: translate(1px,-1px) rotate(.2deg); filter: brightness(1.1); }
  24%, 76% { transform: none; filter: none; }
}

@keyframes aygSilverFlow {
  0%, 100% { transform: translate(1px,-1px) rotate(.2deg); filter: brightness(.98); }
  14% { transform: translate(-1px,1px) rotate(-.2deg); filter: brightness(1.08); }
  26%, 76% { transform: none; filter: none; }
}

.brand-logo-link:is(:hover, :focus-visible, :active) .ayg-logo__gold {
  animation: aygGoldHover .75s cubic-bezier(.2,.8,.2,1) both;
}

.brand-logo-link:is(:hover, :focus-visible, :active) .ayg-logo__silver {
  animation: aygSilverHover .75s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes aygGoldHover {
  0%, 100% { transform: none; }
  50% { transform: translate(2px,-1px) scale(1.015); filter: brightness(1.12); }
}

@keyframes aygSilverHover {
  0%, 100% { transform: none; }
  50% { transform: translate(-2px,1px) scale(1.01); filter: brightness(1.08); }
}

@media (max-width: 768px) {
  .ayg-logo--header { --logo-width: 48px; }
}

@media (max-width: 640px) {
  .site-nav .brand-logo-link {
    gap: 3px;
  }

  .site-nav .brand-logo-link .ayg-logo--header {
    --logo-width: 46px;
    margin-inline-end: 0;
  }
}

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