/* Tavro's red panda: decorative, non-interactive, and kept outside content flow. */
.tavro-mascot{display:block;object-fit:contain;pointer-events:none;user-select:none;height:auto;max-width:100%}
.mascot-perch{position:relative;overflow:visible!important;margin-top:100px!important}
.mascot-perch>.mascot-peek{position:absolute;z-index:2;width:170px;height:auto;right:24px;top:0;transform:translateY(-87%);margin:0;padding:0;border:0;border-radius:0;box-shadow:none}
.mascot-closing{position:relative;overflow:visible!important}
.mascot-closing>.mascot-wave{position:absolute;right:22px;bottom:0;width:150px;height:auto;margin:0;padding:0;border:0;border-radius:0}
.mascot-closing{padding-right:190px!important}
.mascot-auth{display:flex;justify-content:flex-end;margin:0 0 -20px}
.mascot-auth .tavro-mascot{width:105px}
.get-app-access.mascot-perch .get-app-identity{border-radius:26px 26px 0 0}
@media(max-width:760px){
.mascot-perch{margin-top:78px!important}
.mascot-perch>.mascot-peek{width:132px;right:18px}
.mascot-closing{padding-right:28px!important;padding-bottom:135px!important}
.mascot-closing>.mascot-wave{width:115px;right:18px}
}
@media(max-width:680px){.mascot-auth{display:none}}
.hero-art>.mascot-hero{position:absolute;z-index:3;right:0;bottom:0;width:clamp(115px,21%,230px);height:auto;max-width:25%;border:0;border-radius:0;pointer-events:none}
.site-header .brand .mascot-nav{width:48px;height:36px;max-width:none;object-fit:contain;align-self:center;border-radius:0;margin-left:2px;flex:none}
@media(max-width:760px){.site-header .brand .mascot-nav{width:38px;height:30px;margin-left:0}.hero-art>.mascot-hero{right:1%;bottom:0;width:25%;max-width:25%}}
.hero-art.hero-art-mascot{aspect-ratio:auto;overflow:hidden;border-radius:28px;background:#f5f0fa}
.hero-art-mascot>.hero-panda-scene{display:block;position:static;width:100%;height:auto;max-width:100%;object-fit:contain;transform:none;animation:none;border-radius:inherit}
@media(max-width:520px){.hero-art.hero-art-mascot{aspect-ratio:auto;border-radius:18px}}
/* The mascot belongs to the expanded Product menu, leaving the header uncluttered. */
.site-header .mega-feature{position:relative;padding-top:68px}
.site-header .mega-feature>.mascot-dropdown{position:absolute;top:-5px;right:18px;width:120px;height:80px;max-width:none;object-fit:contain;margin:0;border:0;border-radius:0;box-shadow:none;pointer-events:none}
@media(max-width:760px){.site-header .mega-feature>.mascot-dropdown{width:100px;height:67px;top:0}.site-header .mega-feature{padding-top:60px}}
.site-header .mega-feature{padding-top:14px}
.site-header .mega-feature>.mascot-menu-art{display:block;position:static;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:12px;margin:0 0 16px}
.site-header .brand img.tavro-wordmark,footer .brand img.tavro-wordmark{width:175px;height:auto;max-width:none;border-radius:0;display:block}
.auth-home{background:transparent;border-radius:0;padding:0}
.auth-home img.tavro-wordmark{width:170px;height:auto;border-radius:0}
@media(max-width:760px){.site-header .brand img.tavro-wordmark{width:145px}.auth-home img.tavro-wordmark{width:145px}}

#auth .auth-card .auth-home{display:inline-flex;margin:0 0 24px;padding:0;background:transparent}
#auth .auth-card .auth-home .tavro-wordmark{width:185px;height:auto}
/* Gentle character motion; flat illustrations move as a whole. */
@keyframes tavro-peek-hello{
  0%,65%,100%{transform:translateY(-87%) rotate(0deg)}
  72%{transform:translateY(-90%) rotate(-5deg)}
  80%{transform:translateY(-90%) rotate(4deg)}
  88%{transform:translateY(-87%) rotate(-2deg)}
}
@keyframes tavro-wave-greeting{
  0%,62%,100%{transform:rotate(0deg) translateY(0)}
  70%{transform:rotate(-4deg) translateY(-3px)}
  78%{transform:rotate(4deg) translateY(-3px)}
  86%{transform:rotate(-2deg) translateY(0)}
}
.mascot-perch>.mascot-peek{transform-origin:50% 95%;animation:tavro-peek-hello 9s ease-in-out infinite}
.mascot-closing>.mascot-wave,.mascot-auth .tavro-mascot{transform-origin:50% 95%;animation:tavro-wave-greeting 10s ease-in-out infinite}
.mascot-auth .tavro-mascot{animation-delay:2s}
@media(prefers-reduced-motion:reduce){
.mascot-perch>.mascot-peek,.mascot-closing>.mascot-wave,.mascot-auth .tavro-mascot{animation:none}
}

/* Keep mascots still while true character animation is prepared. */
.mascot-perch>.mascot-peek,.mascot-closing>.mascot-wave,.mascot-auth .tavro-mascot{animation:none}