/* buttons.css - Cleaned for Browser Use */
      :root {
      --c-black: #000000;
      --c-white: #FFFFFF;
      --c-hot-pink: #FF007A;
      --c-yellow: #FFFF00;
      --c-dark-yellow: #FFCB00;
      --c-lime: #83FF07;
      --c-mint: #00FFA1;
      --c-orange: #FF8500;
      --c-blue: #006AFF;
      --c-vermillion: #FF4229;
      --c-purple: #B648FB;
    }
.btn {
  /* Use the font defined in your root, or a fallback */
  font-family: 'Antonio', sans-serif; 
  font-weight: 400;
  font-style: normal;
  text-transform: none; /* Fixed 'normal' to 'none' for valid CSS */
  padding: 15px 30px;
  cursor: pointer;
  font-size: clamp(24px, 3.46vw - 18.46px, 34px);
  display: inline-block;
  outline: 0;
  border-radius: 0px;
  color: #000;
  background-color: transparent;
  text-align: center;
  border: 0px;
  text-decoration: none; /* Ensure link underlines don't appear */
}

@media (max-width: 767px) {
  .btn {
    font-size: 24px;
    padding: 10px 20px;
  }
}

/* --- COLOR VARIANTS (Mapped to your HTML :root vars) --- */

/* RED BUTTON (This is the one in your HTML) */
.btn.btn-red {
  border-color: var(--c-hot-pink);
  color: #fff;
  background-color: var(--c-hot-pink);
}

.btn.btn-mint {
  border-color: var(--c-mint);
  color: #000;
  background-color: var(--c-mint);
}
.btn.btn-yellow {
  border-color: var(--c-yellow);
  color: #000;
  background-color: var(--c-yellow);
}
.btn.btn-dark-yellow {
  border-color: var(--c--dark-yellow);
  color: #000;
  background-color: var(--c-dark-yellow);
}
.btn.btn-vermillion {
  border-color: var(--c-vermillion);
  color: #fff;
  background-color: var(--c-vermillion);
}
.btn.btn-orange {
  border-color: var(--c-orange);
  color: #000;
  background-color: var(--c-orange);
}
.btn.btn-purple {
  border-color: var(--c-purple);
  color: #000;
  background-color: var(--c-purple);
}
.btn.btn-black {
  border-color: var(--c-black);
  color: #fff;
  background-color: var(--c-black);
}
/* --- MAGNETIC EFFECT CSS --- */

.btn.magnetic {
  position: relative;
  overflow: hidden;
  /* Initialize CSS variables */
  --fill: 0;
  --origin: 50% 50%;
  /* Ensure z-index allows interaction */
  z-index: 1; 
}

/* The expanding circle background */
.btn.magnetic::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0; /* 'inset: 0' works in modern browsers, this is safer fallback */
  background: #fff;
  
  /* Transformation logic */
  transform: scaleX(var(--fill));
  transform-origin: var(--origin);
  
  /* Performance */
  pointer-events: none;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(.23,.13,.23,1);
  z-index: -1; /* Move behind the text */
}

/* The Text inside the button */
.btn.magnetic .cta-text {
  position: relative;
  z-index: 2; /* Must be higher than ::before */
  display: inline-block;
  pointer-events: none; /* Let mouse pass through to button container */
  transition: color .25s ease;
  will-change: transform, color;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .btn.magnetic::before,
  .btn.magnetic .cta-text {
    transition: none;
  }
}