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

/* --- bg-gradient-mesh --- */
.nkz68-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:nkz68-mesh 20s ease infinite}
@keyframes nkz68-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 --- */
.nkz68-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:nkz68-grad 3s ease-in-out infinite}
@keyframes nkz68-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}


/* --- anim-shield-pulse --- */
/* Shield Pulse Animation — found on official-ares.org */
/* Use for: bold, corporate, elegant. Security-themed sections */
.nkz68-shield-pulse {
  position: relative;
}
.nkz68-shield-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: nkz68-shield-pulse 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes nkz68-shield-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.08); opacity: 0; }
}


/* --- 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 --nkz68-grad-1 {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff00ff;
}

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

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

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

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

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

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

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