/* Built-in logo (signature mark + handwritten name). Shared by the website and the admin panel. */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

.brand-lockup { display: inline-flex; align-items: center; gap: 12px; color: var(--text, #f1eee6); }
.brand-mark { width: 52px; height: 52px; flex: none; overflow: visible; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.brand-initial { font: 400 36px 'Great Vibes', cursive; }
.brand-lockup:hover .brand-mark, a:hover > .brand-lockup .brand-mark { transform: rotate(-12deg) scale(1.04); }
.brand-word { display: grid; line-height: 1; text-align: left; }
.brand-name { font: 400 38px/1 'Great Vibes', cursive; padding: 0 .12em 0 .04em; white-space: nowrap; }
/* gradient underline; it redraws itself when the logo is hovered */
.brand-swash { display: block; width: 100%; height: 10px; margin-top: -3px; overflow: visible; }
.brand-swash path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.22, 1, .36, 1); }
.brand-lockup:hover .brand-swash path, a:hover > .brand-lockup .brand-swash path { animation: swash .9s cubic-bezier(.22, 1, .36, 1); }
@keyframes swash { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* smaller in tight places */
.sidebar .brand-lockup { gap: 10px; }
.sidebar .brand-mark { width: 36px; height: 36px; }
.sidebar .brand-name { font-size: 26px; }
.sidebar .brand-swash { height: 8px; }
.login-card .brand-lockup { justify-self: start; }
.login-card .brand-mark { width: 52px; height: 52px; }
.login-card .brand-name { font-size: 38px; }

@media (max-width: 420px) {
    .brand-mark { width: 40px; height: 40px; }
    .brand-name { font-size: 29px; }
    .brand-swash { height: 8px; }
}
@media (prefers-reduced-motion: reduce) { .brand-mark, .brand-swash path { transition: none; animation: none !important; } }

.logo-img.logo-plain { background: none; padding: 0; box-shadow: none; border-radius: 0; border: 0; }