/* Beauty Crown — interactive logo (shared by storefront and admin) */
.logo-crown { overflow: visible; --lm-spark: #e6bf5c; }
.logo-crown.big { --lm-spark: #fff3c4; transition: transform .25s ease-out; transform: perspective(400px) rotateX(var(--lm-rx, 0deg)) rotateY(var(--lm-ry, 0deg)); }
.logo-crown .lm-tilt,
.logo-crown .lm-crown,
.logo-crown .lm-pearl,
.logo-crown .lm-spark { transform-box: fill-box; }
.logo-crown .lm-crown { transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); animation: lm-drop .9s cubic-bezier(.34, 1.56, .64, 1) .15s backwards; }
.logo-crown .lm-pearl { transform-origin: center; }
.logo-crown .lm-spark { fill: var(--lm-spark); opacity: 0; transform-origin: center; }

/* Hover / keyboard focus on the logo links */
:is(.brand-logo, .admin-brand):is(:hover, :focus-visible) .lm-crown { transform: translateY(-1.5px) rotate(-7deg); }
:is(.brand-logo, .admin-brand):is(:hover, :focus-visible) .lm-pearl { animation: lm-pop .55s ease calc(var(--i) * .09s) both; }
:is(.brand-logo, .admin-brand):is(:hover, :focus-visible) .lm-spark { animation: lm-twinkle 1.4s ease-in-out .2s infinite; }

/* Gold shimmer across the italic "Crown" */
:is(.brand-logo, .admin-brand, .admin-brand-text) em {
    background: linear-gradient(100deg, currentColor 0 42%, #f3d27a 50%, currentColor 58% 100%) 100% 0 / 250% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text;
}
:is(.brand-logo, .admin-brand):is(:hover, :focus-visible) em,
.admin-brand-text em { -webkit-text-fill-color: transparent; animation: lm-shimmer 1.1s ease-out both; }
.admin-brand-text em { animation: lm-shimmer 1.4s ease-out .6s both; }

/* Large crowns (login, register, admin login): float, twinkle, follow the pointer */
.logo-crown.big .lm-tilt { transform-origin: 50% 100%; animation: lm-float 4.5s ease-in-out 1.1s infinite; }
.logo-crown.big .lm-spark { animation: lm-twinkle 2.6s ease-in-out 1.2s infinite; }
.logo-crown.big .lm-pearl { animation: lm-pop .55s ease calc(.9s + var(--i) * .1s) both; }

@keyframes lm-drop { from { transform: translateY(-9px) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } }
@keyframes lm-pop { 45% { transform: scale(1.6); } }
@keyframes lm-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(90deg); } }
@keyframes lm-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes lm-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
    .logo-crown, .logo-crown * { animation: none !important; transition: none !important; }
    .logo-crown.big { transform: none; }
    :is(.brand-logo, .admin-brand, .admin-brand-text) em { animation: none !important; -webkit-text-fill-color: currentColor; }
}