@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&display=swap");
.color-root {
  --primary: 280, 95%;
  --secondary: 265, 95%;
  --neutral-50: hsla(265, 49%, 92%, 1);
  --neutral-100: hsl(279, 78%, 79%);
  --neutral-200: hsl(0, 0%, 100%);
}

/* * {
  font-family: "Hanken Grotesk", sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
} */

.color-box {
  background-color: rgba(0, 0, 0, 0.26);
  /* background-image: radial-gradient(hsla(var(--secondary), 3%, 1) 20%, transparent 20%); */
  background-position: 0 0;
  background-size: 2rem 2rem;
}

/* button {
  border: none;
  outline: none;
  cursor: pointer;
  font-size: clamp(0.6rem, 0.4rem + 0.4vw, 0.8rem);
  font-weight: 500;
} */

.card__title h4 {
  font-size: clamp(0.8rem, 0.1rem + 1.4vw, 1.5rem);
}

.card__description p {
  font-size: clamp(0.6rem, 0.4rem + 0.4vw, 0.8rem);
}

.shine-content {
  display: flex;
  justify-content: center;
  height: 100vh;
}

.box-cards {
  display: grid;
  width: 1200px;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  gap: 1rem;
  margin: auto;
}

.box-cards:hover > .edge-card::before {
  opacity: 1;
}

.edge-card {
  position: relative;
  border-radius: 0.5rem;
  height: 256px;
  background-color: hsla(var(--secondary), 10%, 1);
  transition: cubic-bezier(0.3, 0.8, 0.5, 0.5) all 0.2s;
  background-image: radial-gradient(hsla(var(--secondary), 3%, 1) 20%, transparent 20%);
  background-position: 0 0;
  background-size: 2rem 2rem;
  box-shadow: 0px 0px 0px 4px hsla(var(--secondary), 5%, 0);
}
.edge-card:hover {
  box-shadow: 0px 0px 0px 4px hsla(var(--secondary), 5%, 1);
}
.edge-card:active {
  transform: scale(0.98);
}
.card__background {
  position: absolute;
  border-radius: inherit;
  inset: 1px;
  background: hsla(var(--secondary), 5%, 1) 0%;
}
.card__background-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  content: "";
  background: radial-gradient(256px circle at var(--mouse-x) var(--mouse-y), hsla(var(--primary), 5%, 1) 0%, hsla(var(--secondary), 5%, 1) 100%);
  opacity: 0;
  transition: cubic-bezier(0.3, 0.8, 0.5, 0.5) all 0.7s;
}
.edge-card:hover .card__background-glow {
  opacity: 1;
}
.card__content {
  position: relative;
  height: 100%;
  padding: 2rem;
  overflow: hidden;
  user-select: none;
}
.card__title {
  padding-bottom: 1rem;
  color: var(--neutral-100);
}
.card__description {
  color: var(--neutral-200);
  height: 20rem;
  white-space: pre-line;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .card__btn {
  position: absolute;
  bottom: 0;
  margin-bottom: 2rem;
} */
.edge-card::before, .edge-card::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  transition: opacity 0.5s cubic-bezier(0.3, 0.8, 0.5, 0.5);
}
.edge-card::before {
  opacity: 0;
  background: radial-gradient(384px circle at var(--mouse-x) var(--mouse-y), hsla(var(--secondary), 45%, 1), transparent 50%);
}
.edge-card::after {
  opacity: 0;
  background: radial-gradient(128px circle at var(--mouse-x) var(--mouse-y), hsla(var(--secondary), 45%, 1), transparent 40%);
  filter: blur(6rem);
  z-index: -1;
  transition-duration: 1s;
}
.edge-card:hover::before, .edge-card:hover::after {
  opacity: 1;
}

/* .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  background: radial-gradient(circle at 50% 100%, hsla(var(--primary), 50%, 1) 0%, hsla(var(--secondary), 50%, 1) 100%);
  color: var(--neutral-50);
  border-radius: 2rem;
  padding: 0.8rem 1.5rem;
  transition: cubic-bezier(0.3, 0.8, 0.5, 0.5) all 0.2s;
  box-shadow: 0px 0px 0px 4px hsla(var(--secondary), 25%, 0);
}
.btn:hover {
  box-shadow: 0px 0px 0px 4px hsla(var(--secondary), 25%, 1);
}
.btn::after {
  content: "";
  position: absolute;
  background: inherit;
  filter: blur(4rem);
  inset: -2px;
  opacity: 0.2;
  transition: cubic-bezier(0.3, 0.8, 0.5, 0.5) all 0.5s;
}
.btn:hover::after {
  opacity: 0.5;
}
.btn:active {
  transform: scale(0.9);
}
.btn::before {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, transparent, hsla(var(--secondary), 85%, 1), transparent);
  width: 1.5rem;
  height: 1px;
  top: 0;
  opacity: 0.5;
  transform: translateX(0%);
}
.btn:hover::before {
  opacity: 1;
  transform: translateX(var(--mouse-x));
}
.btn:not(:hover)::before {
  transition: all 1s cubic-bezier(0.3, 0.8, 0.5, 0.5);
} */

@media screen and (max-width: 1000px) {
  .box-cards {
    grid-template-columns: repeat(1, 1fr);
  }
}