/* ============================================================
   Vaape.ai — Theme Extensions v2.0
   ============================================================ */

/* Text gradient — lime to white */
.text-gradient {
  background: linear-gradient(135deg, var(--lime) 0%, #E8FF80 50%, var(--lime-dim) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow text */
.text-glow { text-shadow: 0 0 20px rgba(202,255,0,0.5); }

/* Animate fade in up */
.animate-fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.animate-fade-in-up.visible { opacity: 1; transform: none; }

/* Delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* Number ticker animation */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.stat-value { animation: countUp 0.5s ease forwards; }

/* Glow border on hover — for any card */
.glow-on-hover { transition: var(--transition-slow); }
.glow-on-hover:hover {
  border-color: var(--lime-border) !important;
  box-shadow: 0 0 24px rgba(202,255,0,0.12), 0 4px 32px rgba(0,0,0,0.6);
}

/* Money tag — gold accent */
.money-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--gold-dim); border: 1px solid rgba(255,184,0,0.3);
  border-radius: var(--radius-full); padding: 3px 10px;
  font-size: 0.75rem; font-weight: 800;
  color: var(--gold); letter-spacing: 0.04em;
}

/* Vaape gradient accent line */
.accent-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  margin: var(--space-xl) 0;
}

/* Landing hero text color overrides */
.hero-title .accent { color: var(--lime); }

/* CTA glow button */
.btn-lime {
  background: var(--lime);
  color: #000;
  border-color: var(--lime);
  font-weight: 800;
}
.btn-lime:hover {
  background: #D8FF26;
  box-shadow: var(--shadow-lime);
  transform: translateY(-2px);
}

/* Small dot live indicator */
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--lime);
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 4px var(--lime); }
  50%       { box-shadow: 0 0 14px var(--lime), 0 0 24px rgba(202,255,0,0.3); }
}

/* Page transition */
body { opacity: 0; transition: opacity 0.2s ease; }
body.loaded { opacity: 1; }