/* UIN navbar logo character.
   Replaces the TaskHub logo (icon + text) in the navbar with the same
   animated blue character used in the "Get Started" button and the app
   header mascot (productivity-portal header-character).
   Markup (injected by assets/js/logo-character.js):
   <a class="navbar-brand-header"><span class="nav-character" data-svg=".../get-started-character.svg"></span></a> */

.nav-character{display:block;width:40px;height:40px;flex:none;background:#0A66EA;border-radius:10px;overflow:visible;transform-origin:50% 62%;will-change:transform}
.nav-character .pp-character-svg{display:block;width:100%;height:100%;--x:0;--y:0;--wl:1;--wr:1;--hs:1;--ms:260ms}
.nav-character .pp-char-open,.nav-character .pp-char-happy,.nav-character .pp-char-line{fill:#fff}
.nav-character .pp-char-happy,.nav-character .pp-char-line{fill:none;stroke:#fff;stroke-width:15;stroke-linecap:round}
.nav-character .pp-char-happy,.nav-character .pp-char-line,.nav-character .pp-char-sparks{display:none}
.nav-character .pp-char-eye-l{transform:translate(calc(96px + var(--x) * 1px),calc(137px + var(--y) * 1px)) rotate(12deg) scale(var(--wl),var(--hs));transition:transform var(--ms) cubic-bezier(.2,.8,.2,1)}
.nav-character .pp-char-eye-r{transform:translate(calc(204px + var(--x) * 1px),calc(145px + var(--y) * 1px)) rotate(12deg) scale(var(--wr),var(--hs));transition:transform var(--ms) cubic-bezier(.2,.8,.2,1)}
.nav-character [data-face=happy] .pp-char-open,.nav-character [data-face=wink] .pp-char-eye-r .pp-char-open{display:none}
.nav-character [data-face=happy] .pp-char-happy{display:block}
.nav-character [data-face=wink] .pp-char-eye-r .pp-char-line{display:block}
.nav-character [data-face=happy] .pp-char-sparks{display:block}
.nav-character .pp-char-sparks circle{opacity:0;transform-box:fill-box;transform-origin:center;animation:pp-char-spark 1.4s ease-out infinite}
.nav-character .pp-char-sparks circle:nth-child(2){animation-delay:.12s}
.nav-character .pp-char-sparks circle:nth-child(3){animation-delay:.24s}
.nav-character .pp-char-sparks circle:nth-child(4){animation-delay:.36s}
.nav-character .pp-char-sparks circle:nth-child(5){animation-delay:.48s}

@media (max-width:479px){.nav-character{width:36px;height:36px;border-radius:9px}}
@media (prefers-reduced-motion:reduce){.nav-character .pp-char-eye-l,.nav-character .pp-char-eye-r{transition:none}.nav-character .pp-char-sparks circle{animation:none}}

/* Footer: same character, slightly larger on the dark footer. */
.navbar-brand-footer .nav-character{width:44px;height:44px;border-radius:11px}
@media (max-width:479px){.navbar-brand-footer .nav-character{width:40px;height:40px;border-radius:10px}}

/* Auth pages (sign-in/sign-up): centered character in place of the old wordmark. */
.uil-character-logo .nav-character{width:44px;height:44px;border-radius:11px;margin:0 auto}