/* ── Rotating border angle ── */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ── Fill animation angle ── */
@property --fill-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ──────────────────────────── BUTTON ──────────────────────────── */

.btn-light {
    /* Layout */
    position: relative;
    transform: translateY(50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    z-index: 1;

    padding: 2px;
    border-radius: 50px;
    border: none;

    background: conic-gradient(
        from var(--angle),
        var(--black) 0deg,
        var(--black) 170deg,
        rgba(255, 255, 250, 0.95) 210deg,
        rgba(103, 67, 255, 0.85)  240deg,  /* --violet-light */
        rgba(188, 0, 132, 0.40)   270deg,  /* --gradient-2 */
        var(--black) 305deg,
        var(--black) 360deg
    );

    animation: btn-rotate 3.5s linear infinite;

    /* mouse tracking */
    --mouse-x: 50%;
    --mouse-y: 50%;
}

/* ── Outer halo ── */
.btn-light::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 62px;

  background:
    conic-gradient(
      from -90deg,
      rgba(255, 255, 250, 0.45)              0deg,
      rgba(62, 0, 255, 0.55)                 calc(var(--fill-angle) * 0.5),  /* --violet */
      rgba(188, 0, 132, 0.30)                var(--fill-angle),             /* --gradient-2 */
      transparent                            var(--fill-angle)
    ),
    conic-gradient(
      from var(--angle),
      transparent                0deg,
      transparent                170deg,
      rgba(62, 0, 255, 0.6)      205deg,
      rgba(255, 255, 250, 0.7)   230deg,
      rgba(188, 0, 132, 0.5)     255deg,
      transparent                290deg
    );

  filter: blur(30px);
  animation: btn-rotate 3.5s linear infinite;
  --fill-angle: 0deg;
  opacity: 0.8;
  transition:
    --fill-angle 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    filter       0.4s ease,
    opacity      0.2s ease;
  z-index: -1;
}

.btn-light:hover::before {
  --fill-angle: 360deg;
  filter: blur(22px);
  opacity: 1;
}

/* ── Hover : remplissage progressif du border ── */
.btn-light::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: conic-gradient(
    from -90deg,
    rgba(255, 255, 250, 0.95)               0deg,
    rgba(103, 67, 255, 0.85)                calc(var(--fill-angle) * 0.5),  /* --violet-light */
    rgba(188, 0, 132, 0.55)                 var(--fill-angle),             /* --gradient-2 */
    transparent                             var(--fill-angle)
  );
  --fill-angle: 0deg;
  opacity: 0;
  transition:
    --fill-angle 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    opacity      0.2s ease;
}

.btn-light:hover::after {
  --fill-angle: 360deg;
  opacity: 1;
}

@keyframes btn-rotate {
  to { --angle: 360deg; }
}

/* ────────────────────────────INNER FILL──────────────────────────── */
.btn-light span {
  display: block;
  position: relative;
  z-index: 1;
  padding: 14px 34px;
  border-radius: 48px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: 0.02em;
  transition: background 0.4s ease;
}

.btn-light:hover span {
  background: var(--black);
}

/* ── Mouse-follow inner shine ── */
.btn-light span::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 48px;
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 250, 0.2) 0%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.btn-light:hover span::after {
  opacity: 1;
}