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

/* --- bg-noise-grain --- */
.ddb73-noise::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}


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


/* --- cards-neon-border --- */
.ddb73-neon-card{border:1px solid var(--accent);box-shadow:0 0 5px var(--accent-glow),inset 0 0 5px var(--accent-glow);transition:box-shadow .3s}
.ddb73-neon-card:hover{box-shadow:0 0 15px var(--accent-glow),0 0 30px var(--accent-glow),inset 0 0 10px var(--accent-glow)}


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

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

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

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

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

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

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

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