/* Footer logo: emblem + text.
   Override display:table from base CSS — table context blocks transform animations */
.logo-footer {
  display: block !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

.footer-logo-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  /* will-change is set only when animation is active via .logo-group-float */
}

/* Floating animation — parent carries emblem + text in perfect sync */
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* Text logo: size always fixed; hidden state set by JS via logo-link--init */
.footer-logo-link .site-logo {
  width: 150px !important;
  height: auto !important;
}

/* JS adds .logo-link--init immediately → hide text logo before animation */
.footer-logo-link.logo-link--init .site-logo {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease 0.07s, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.07s;
}

/* JS adds .logo-link--visible when IO fires → text slides in alongside gerb */
.footer-logo-link.logo-link--visible .site-logo {
  opacity: 1 !important;
  transform: none !important;
}

/* Gerb intro: slides in from below when footer enters viewport */
.footer-gerb {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: translateY(14px) scale(0.88);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer-gerb.footer-gerb--visible {
  opacity: 0.9;
  transform: none;
}

/* Float the whole group (emblem + text) as one unit */
.footer-logo-link.logo-group-float {
  will-change: transform;
  animation: 6s ease-in-out infinite logo-float;
}

/* Fallback: if JS hides logo but IO never fires (e.g. local dev / no scroll),
   reveal after 2.5s via CSS animation so the logo is never permanently invisible */
@keyframes logo-fallback-reveal {
  to {
    opacity: 1;
    transform: none;
  }
}
.footer-logo-link.logo-link--init:not(.logo-link--visible) .site-logo {
  animation: logo-fallback-reveal 0.55s ease 2.5s forwards;
}
.footer-gerb:not(.footer-gerb--visible) {
  animation: logo-fallback-reveal 0.6s ease 2.5s forwards;
}

/* Reduced motion: skip all footer-logo animations, show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .footer-gerb {
    opacity: 0.9 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .footer-logo-link.logo-link--init .site-logo {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .footer-logo-link.logo-group-float {
    animation: none !important;
    will-change: auto !important;
  }
}