/*  ██████╗ █████╗ ██████╗ ██████╗ ███████╗     ██████╗███████╗███████╗ */
/* ██╔════╝██╔══██╗██╔══██╗██╔══██╗██╔════╝    ██╔════╝██╔════╝██╔════╝ */
/* ██║     ███████║██████╔╝██║  ██║███████╗    ██║     ███████╗███████╗ */
/* ██║     ██╔══██║██╔══██╗██║  ██║╚════██║    ██║     ╚════██║╚════██║ */
/* ╚██████╗██║  ██║██║  ██║██████╔╝███████║    ╚██████╗███████║███████║ */
/*  ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═════╝ ╚══════╝     ╚═════╝╚══════╝╚══════╝ */
/**************************************************************
 * MAIN CARDS — GENERAL STYLING
 * These rules define the structure, animation, and layout for
 * the interactive project cards inside the scroll menu.
 **************************************************************/
/* ==========================================================
   CARD CONTAINER
   Base frame for each card (used in scroll sections)
   ========================================================== */
.card {
  position: relative;
  background: var(--dark-pink);
  border: 3px solid var(--black);
  box-shadow: 10px 10px 0 var(--black);
  width: auto;
  height: auto;
  /* Animation & Transition */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transform: translateZ(0); /* enable GPU acceleration */
  overflow: hidden; /* ensures inner effects don’t overflow */
}
/**************************************************************
 * CARD HEADER — .head
 * Top bar containing title text and scrolling ticker.
 **************************************************************/
.head {
  position: relative;
  background: var(--neon-blue);
  border-bottom: 3px solid var(--black);
  padding: 14px 20px;
  font-size: large;
  font-weight: 700;
  color: var(--text);
}
/* ==========================================================
   HEADER TICKER STRIP
   Displays scrolling text marquee inside the header.
   ========================================================== */
.head .ticker {
  margin-top: 10px;
  font-size: large;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  border-top: 3px solid var(--black);
  padding-top: 8px;
  color: var(--text);
}
/* Inner <b> tag is animated left → right using keyframes */
.head .ticker b {
  animation: marq 20s linear infinite;
  display: inline-block;
  padding-right: 32px;
  color: var(--text);
}
/* ==========================================================
   KEYFRAMES — MARQUEE SCROLL
   ========================================================== */
@keyframes marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
/**************************************************************
 * CARD CONTENT SECTION
 * Container for text, lists, avatars, and buttons.
 **************************************************************/
.content {
  width: auto;
  height: auto;
  color: var(--text);
}
/* ==========================================================
   FEATURE LIST (unordered list inside cards)
   ========================================================== */
.content .list {
  margin: 16px 0 8px 0;
  padding-left: 0;
  list-style: none;
  box-sizing: border-box;
  color: var(--text);
}
.content .list li {
  position: relative;
  padding-left: 22px;
  margin: 10px 0;
  box-sizing: border-box;
}
/* Custom bullet icon (pixel-art style) */
.content .list li::before {
  content: "▣";
  position: absolute;
  left: 0;
  top: -2px;
  color: var(--neon-blue);
  text-shadow: 2px 2px 0 var(--black);
}