/* Homepage — étoiles parallax + bouton shiny (couleurs KGD) */

@keyframes animStar {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2000px);
  }
}

@keyframes shiny-cta-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ── Champ d'étoiles (hero) ── */
.kgd-stars-field {
  z-index: 1;
}

.stars-layer {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  border-radius: 50%;
  will-change: transform;
}

.stars-1 {
  width: 1px;
  height: 1px;
  box-shadow:
    234px 124px rgba(255, 255, 255, 0.85),
    654px 345px rgba(255, 255, 255, 0.7),
    876px 12px rgba(167, 139, 250, 0.75),
    1200px 800px rgba(255, 255, 255, 0.8),
    400px 1500px rgba(255, 255, 255, 0.65),
    1800px 200px rgba(123, 63, 228, 0.6),
    100px 1000px rgba(255, 255, 255, 0.75),
    900px 1900px rgba(255, 255, 255, 0.7),
    500px 600px rgba(30, 95, 232, 0.55),
    1400px 100px rgba(255, 255, 255, 0.8),
    300px 400px rgba(255, 255, 255, 0.6),
    1600px 1200px rgba(214, 51, 168, 0.5),
    750px 2200px rgba(255, 255, 255, 0.55),
    1100px 450px rgba(255, 255, 255, 0.7),
    200px 1800px rgba(167, 139, 250, 0.65),
    1700px 1600px rgba(255, 255, 255, 0.6);
  animation: animStar 50s linear infinite;
}

.stars-2 {
  width: 2px;
  height: 2px;
  opacity: 0.75;
  box-shadow:
    123px 456px rgba(255, 255, 255, 0.9),
    789px 234px rgba(123, 63, 228, 0.7),
    456px 890px rgba(255, 255, 255, 0.75),
    1100px 300px rgba(255, 255, 255, 0.8),
    200px 1200px rgba(30, 95, 232, 0.65),
    1500px 500px rgba(255, 255, 255, 0.7),
    600px 1700px rgba(214, 51, 168, 0.55),
    1300px 900px rgba(255, 255, 255, 0.85),
    950px 1400px rgba(255, 90, 54, 0.45),
    350px 750px rgba(255, 255, 255, 0.65),
    1450px 1850px rgba(167, 139, 250, 0.6);
  animation: animStar 80s linear infinite;
}

/* ── Bouton shiny — bordure tournante (compatible tous navigateurs) ── */
#top .shiny-cta,
a.shiny-cta,
button.shiny-cta {
  position: relative !important;
  z-index: 0;
  isolation: isolate;
  overflow: hidden !important;
  border: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: 0 0 28px rgba(123, 63, 228, 0.35);
}

#top .shiny-cta::before,
a.shiny-cta::before,
button.shiny-cta::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 200%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    #1e5fe8 0deg,
    #7b3fe4 90deg,
    #d633a8 180deg,
    #ff5a36 270deg,
    #1e5fe8 360deg
  );
  animation: shiny-cta-spin 2.5s linear infinite;
}

#top .shiny-cta::after,
a.shiny-cta::after,
button.shiny-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px;
  border-radius: inherit;
  background-color: var(--bg-primary, #08080c);
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.35) 0.5px,
    transparent 0
  );
  background-size: 4px 4px;
}

#top .shiny-cta:hover,
a.shiny-cta:hover,
button.shiny-cta:hover {
  box-shadow: 0 0 36px rgba(123, 63, 228, 0.55);
}

#top .shiny-cta > span,
#top .shiny-cta .relative.z-10,
a.shiny-cta > span,
button.shiny-cta > span {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .stars-1,
  .stars-2,
  .shiny-cta::before {
    animation: none;
  }
}