:root {
  /* User-customizable variables */
  --card-bg-color1: #ff00ff;
  --card-bg-color2: #00ffff;
  --card-bg-main: #1b1b1b;
  --card-glow-color: #ff00ff;
  --card-stripe-color1: rgba(255,255,255,0.05);
  --card-stripe-color2: rgba(255,255,255,0.1);
  --card-text-color: #fff;
}

/* =======================
   Card Background Themes
   ======================= */
.card-bg-gradient {
  background: linear-gradient(45deg, var(--card-bg-color1), var(--card-bg-color2));
  background-size: 400% 400%;
  animation: gradientPulse 8s ease infinite;
}

@keyframes gradientPulse {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.card-bg-nebula {
  background: radial-gradient(circle at 30% 30%, var(--card-bg-color1), var(--card-bg-color2));
  position: relative;
  overflow: hidden;
}

.card-bg-nebula::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2), transparent 70%);
  animation: nebulaGlow 5s linear infinite;
}

@keyframes nebulaGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.card-bg-stripes {
  background-image: repeating-linear-gradient(
    45deg,
    var(--card-stripe-color1) 0 10px,
    var(--card-stripe-color2) 10px 20px
  );

  background-size: 28.284px 28.284px; /* 20px * √2 */
  animation: stripesMove 4s linear infinite;
}

@keyframes stripesMove {
  from { background-position: 0 0; }
  to   { background-position: 28.284px 28.284px; }
}

.card-bg-glow {
  background: var(--card-bg-main);
  position: relative;
  overflow: hidden;
}

.card-bg-glow::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle, var(--card-glow-color) 0%, transparent 70%);
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}

.card-bg-particles {
  background-color: var(--card-bg-main);
  position: relative;
  overflow: hidden;
}

.card-bg-particles::before {
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.2;
  animation: particleMove 5s linear infinite;
}

@keyframes particleMove {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}

/* =======================
   Text & Content
   ======================= */
.card h1, .card p, .tags span, .social-links a {
  color: var(--card-text-color);
}