/* === npq25 Effects (auto-generated) === */

/* --- bg-gradient-mesh --- */
.npq25-mesh{background:linear-gradient(135deg,var(--bg-0) 0%,var(--bg-1) 25%,var(--bg-2) 50%,var(--bg-1) 75%,var(--bg-0) 100%);background-size:400% 400%;animation:npq25-mesh 20s ease infinite}
@keyframes npq25-mesh{0%,100%{background-position:0% 50%}25%{background-position:100% 0%}50%{background-position:100% 100%}75%{background-position:0% 100%}}


/* --- text-gradient-animated --- */
.npq25-grad-text{background:linear-gradient(90deg,var(--accent),var(--text),var(--accent));background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:npq25-grad 3s ease-in-out infinite}
@keyframes npq25-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}


/* --- css-property-gradient --- */
/* CSS @property Animated Gradients — native CSS, no JS */
/* 2026 feature: Chrome 85+, Safari 16.4+, Edge 85+ */
/* Use for: neon, cyberpunk, bold moods. Hero backgrounds, card borders */

@property --npq25-grad-1 {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff00ff;
}

@property --npq25-grad-2 {
  syntax: '<color>';
  inherits: false;
  initial-value: #00ffff;
}

@property --npq25-grad-3 {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff8800;
}

/* Animated gradient background */
.npq25-animated-gradient {
  background: linear-gradient(135deg, var(--npq25-grad-1), var(--npq25-grad-2), var(--npq25-grad-3));
  animation: npq25-grad-cycle 6s ease-in-out infinite;
}

@keyframes npq25-grad-cycle {
  0%, 100% {
    --npq25-grad-1: var(--accent);
    --npq25-grad-2: var(--bg-1);
    --npq25-grad-3: var(--accent);
  }
  33% {
    --npq25-grad-1: var(--bg-1);
    --npq25-grad-2: var(--accent);
    --npq25-grad-3: var(--bg-2);
  }
  66% {
    --npq25-grad-1: var(--accent);
    --npq25-grad-2: var(--bg-2);
    --npq25-grad-3: var(--accent);
  }
}

/* Animated gradient text */
.npq25-grad-text-native {
  background: linear-gradient(90deg, var(--npq25-grad-1), var(--npq25-grad-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: npq25-grad-text-shift 4s ease-in-out infinite;
}

@keyframes npq25-grad-text-shift {
  0%, 100% { --npq25-grad-1: var(--accent); --npq25-grad-2: var(--text); }
  50% { --npq25-grad-1: var(--text); --npq25-grad-2: var(--accent); }
}

/* Animated gradient border */
.npq25-grad-border {
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.npq25-grad-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--npq25-grad-1), var(--npq25-grad-2));
  z-index: -1;
  animation: npq25-grad-cycle 6s ease-in-out infinite;
}


/* --- anim-neural-pulse --- */
/* Neural Pulse Scan Animation — found on vortex-official.org */
/* Use for: cyberpunk, neon, bold */
.npq25-neural {
  position: relative;
  overflow: hidden;
}
.npq25-neural::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: npq25-neural-scan 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes npq25-neural-scan {
  0%, 100% { top: 0%; opacity: 0; }
  10% { opacity: 0.6; }
  50% { top: 100%; opacity: 0.6; }
  60% { opacity: 0; }
}