/* Keep the stand-to-sit brand moment gentle and readable. Both frames share
   a bottom-center anchor so the bully feels planted during the crossfade. */
@media (prefers-reduced-motion: no-preference) {
  .animated-logo .logo-frame {
    transform-origin: 50% 88%;
    backface-visibility: hidden;
  }

  .logo-stand {
    animation: logoStandLoop 7.2s cubic-bezier(.45, 0, .2, 1) infinite;
    will-change: opacity, transform;
  }

  .logo-sit {
    animation: logoSitLoop 7.2s cubic-bezier(.45, 0, .2, 1) infinite;
    will-change: opacity, transform;
  }
}

@keyframes logoStandLoop {
  0%, 30% {
    opacity: 1;
    transform: translate3d(0, -1.2%, 0) scale(1.008);
  }
  39% {
    opacity: .72;
    transform: translate3d(0, -.25%, 0) scale(1.002);
  }
  49%, 81% {
    opacity: 0;
    transform: translate3d(0, .8%, 0) scale(.994);
  }
  90% {
    opacity: .55;
    transform: translate3d(0, -.2%, 0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, -1.2%, 0) scale(1.008);
  }
}

@keyframes logoSitLoop {
  0%, 31% {
    opacity: 0;
    transform: translate3d(0, -2.2%, 0) scale(.985);
  }
  40% {
    opacity: .42;
    transform: translate3d(0, -.9%, 0) scale(.992);
  }
  50%, 80% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  89% {
    opacity: .55;
    transform: translate3d(0, -.7%, 0) scale(.994);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -2.2%, 0) scale(.985);
  }
}

nav a { position: relative; }
nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--green); border-radius: 2px; }
.breed-hero { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 65px; padding-top: 35px; }
.breed-hero > img { width: 100%; height: 560px; object-fit: cover; border-radius: 180px 180px 12px 12px; }
.breed-hero .intro { max-width: 470px; }
.page-gallery, .merch-page { border-top: 1px solid #dde3da; }
.merch-page { min-height: calc(100vh - 190px); }
@media (max-width: 750px) {
  header { padding: 18px 5%; align-items: center; flex-wrap: wrap; }
  header .site-logo-link { margin: auto; }
  nav { gap: 14px; overflow-x: auto; padding: 12px 2px 14px; width: 100%; font-size: 13px; justify-content: center; }
  nav a:not(.nav-button) { display: block; }
  .breed-hero { grid-template-columns: 1fr; gap: 35px; padding-top: 25px; }
  .breed-hero > img { height: 430px; border-radius: 140px 140px 12px 12px; }
}

/* Larger shared brand mark across every page. */
.site-logo {
  width: 104px;
  height: 94px;
}

@media (max-width: 750px) {
  .site-logo {
    width: 82px;
    height: 74px;
  }
}
/* Fluid anatomy transition; the source artwork stays available as a fallback. */
.animated-logo.logo-fluid-ready .logo-frame{visibility:hidden;animation:none;will-change:auto}
.animated-logo .logo-fluid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}