/* Neon Product Banner — Frontend CSS (static animations) */
@keyframes npb-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.npb-animate-blink {
  animation: npb-blink 1s step-start infinite;
}

@keyframes npb-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.npb-animate-fade {
  animation: npb-fadein 0.9s ease-out both;
}

@keyframes npb-slidein {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.npb-animate-slide {
  animation: npb-slidein 0.5s ease-out both;
}

/* Minor responsive niceties */
.npb-product-banner {
  will-change: opacity, transform;
}
@media (max-width: 480px) {
  .npb-product-banner { display:block; }
}

/* --- Enhanced Neon Lighting Effects --- */
@keyframes npb-pulse {
  0%   { text-shadow: inherit; filter: brightness(1); }
  50%  { filter: brightness(1.15); }
  100% { text-shadow: inherit; filter: brightness(1); }
}
.npb-animate-pulse {
  animation: npb-pulse 1.6s ease-in-out infinite;
}

@keyframes npb-flicker {
  0%   { opacity: 0.9; }
  2%   { opacity: 0.4; }
  8%   { opacity: 0.95; }
  10%  { opacity: 0.3; }
  20%  { opacity: 1; }
  22%  { opacity: 0.6; }
  30%  { opacity: 1; }
  35%  { opacity: 0.7; }
  45%  { opacity: 1; }
  55%  { opacity: 0.5; }
  65%  { opacity: 1; }
  75%  { opacity: 0.8; }
  85%  { opacity: 1; }
  100% { opacity: 0.95; }
}
.npb-animate-flicker {
  animation: npb-flicker 2.2s linear infinite;
}

/* Subtle inner glow on the banner box if it has a border */
.npb-product-banner {
  position: relative;
}
.npb-product-banner {
  box-shadow: none; /* will be overridden inline when border color is set */
}


/* --- Modern Neon Glow (border-based, text not glowing) --- */
.npb-product-banner {
  position: relative;
  border-radius: 10px;
}
/* Outer, soft neon bloom driven by --npb-glow (set inline when border color exists) */

/* --- Controller-driven Neon Glow --- */
.npb-product-banner::after {
  content: "";
  position: absolute;
  inset: calc(-0.33 * var(--npb-glow-size, 24px));
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--npb-glow-opacity, 0.7);
  box-shadow:
    0 0 var(--npb-glow-size, 24px) var(--npb-glow, transparent),
    0 0 calc(2 * var(--npb-glow-size, 24px)) var(--npb-glow, transparent),
    0 0 calc(4 * var(--npb-glow-size, 24px)) var(--npb-glow, transparent);
}

/* === v1.5.0 Advanced Effects === */

/* Fix Pulse: animate the glow (::after) directly */
@keyframes npb-pulse-glow {
  0% {
    opacity: var(--npb-glow-opacity, 0.7);
    box-shadow:
      0 0 calc(0.5 * var(--npb-glow-size, 24px)) var(--npb-glow, transparent),
      0 0 calc(1.5 * var(--npb-glow-size, 24px)) var(--npb-glow, transparent),
      0 0 calc(3 * var(--npb-glow-size, 24px)) var(--npb-glow, transparent);
  }
  50% {
    opacity: calc(var(--npb-glow-opacity, 0.7) + 0.15);
    box-shadow:
      0 0 calc(0.8 * var(--npb-glow-size, 24px)) var(--npb-glow, transparent),
      0 0 calc(2.1 * var(--npb-glow-size, 24px)) var(--npb-glow, transparent),
      0 0 calc(4.2 * var(--npb-glow-size, 24px)) var(--npb-glow, transparent);
  }
  100% {
    opacity: var(--npb-glow-opacity, 0.7);
    box-shadow:
      0 0 calc(0.5 * var(--npb-glow-size, 24px)) var(--npb-glow, transparent),
      0 0 calc(1.5 * var(--npb-glow-size, 24px)) var(--npb-glow, transparent),
      0 0 calc(3 * var(--npb-glow-size, 24px)) var(--npb-glow, transparent);
  }
}
.npb-animate-pulse::after {
  animation: npb-pulse-glow 1.8s ease-in-out infinite;
  animation-duration: inherit;
}

/* Soft Breath variant (gentler pulse) */
@keyframes npb-breath-glow {
  0%   { opacity: calc(var(--npb-glow-opacity, 0.7) - 0.1); }
  50%  { opacity: calc(var(--npb-glow-opacity, 0.7) + 0.08); }
  100% { opacity: calc(var(--npb-glow-opacity, 0.7) - 0.1); }
}
.npb-animate-breath::after {
  animation: npb-breath-glow 3s ease-in-out infinite;
  animation-duration: inherit;
}

/* Sheen Sweep: moving highlight across banner */
@keyframes npb-sheen-sweep {
  0%   { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  10%  { opacity: 0.25; }
  50%  { opacity: 0.35; }
  90%  { opacity: 0.15; }
  100% { transform: translateX(120%) skewX(-20deg); opacity: 0; }
}
.npb-animate-sheen {
  position: relative;
  overflow: hidden;
}
.npb-animate-sheen::before {
  content: "";
  position: absolute;
  top: -30%; bottom: -30%;
  width: 40%;
  left: -20%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
  filter: blur(2px);
  pointer-events: none;
  animation: npb-sheen-sweep 2.8s ease-in-out infinite;
  animation-duration: inherit;
}

/* Gradient Shift: animate background position for 2-color gradients */
@keyframes npb-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.npb-animate-gradient {
  background-size: 200% 200%;
  animation: npb-gradient-shift 4s ease-in-out infinite;
  animation-duration: inherit;
}

/* Ensure animation-duration inline applies to element and pseudo-elements */
.npb-animate-flicker,
.npb-animate-blink,
.npb-animate-fade,
.npb-animate-slide,
.npb-animate-gradient,
.npb-animate-sheen,
.npb-animate-pulse,
.npb-animate-breath { animation-duration: inherit; }