/* NexusCC × Cyrkil master-brand treatment.
   Cyrkil is the visual master brand; NexusCC remains the product name. */
:root {
  --cyrkil-blue: #087cff;
  --cyrkil-cyan: #48d8ff;
  --cyrkil-gold: #d6a84f;
  --cyrkil-deep: #051126;
}

/* Keep the supplied Cyrkil artwork visually clean rather than boxing it inside
   another generic app-icon treatment. The existing NexusMark component remains
   the single shared placement point, so this propagates consistently through
   auth, navigation, loading, and connection/error states. */
.nexus-brand-mark {
  position: relative;
  overflow: visible !important;
  border: 0 !important;
  background: url('/assets/cyrkil-emblem.svg') center / 96% 96% no-repeat !important;
  box-shadow: none !important;
  isolation: isolate;
}

.nexus-brand-mark::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 14%;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--cyrkil-cyan) 28%, transparent) 0%,
    color-mix(in srgb, var(--cyrkil-blue) 15%, transparent) 38%,
    transparent 72%);
  filter: blur(8px);
  opacity: .72;
}

.nexus-brand-mark::after {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle at 34% 20%, rgba(255,255,255,.22), transparent 24%);
  mix-blend-mode: screen;
  opacity: .35;
}

/* Hide the historical inline N glyph; it remains in the component only as a
   markup fallback while the Cyrkil artwork is the visual source of truth. */
.nexus-brand-mark > svg {
  opacity: 0 !important;
}

.nexus-brand-mark[data-size='small'] {
  background-size: 100% 100% !important;
}

.nexus-brand-mark[data-size='large'] {
  width: 72px !important;
  height: 72px !important;
  border-radius: 0 !important;
  background-size: 100% 100% !important;
  filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--cyrkil-blue) 24%, transparent));
}

.nexus-brand-wordmark {
  letter-spacing: .018em;
  font-weight: 700;
  text-shadow:
    0 0 20px color-mix(in srgb, var(--cyrkil-blue) 11%, transparent),
    0 1px 0 color-mix(in srgb, var(--cyrkil-gold) 8%, transparent);
}

.nexus-global-home .nexus-brand-mark {
  background-size: 100% 100% !important;
  filter: drop-shadow(0 7px 10px rgba(8,124,255,.18));
}

/* Auth is the strongest branding moment: the logo is given breathing room and
   a restrained premium glow without competing with form content. */
.nexus-auth-story .nexus-brand-mark,
.nexus-auth-card-head .nexus-brand-mark {
  animation: cyrkil-brand-breathe 4.8s ease-in-out infinite;
}

.nexus-auth-story .nexus-brand-mark {
  width: 46px !important;
  height: 46px !important;
}

.nexus-auth-card-head .nexus-brand-mark[data-size='large'] {
  width: 86px !important;
  height: 86px !important;
  margin-bottom: 2px;
}

.nexus-auth-mark-wrap {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes cyrkil-brand-breathe {
  0%, 100% { transform: translateZ(0) scale(1); filter: saturate(1) drop-shadow(0 10px 14px rgba(8,124,255,.12)); }
  50% { transform: translateZ(0) scale(1.025); filter: saturate(1.08) drop-shadow(0 14px 18px rgba(8,124,255,.20)); }
}

@media (prefers-reduced-motion: reduce) {
  .nexus-auth-story .nexus-brand-mark,
  .nexus-auth-card-head .nexus-brand-mark { animation: none !important; }
}