/* Animated gradient/glow button styles (Discover / Send message) */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 13rem;
  overflow: hidden;
  height: 3rem;
  background-size: 300% 300%;
  cursor: pointer;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  transition: 0.5s;
  animation: gradient_301 5s ease infinite;
  border: double 4px transparent;
  background-image: linear-gradient(#212121, #212121),
    linear-gradient(137.48deg, #ffdb3b 10%, #fe53bb 45%, #8f51ea 67%, #0044ff 87%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  color: #ffffff;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  text-decoration: none;
  position: relative; /* ensure stars/glow are positioned within button */
  box-shadow: 0 8px 24px rgba(216, 180, 255, 0.25);
}

/* Keep text white in all interactive states */
.btn:link,
.btn:visited {
  color: #ffffff;
}
.btn:hover,
.btn:focus-visible {
  color: #ffffff;
}

.container-stars {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
}

.glow {
  position: absolute;
  display: flex;
  width: 12rem;
}

.circle {
  width: 100%;
  height: 30px;
  filter: blur(2rem);
  animation: pulse_3011 4s infinite;
  z-index: -1;
}

.circle:nth-of-type(1) { background: rgba(254, 83, 186, 0.636); }
.circle:nth-of-type(2) { background: rgba(142, 81, 234, 0.704); }

.btn:hover .container-stars { z-index: 0; background-color: #212121; }
.btn:hover { transform: scale(1.1); }
.btn:active { border: double 4px #fe53bb; background-origin: border-box; background-clip: content-box, border-box; animation: none; }
.btn:active .circle { background: #fe53bb; }

.stars {
  position: relative;
  background: transparent;
  width: 200rem;
  height: 200rem;
}
.stars::after {
  content: "";
  position: absolute;
  top: -10rem;
  left: -100rem;
  width: 100%;
  height: 100%;
  animation: animStarRotate 90s linear infinite;
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
}
.stars::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: animStar 60s linear infinite;
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
  opacity: 0.5;
}

/* Ensure button label stays above animated layers */
.btn .btn-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Animated layers shouldn't capture pointer events */
.btn .container-stars,
.btn .glow { pointer-events: none; }

@keyframes animStar {
  from { transform: translateY(0); }
  to   { transform: translateY(-135rem); }
}
@keyframes animStarRotate {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0); }
}
@keyframes gradient_301 {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pulse_3011 {
  0% { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); }
  70% { transform: scale(1);    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
  100% { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* Loader styles (scoped) */
.loader {
  --uib-size: 45px;
  --uib-color: black;
  --uib-speed: 2.5s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--uib-size);
  width: var(--uib-size);
}
.loader-slice {
  position: relative;
  height: calc(var(--uib-size) / 6);
  width: 100%;
}
.loader-slice::before,
.loader-slice::after {
  --uib-a: calc(var(--uib-speed) / -2);
  --uib-b: calc(var(--uib-speed) / -6);
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - var(--uib-size) / 12);
  height: 100%;
  width: calc(100% / 6);
  border-radius: 50%;
  background-color: var(--uib-color);
  flex-shrink: 0;
  animation: orbit var(--uib-speed) linear infinite;
  transition: background-color 0.3s ease;
}
.loader-slice:nth-child(1)::after { animation-delay: var(--uib-a); }
.loader-slice:nth-child(2)::before { animation-delay: var(--uib-b); }
.loader-slice:nth-child(2)::after { animation-delay: calc(var(--uib-a) + var(--uib-b)); }
.loader-slice:nth-child(3)::before { animation-delay: calc(var(--uib-b) * 2); }
.loader-slice:nth-child(3)::after { animation-delay: calc(var(--uib-a) + var(--uib-b) * 2); }
.loader-slice:nth-child(4)::before { animation-delay: calc(var(--uib-b) * 3); }
.loader-slice:nth-child(4)::after { animation-delay: calc(var(--uib-a) + var(--uib-b) * 3); }
.loader-slice:nth-child(5)::before { animation-delay: calc(var(--uib-b) * 4); }
.loader-slice:nth-child(5)::after { animation-delay: calc(var(--uib-a) + var(--uib-b) * 4); }
.loader-slice:nth-child(6)::before { animation-delay: calc(var(--uib-b) * 5); }
.loader-slice:nth-child(6)::after { animation-delay: calc(var(--uib-a) + var(--uib-b) * 5); }
@keyframes orbit {
  0%   { transform: translateX(calc(var(--uib-size) * 0.25)) scale(0.73684); opacity: 0.65; }
  5%   { transform: translateX(calc(var(--uib-size) * 0.235)) scale(0.684208); opacity: 0.58; }
  10%  { transform: translateX(calc(var(--uib-size) * 0.182)) scale(0.631576); opacity: 0.51; }
  15%  { transform: translateX(calc(var(--uib-size) * 0.129)) scale(0.578944); opacity: 0.44; }
  20%  { transform: translateX(calc(var(--uib-size) * 0.076)) scale(0.526312); opacity: 0.37; }
  25%  { transform: translateX(0%) scale(0.47368); opacity: 0.3; }
  30%  { transform: translateX(calc(var(--uib-size) * -0.076)) scale(0.526312); opacity: 0.37; }
  35%  { transform: translateX(calc(var(--uib-size) * -0.129)) scale(0.578944); opacity: 0.44; }
  40%  { transform: translateX(calc(var(--uib-size) * -0.182)) scale(0.631576); opacity: 0.51; }
  45%  { transform: translateX(calc(var(--uib-size) * -0.235)) scale(0.684208); opacity: 0.58; }
  50%  { transform: translateX(calc(var(--uib-size) * -0.25)) scale(0.73684); opacity: 0.65; }
  55%  { transform: translateX(calc(var(--uib-size) * -0.235)) scale(0.789472); opacity: 0.72; }
  60%  { transform: translateX(calc(var(--uib-size) * -0.182)) scale(0.842104); opacity: 0.79; }
  65%  { transform: translateX(calc(var(--uib-size) * -0.129)) scale(0.894736); opacity: 0.86; }
  70%  { transform: translateX(calc(var(--uib-size) * -0.076)) scale(0.947368); opacity: 0.93; }
  75%  { transform: translateX(0%) scale(1); opacity: 1; }
  80%  { transform: translateX(calc(var(--uib-size) * 0.076)) scale(0.947368); opacity: 0.93; }
  85%  { transform: translateX(calc(var(--uib-size) * 0.129)) scale(0.894736); opacity: 0.86; }
  90%  { transform: translateX(calc(var(--uib-size) * 0.182)) scale(0.842104); opacity: 0.79; }
  95%  { transform: translateX(calc(var(--uib-size) * 0.235)) scale(0.789472); opacity: 0.72; }
  100% { transform: translateX(calc(var(--uib-size) * 0.25)) scale(0.73684); opacity: 0.65; }
}