/* --- Custom properties registration (pour les animations fluides) --- */
@property --pos-x { syntax: '<percentage>'; initial-value: 11.14%; inherits: false; }
@property --pos-y { syntax: '<percentage>'; initial-value: 140%;   inherits: false; }
@property --spread-x { syntax: '<percentage>'; initial-value: 150%; inherits: false; }
@property --spread-y { syntax: '<percentage>'; initial-value: 180.06%; inherits: false; }

@property --color-1 { syntax: '<color>'; initial-value: #000;     inherits: false; }
@property --color-2 { syntax: '<color>'; initial-value: #08012c;  inherits: false; }
@property --color-3 { syntax: '<color>'; initial-value: #4e1e40;  inherits: false; }
@property --color-4 { syntax: '<color>'; initial-value: #70464e;  inherits: false; }
@property --color-5 { syntax: '<color>'; initial-value: #88394c;  inherits: false; }

@property --border-angle   { syntax: '<angle>'; initial-value: 20deg; inherits: true; }
@property --border-color-1 { syntax: '<color>'; initial-value: hsla(340, 75%, 60%, 0.2);  inherits: true; }
@property --border-color-2 { syntax: '<color>'; initial-value: hsla(340, 75%, 40%, 0.75); inherits: true; }

@property --stop-1 { syntax: '<percentage>'; initial-value: 37.35%; inherits: false; }
@property --stop-2 { syntax: '<percentage>'; initial-value: 61.36%; inherits: false; }
@property --stop-3 { syntax: '<percentage>'; initial-value: 78.42%; inherits: false; }
@property --stop-4 { syntax: '<percentage>'; initial-value: 89.52%; inherits: false; }
@property --stop-5 { syntax: '<percentage>'; initial-value: 100%;   inherits: false; }

/* --- Bouton gradient hover (scopé) --- */
.gradient-btn {
  /* Base: sombre teinté violet (plus lumineux) */
  --pos-x: 12%;
  --pos-y: 135%;
  --spread-x: 155%;
  --spread-y: 185%;
  --color-1: #1a1c30;
  --color-2: #1f2342;
  --color-3: #242a55;
  --color-4: #21264f;
  --color-5: #1d2249;
  --border-angle: 135deg;
  --border-color-1: rgba(91, 66, 243, .6);  /* plus lumineux */
  --border-color-2: rgba(159, 68, 211, .8); /* plus lumineux */
  /* Accent variables (utilisées pour la lueur de bordure et le sheen) */
  --edge-1: rgba(91,66,243,.38);
  --edge-2: rgba(159,68,211,.14);
  --sheen-1: rgba(91,66,243,.14);
  --sheen-2: rgba(159,68,211,.16);
  /* Glow (texte + icône) */
  --glow-1: rgba(159,68,211,.45);
  --glow-2: rgba(91,66,243,.35);
  /* Stops progressifs = dégradé plus doux */
  --stop-1: 22%;
  --stop-2: 54%;
  --stop-3: 76%;
  --stop-4: 90%;
  --stop-5: 100%;

  border-radius: 11px;
  padding: 13px 31px;
  min-width: 132px;
  font-size: 16px;
  line-height: 19px;
  font: inherit;
  letter-spacing: inherit;
  font-weight: 600;
  color: rgba(255 255 255 / 95%);
  border: none;
  position: relative;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  appearance: none;
  overflow: hidden;              /* pour le sheen */
  will-change: transform, filter;
  background: radial-gradient(
    var(--spread-x) var(--spread-y) at var(--pos-x) var(--pos-y),
    var(--color-1) var(--stop-1),
    var(--color-2) var(--stop-2),
    var(--color-3) var(--stop-3),
    var(--color-4) var(--stop-4),
    var(--color-5) var(--stop-5)
  );
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.95);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    --pos-x 0.5s,
    --pos-y 0.5s,
    --spread-x 0.5s,
    --spread-y 0.5s,
    --color-1 0.5s,
    --color-2 0.5s,
    --color-3 0.5s,
    --color-4 0.5s,
    --color-5 0.5s,
    --border-angle 0.5s,
    --border-color-1 0.5s,
    --border-color-2 0.5s,
    --stop-1 0.5s,
    --stop-2 0.5s,
    --stop-3 0.5s,
    --stop-4 0.5s,
    --stop-5 0.5s,
    transform .18s ease,
    filter .22s ease,
    text-shadow .22s ease,
    color .22s ease;
}

.gradient-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  /* Border highlight follows cursor via --pos-x/--pos-y */
  background-image:
    radial-gradient(140% 160% at var(--pos-x) var(--pos-y),
      var(--edge-1), var(--edge-2) 45%, transparent 65%),
    linear-gradient(var(--border-angle), var(--border-color-1), var(--border-color-2));
  /* masque pour ne garder que le bord */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Sheen léger qui traverse le bouton au hover */
.gradient-btn::after{
  content: '';
  position: absolute;
  inset: -30% -120%;
  /* Sheen teinté aux violets du site (légèrement plus lumineux) */
  background: linear-gradient(
    120deg,
    transparent 0%,
    var(--sheen-1) 28%,
    var(--sheen-2) 46%,
    var(--sheen-1) 64%,
    transparent 100%
  );
  transform: translateX(-60%);
  opacity: 0;
  pointer-events: none;
}

.gradient-btn:hover {
  /* Supprime l'effet color shift: garde le même gradient, juste un léger éclaircissement */
  filter: brightness(1.06) saturate(1.04);
  transform: scale(1.015);
  /* Glow texte */
  text-shadow: 0 0 8px var(--glow-1), 0 0 14px var(--glow-2);
}
.gradient-btn svg{ transition: filter .22s ease; }
.gradient-btn:hover svg{ filter: drop-shadow(0 0 6px var(--glow-1)) drop-shadow(0 0 12px var(--glow-2)); }
.gradient-btn:hover::after{
  opacity: 1;
  /* Plus lent et plus fluide */
  animation: btn-sheen 1400ms cubic-bezier(.2,.6,.2,1) forwards;
}

.gradient-btn:active{ transform: scale(.985); }

@keyframes btn-sheen{
  from { transform: translateX(-65%); }
  to   { transform: translateX(65%); }
}

@media (prefers-reduced-motion: reduce){
  .gradient-btn{ transition: none; }
  .gradient-btn:hover{ transform: none; filter: none; }
  .gradient-btn::after{ display:none; }
}

/* (retour au style initial CodePen) */

/* Variante grise ("Se connecter") */
.gradient-btn--gray{
  /* Fond gris foncé subtil */
  --color-1: #121316;
  --color-2: #15161a;
  --color-3: #181a1f;
  --color-4: #191b20;
  --color-5: #13151a;
  /* Bordure en dégradé gris clair */
  --border-color-1: rgba(255,255,255,.10);
  --border-color-2: rgba(255,255,255,.10);
  /* Lueur/grain neutre (pas de violet) */
  --edge-1: rgba(255,255,255,.22);
  --edge-2: rgba(255,255,255,.08);
  --sheen-1: rgba(255,255,255,.08);
  --sheen-2: rgba(255,255,255,.10);
  /* Glow neutre (texte + icône) */
  --glow-1: rgba(255,255,255,.35);
  --glow-2: rgba(255,255,255,.22);
}