/* ZentiX brand — visual identity only (logo/wordmark images, theme-matched).
   Loaded after every other stylesheet so it replaces the previous CSS-drawn
   AgencyOS tile mark + text without touching layout, sizing or behaviour.
   Dark artwork is the default; [data-theme="light"] swaps to the light artwork. */
:root {
  --zx-wordmark: url('../brand/zentix-dark.png');
  --zx-mark: url('../brand/zentix-mark-dark.png');
}
:root[data-theme="light"] {
  --zx-wordmark: url('../brand/zentix-light.png');
  --zx-mark: url('../brand/zentix-mark-light.png');
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
#sidebar .sidebar-brand .brandmark { display: block; width: 30px; height: 26px; flex: 0 0 30px; background: var(--zx-mark) center / contain no-repeat; }
#sidebar .sidebar-brand .brandmark i { display: none; }
#sidebar .sidebar-brand .brand-name { width: 156px; height: 46px; margin: -5px 0; font-size: 0; line-height: 0; color: transparent; background: var(--zx-wordmark) left center / contain no-repeat; }
@media (min-width: 901px) {
  #sidebar:not(.collapsed) .sidebar-brand .brandmark { display: none; }   /* expanded: the wordmark already carries the X */
  #sidebar .sidebar-brand .brand-name { max-width: 156px; }
}
@media (max-width: 900px) {
  body.mobile-nav-open #sidebar .sidebar-brand .brandmark { display: none; } /* open drawer shows the wordmark */
}

/* X glint: a light reflection that crosses only the X (expanded wordmark + collapsed X mark) */
#sidebar .sidebar-brand .brand-name, #sidebar .sidebar-brand .brandmark { position: relative; }
#sidebar .sidebar-brand .brand-name::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 31%; pointer-events: none;
  -webkit-mask: var(--zx-wordmark) right center / 322% 100% no-repeat; mask: var(--zx-wordmark) right center / 322% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%) 170% 0 / 300% 100% no-repeat;
  animation: zxXGlint 4s ease-in-out 1.2s infinite;
}
#sidebar .sidebar-brand .brandmark::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--zx-mark) center / contain no-repeat; mask: var(--zx-mark) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%) 170% 0 / 300% 100% no-repeat;
  animation: zxXGlint 4s ease-in-out 1.2s infinite;
}
@keyframes zxXGlint { 0% { background-position: 170% 0; } 38%, 100% { background-position: -70% 0; } }
@media (prefers-reduced-motion: reduce) { #sidebar .sidebar-brand .brand-name::after, #sidebar .sidebar-brand .brandmark::after { animation: none; } }

/* ── Boot / loading screen ───────────────────────────────────────────── */
.welcome-screen .loaderBrandLock { gap: 0; }
.welcome-screen .loaderBrand { display: block; width: 360px; max-width: 100%; height: 105px; padding: 0; filter: none; background: var(--zx-wordmark) center / contain no-repeat; }
:root:not([data-theme="light"]) .welcome-screen { background: var(--ld-bg); }   /* dark: no cyan glow behind the logo */
.welcome-screen .loaderBrand i { display: none; }
/* reveal: the wordmark wipes in left to right, then the X "ignites" with a bright flash on a loop */
.welcome-screen .loaderBrand { position: relative; animation: zxLogoWipe 1s cubic-bezier(.65, 0, .25, 1) both; }
.welcome-screen .loaderBrand::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask: var(--zx-wordmark) center / contain no-repeat; mask: var(--zx-wordmark) center / contain no-repeat;
  background: radial-gradient(circle 92px at 83% 50%, rgba(255, 255, 255, .95) 0%, rgba(150, 255, 255, .5) 45%, transparent 100%);
  animation: zxLogoIgnite 2.6s ease-in-out 1.1s infinite;
}
@keyframes zxLogoWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes zxLogoIgnite { 0%, 100% { opacity: 0; } 14% { opacity: .95; } 42% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .welcome-screen .loaderBrand, .welcome-screen .loaderBrand::after { animation: none; } }
.welcome-screen .loaderBrandLock strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Sign-in (the header sits on a dark video shade in both themes, so it always uses the dark artwork) ── */
.lgnLogo { gap: 0; }
.lgnLogo .brandmark { display: block; width: 136px; height: 40px; background: url('../brand/zentix-dark.png') left center / contain no-repeat; }
.lgnLogo .brandmark i { display: none; }
.lgnLogo strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.orCore .brandmark { display: block; width: 44px; height: 37px; background: url('../brand/zentix-mark-dark.png') center / contain no-repeat; }
.orCore .brandmark i { display: none; }

/* ── New Project wizard header ───────────────────────────────────────── */
.pc-logo > svg { display: none; }
.pc-logo > span { display: block; width: 100px; height: 29px; font-size: 0; line-height: 0; color: transparent; background: var(--zx-wordmark) left center / contain no-repeat; }