/* ██████╗ ██╗   ██╗████████╗████████╗ ██████╗ ███╗   ██╗███████╗ */
/* ██╔══██╗██║   ██║╚══██╔══╝╚══██╔══╝██╔═══██╗████╗  ██║██╔════╝ */
/* ██████╔╝██║   ██║   ██║      ██║   ██║   ██║██╔██╗ ██║███████╗ */
/* ██╔══██╗██║   ██║   ██║      ██║   ██║   ██║██║╚██╗██║╚════██║ */
/* ██████╔╝╚██████╔╝   ██║      ██║   ╚██████╔╝██║ ╚████║███████║ */
/* ╚═════╝  ╚═════╝    ╚═╝      ╚═╝    ╚═════╝ ╚═╝  ╚═══╝╚══════╝ */
/*  ██████╗███████╗███████╗                                       */
/* ██╔════╝██╔════╝██╔════╝                                       */
/* ██║     ███████╗███████╗                                       */
/* ██║     ╚════██║╚════██║                                       */
/* ╚██████╗███████║███████║                                       */
/*  ╚═════╝╚══════╝╚══════╝                                       */
/**************************************************************
 * 🎮 CARD/EMAIL BUTTON STYLES
 * Used for all interactive buttons inside project cards.
 * Consistent pixel-art / neon aesthetic.
 **************************************************************/
/* ==========================================================
   DEFAULT BUTTON STATE
   ========================================================== */
.card-btn {
  /* Layout & Spacing */
  padding: 12px 20px;
  margin-top: 12px;
  /* Borders & Shadows */
  border: 3px solid var(--black);
  box-shadow:
    4px 4px 0 var(--black),      /* pixel-style hard shadow */
    0 0 10px var(--neon-pink);   /* neon glow */
  /* Typography */
  font-family: 'Press Start 2P', cursive;
  font-size: large;
  font-weight: 750; /* bold pixel look */
  /* Visuals */
  background: var(--neon-blue);
  color: var(--text);
  text-decoration: none; /* removes underline for <a> usage */
  /* Interaction */
  cursor: pointer;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
/* ==========================================================
   HOVER STATE
   Slight color and glow swap for interaction feedback.
   ========================================================== */
.card-btn:hover {
  background: var(--neon-pink);
  box-shadow:
    6px 6px 0 var(--black),
    0 0 14px var(--neon-blue);
}
/* ==========================================================
   ACTIVE / PRESSED STATE
   Pixel-style press effect (moves “inward”)
   ========================================================== */
.card-btn:active {
  transform: translate(3px, 3px);
  box-shadow: none; /* flatten shadow on click */
}
/* ==========================================================
  EMAIL BUTTONS
   ========================================================== */
.btn-primary {
  /* Spacing */
  padding: 12px 20px;
  margin-top: 12px;
  /* Border & Glow */
  border: 3px solid var(--black);
  box-shadow:
    4px 4px 0 var(--black),      /* pixel-style hard shadow */
    0 0 10px var(--neon-pink);   /* neon glow */
  /* Typography */
  font-family: 'Press Start 2P', cursive;
  font-size: large;
  font-weight: 750; /* bold pixel font weight */
  /* Visual Style */
  background: var(--neon-blue);
  cursor: pointer;
  /* Smooth transitions on interaction */
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
/* ==========================================================
   HOVER STATE
   Color swap + stronger glow for interaction feedback.
   ========================================================== */
.btn-primary:hover {
  background: var(--neon-pink);
  box-shadow:
    6px 6px 0 var(--black),
    0 0 14px var(--neon-blue);
}
/* ==========================================================
   ACTIVE / PRESSED STATE
   Pixel-style press effect for tactile feel.
   ========================================================== */
.btn-primary:active {
  transform: translate(3px, 3px);
  box-shadow: none; /* flatten the shadow to “press” it */
}