@property --shiny-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:where(.hero-cta,.primary-button,.resource-primary,.shop-primary,.demo-primary,.demo-back) {
  --shiny-rgb: 84,227,147;
  --shiny-color: rgb(var(--shiny-rgb));
  --shiny-soft: #d9ffe8;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid transparent !important;
  color: #f5fff8 !important;
  background:
    linear-gradient(180deg,rgba(7,18,13,.97),rgba(3,9,7,.99)) padding-box,
    conic-gradient(from var(--shiny-angle),transparent 0 18%,var(--shiny-color) 24%,var(--shiny-soft) 28%,var(--shiny-color) 32%,transparent 39% 100%) border-box !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07),0 10px 30px rgba(0,0,0,.25) !important;
  transition: transform .3s ease,box-shadow .3s ease,color .3s ease;
  animation: shiny-border-spin 4.5s linear infinite;
}

.shop-page :where(.shop-primary) {
  --shiny-rgb: var(--carbon-accent-rgb,85,230,149);
  --shiny-soft: rgba(var(--carbon-accent-rgb,85,230,149),.9);
}

body:has(.demo-header) :where(.demo-primary,.demo-back) {
  --shiny-rgb: var(--accent-rgb,85,230,149);
  --shiny-color: var(--accent,#55e695);
  --shiny-soft: var(--accent-soft,#c8f7dc);
}

:where(.hero-cta,.primary-button,.resource-primary,.shop-primary,.demo-primary,.demo-back)::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 165%;
  aspect-ratio: 1;
  left: 50%;
  top: 76%;
  translate: -50% -50%;
  border-radius: 50%;
  background: linear-gradient(-48deg,transparent 42%,rgba(var(--shiny-rgb),.24),transparent 58%);
  mask-image: radial-gradient(circle at bottom,transparent 36%,#000 68%);
  animation: shiny-inner-sweep 8s linear infinite;
  pointer-events: none;
}

:where(.hero-cta,.primary-button,.resource-primary,.shop-primary,.demo-primary,.demo-back):is(:hover,:focus-visible) {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1),0 0 30px rgba(var(--shiny-rgb),.22),0 14px 34px rgba(0,0,0,.32) !important;
}

@keyframes shiny-border-spin { to { --shiny-angle: 360deg; } }
@keyframes shiny-inner-sweep { to { rotate: 360deg; } }

@media(prefers-reduced-motion:reduce) {
  :where(.hero-cta,.primary-button,.resource-primary,.shop-primary,.demo-primary,.demo-back) { animation-duration: 18s; }
  :where(.hero-cta,.primary-button,.resource-primary,.shop-primary,.demo-primary,.demo-back)::before { animation-duration: 24s; opacity: .65; }
}

/* L'accueil possède d'anciennes règles plus spécifiques : cette surcharge
   garantit le même bouton lumineux sans modifier les autres composants. */
body:not(.shop-page) .hero-cta,
body:not(.shop-page) .primary-button {
  border: 1px solid transparent !important;
  background:
    linear-gradient(180deg,rgba(7,18,13,.97),rgba(3,9,7,.99)) padding-box,
    conic-gradient(from var(--shiny-angle),transparent 0 18%,var(--shiny-color) 24%,var(--shiny-soft) 28%,var(--shiny-color) 32%,transparent 39% 100%) border-box !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07),0 10px 30px rgba(0,0,0,.25) !important;
  animation: shiny-border-spin 4.5s linear infinite !important;
}
body:not(.shop-page) .hero-cta::before,
body:not(.shop-page) .primary-button::before {
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  display:block !important;
  width:165% !important;
  aspect-ratio:1 !important;
  left:50% !important;
  top:76% !important;
  translate:-50% -50% !important;
  border-radius:50% !important;
  background:linear-gradient(-48deg,transparent 42%,rgba(var(--shiny-rgb),.24),transparent 58%) !important;
  animation:shiny-inner-sweep 8s linear infinite !important;
}
@media(prefers-reduced-motion:reduce){
  body:not(.shop-page) .hero-cta,
  body:not(.shop-page) .primary-button{animation-duration:18s!important}
  body:not(.shop-page) .hero-cta::before,
  body:not(.shop-page) .primary-button::before{animation-duration:24s!important}
}