/*
| Ventory brand on the standalone screens (login, setup / update / wizard, branch selector, POS) – user 2026-10-24.
| Images come from ve_brand_logo() / ve_brand_mark() (ve_ui.php). Light page = light artwork, dark page = the glowing
| artwork; hero places (.is-glow) breathe softly on dark pages. Reduced motion = a steady glow, no movement.
| The app pages get the same switch from custom.css (.logo-light / .logo-dark).
*/
.ve-brand-logo, .ve-brand-mark { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
html.dark .ve-brand-logo.logo-light, html.dark .ve-brand-mark.logo-light,
html:not(.dark) .ve-brand-logo.logo-dark, html:not(.dark) .ve-brand-mark.logo-dark { display: none; }
.ve-brand-mark.logo-light { scale: 1.17; }   /* the light mark carries a baked glow (glow room around it) */

@keyframes ve-brand-breathe {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(0, 180, 100, .18)) brightness(1); }
    50%      { filter: drop-shadow(0 0 16px rgba(0, 180, 100, .55)) brightness(1.08); }
}
.is-glow { animation: ve-brand-breathe 3.6s ease-in-out infinite; will-change: filter; }
@media (prefers-reduced-motion: reduce) {
    .is-glow { animation: none; filter: drop-shadow(0 0 10px rgba(0, 180, 100, .4)); }
}
@media print { .is-glow { animation: none; filter: none; } }
/* =========================================================
   LOGO SHINE (user 2026-10-24: "the flash animation of the buttons on the logo as well")
   .ve-shine wraps the Ventory logo; its ::after is the same glint as the main buttons, cut to the logo's own shape
   (mask = the visible artwork: light / dark, lockup / mark), so it shines on the letters and the V only. Once when the
   page opens, again on hover, then softly every 12 s. Background-position only (tiny repaint, no layout); off with
   reduced motion and in print. Same block in ve-ui.css (app pages) and ve-brand.css (standalone screens).
   ========================================================= */
.ve-shine{ position: relative; display: inline-flex; isolation: isolate; }
.ve-shine::after{
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .6) 48%, rgba(255, 255, 255, .18) 54%, transparent 60%) no-repeat;
    background-size: 250% 100%; background-position: 100% 0;
    -webkit-mask: url(../images/brand/logo-light-sm.png) right center / auto 100% no-repeat; mask: url(../images/brand/logo-light-sm.png) right center / auto 100% no-repeat;
    animation: ve-shine 1.5s .6s cubic-bezier(.25, .7, .2, 1) 1, ve-shine-loop 12s 2.5s ease-in-out infinite;
}
[dir="rtl"] .ve-shine::after{ -webkit-mask-position: left center; mask-position: left center; }
/* RTL lockup (V on the right, 2026-10-25): the glint follows the RTL artwork */
[dir="rtl"] .ve-shine:not(.is-mark)::after{ -webkit-mask-image: url(../images/brand/logo-light-sm-rtl.png); mask-image: url(../images/brand/logo-light-sm-rtl.png); }
html.dark[dir="rtl"] .ve-shine:not(.is-mark)::after{ -webkit-mask-image: url(../images/brand/logo-dark-sm-rtl.png); mask-image: url(../images/brand/logo-dark-sm-rtl.png); }
/* the name in the user's script (logo-*-fa|ps|ur.png, html lang = the user's language) */
html[dir="rtl"]:lang(fa) .ve-shine:not(.is-mark)::after{ -webkit-mask-image: url(../images/brand/logo-light-sm-fa.png); mask-image: url(../images/brand/logo-light-sm-fa.png); }
html.dark[dir="rtl"]:lang(fa) .ve-shine:not(.is-mark)::after{ -webkit-mask-image: url(../images/brand/logo-dark-sm-fa.png); mask-image: url(../images/brand/logo-dark-sm-fa.png); }
html[dir="rtl"]:lang(ps) .ve-shine:not(.is-mark)::after{ -webkit-mask-image: url(../images/brand/logo-light-sm-ps.png); mask-image: url(../images/brand/logo-light-sm-ps.png); }
html.dark[dir="rtl"]:lang(ps) .ve-shine:not(.is-mark)::after{ -webkit-mask-image: url(../images/brand/logo-dark-sm-ps.png); mask-image: url(../images/brand/logo-dark-sm-ps.png); }
html[dir="rtl"]:lang(ur) .ve-shine:not(.is-mark)::after{ -webkit-mask-image: url(../images/brand/logo-light-sm-ur.png); mask-image: url(../images/brand/logo-light-sm-ur.png); }
html.dark[dir="rtl"]:lang(ur) .ve-shine:not(.is-mark)::after{ -webkit-mask-image: url(../images/brand/logo-dark-sm-ur.png); mask-image: url(../images/brand/logo-dark-sm-ur.png); }
html.dark .ve-shine::after{ -webkit-mask-image: url(../images/brand/logo-dark-sm.png); mask-image: url(../images/brand/logo-dark-sm.png); }
.ve-shine.is-mark::after{ -webkit-mask-image: url(../images/brand/mark-light.png); mask-image: url(../images/brand/mark-light.png); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; scale: 1.17; }
html.dark .ve-shine.is-mark::after{ -webkit-mask-image: url(../images/brand/mark-dark.png); mask-image: url(../images/brand/mark-dark.png); scale: 1; }
.ve-shine:hover::after{ animation: ve-shine-h 1.1s cubic-bezier(.25, .7, .2, 1) 1; }
html.dark .ve-shine::after{ background-image: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .15) 54%, transparent 62%); }
@keyframes ve-shine{ from{ background-position: 100% 0; } to{ background-position: 0 0; } }
@keyframes ve-shine-h{ from{ background-position: 100% 0; } to{ background-position: 0 0; } }
@keyframes ve-shine-loop{ 0%{ background-position: 100% 0; } 12%{ background-position: 0 0; } 100%{ background-position: 0 0; } }
@media (prefers-reduced-motion: reduce){ .ve-shine::after{ animation: none; display: none; } }
@media print{ .ve-shine::after{ display: none; } }