@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  --bgDark: #080808;
  --primaryPurple: #5c27e5;
  --textWhite: #fff;
  --textGray: #a0a0a0;

  --colorNavBlack: #111111;
  --colorNavCream: #F8F7F2;
  --colorNavOrange: #FF552E;
  --colorNavBlue: #797EF6;
  --colorNavYellow: #FFC900;
  --colorNavLime: #CCFF00;

  --purpleLight: #E4B1E6;
  --purpleDark: #571AFD;

  --fontHero: "Luckiest Guy", cursive;
  --fontBody: "Inter", sans-serif;
  --fontCode: "Fira Code", "Cascadia Code", Consolas, monospace;
}

/* SHARED BRAND GRADIENT UTILITY */
.highlightPurple,
.textPurple {
  background: linear-gradient(to right, var(--purpleLight), var(--purpleDark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* AMBIENT BACKGROUND GLOW */
.blobLeft,
.blobRight {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(150px);
  z-index: 1;
  pointer-events: none;
}

.blobLeft {
  top: 15%;
  left: 0;
  background-color: var(--purpleLight);
  opacity: 0.2;
}

.blobRight {
  top: 20%;
  right: 0;
  background-color: var(--purpleDark);
  opacity: 0.2;
}

/* GAMIFIED POP-IN ENTRANCE ANIMATION */
@keyframes cardPopIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  65% {
    opacity: 1;
    transform: translateY(-2px) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}