/* Neon Pulsar logo (PNG): no "double letters" overlay; only a subtle spark. */

.np-wrap{
  display:inline-block;
  line-height:0;
}

/* PNG logo container */
.np-wrap.np-img{
  position:relative;
  overflow:visible;
}

/* Base logo */
.np-logo-img{
  display:block;
  width: 240px;
  height:auto;
  overflow:visible;
  position: relative;
  z-index: 1;
  will-change: filter;
  /* Slightly "bolder" feel without duplicating the letters */
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.25))
    drop-shadow(0 0 10px rgba(42,245,255,.16))
    drop-shadow(0 0 12px rgba(255,107,255,.10));
}

/* Moving spark: a small flare that travels along the center axis.
   User request: NOT a wide "stripe" shimmer — a compact sparkle between letters. */
.np-wrap.np-img::after{
  content:"";
  position:absolute;
  top:50%;
  left:-8%;
  width:14px;
  height:14px;
  border-radius:999px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.70) 0%,
    rgba(255,255,255,.26) 35%,
    rgba(255,255,255,0) 72%
  );
  box-shadow:
    0 0 10px rgba(255,255,255,.18),
    0 0 16px rgba(122,243,255,.10),
    0 0 16px rgba(255,124,251,.08);
  filter: blur(.15px);
  opacity:0;
  pointer-events:none;
  z-index: 2;
  animation: npSparkDot 2.8s ease-in-out infinite;
}

@keyframes npSparkDot{
  0%   { left: -8%; opacity: 0; }
  10%  { opacity: .16; }
  45%  { opacity: .32; }
  70%  { opacity: .26; }
  88%  { opacity: .14; }
  100% { left: 108%; opacity: 0; }
}

/* Hover boost */
.np-wrap.np-img:hover .np-logo-img{
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.28))
    drop-shadow(0 0 12px rgba(42,245,255,.20))
    drop-shadow(0 0 14px rgba(255,107,255,.12));
}

/* Small instance for the left rail: same idea, just subtler and faster.
   IMPORTANT: render on a pure black, fully-rounded background (Discord-like). */
.np-wrap.np-img.np-rail{
  position: relative;
  overflow: hidden;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: #000;
  border-radius: 999px;
}
.np-wrap.np-img.np-rail::after{
  width: 10px;
  height: 10px;
  animation: npRailDot 2.1s ease-in-out infinite;
  box-shadow:
    0 0 8px rgba(255,255,255,.14),
    0 0 12px rgba(122,243,255,.08),
    0 0 12px rgba(255,124,251,.06);
}
@keyframes npRailDot{
  0%   { left: -15%; opacity: 0; }
  14%  { opacity: .14; }
  50%  { opacity: .24; }
  84%  { opacity: .14; }
  100% { left: 115%; opacity: 0; }
}
.np-wrap.np-img.np-rail .np-logo-img{
  /* Slightly bigger letters, but still fully visible inside the circle */
  width: 29px;
  height: 29px;
  filter: none;
}

/* Auth pages: keep the original app gradient background (no forced solid black). */
.auth-wrapper{
  background: transparent;
}

.auth-card .np-wrap{ display:block; text-align:center; }
.auth-card .np-logo-img{
  /* Logo size tuned so it fits nicely inside the card and doesn't crop */
  width: min(360px, 100%);
  max-width: 100%;
  display: block;
  margin: 10px auto 14px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) .np-logo-img,
  html:not(.force-motion) .np-wrap.np-img::after{
    animation: none !important;
  }
}


/* Ensure the rail brand uses the same PNG sizing */
/* Rail brand icon sizing: keep it smaller so the whole NP is visible */
.dc-brand-btn .dc-brand-img.np-logo-img{
  /* Make the NP a touch larger in the rail brand button */
  width: 31px !important;
  height: 31px !important;
  object-fit: contain;
}

/* Rail brand button: PURE black background + rounded corners */
/* Rail brand button: FULL black, true round shape */
.dc-rail .dc-brand-btn,
.dc-brand-btn{
  background: #000 !important;
  background-image: none !important;
  border-radius: 50% !important;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
}

/* Keep the hover state black too (skins set a gray hover bg) */
.dc-rail .dc-brand-btn:hover,
.dc-rail .dc-brand-btn:active,
.dc-rail .dc-brand-btn:focus-visible,
.dc-brand-btn:hover,
.dc-brand-btn:active,
.dc-brand-btn:focus-visible{
  background: #000 !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Disable older "brand hue/pulse/jitter" effects coming from legacy overrides.
   User wants: no color cycling / no double overlays, only the subtle spark. */
.dc-brand-btn .dc-brand-img,
.dc-brand-btn:hover .dc-brand-img{
  animation: none !important;
  transform: none !important;
  filter: none !important;
}
.dc-brand-btn,
.dc-brand-btn:hover{
  transform: none !important;
}

/* Disable any legacy pseudo-elements on the brand button itself.
   The moving spark is rendered by .np-wrap.np-rail::after (above). */
.dc-brand-btn::before,
.dc-brand-btn::after{
  content: none !important;
  animation: none !important;
  opacity: 0 !important;
}