/* ─────────────────────────────────────────────────────────────
   Beam — halo lumineux animé autour du bouton « Découvrir ».
   Variante « pulse-outside / mono », durée 5s, strength .98.
   Deux couches : un liseré 1px masqué (::after) + un bloom
   extérieur flouté (::before). Les gradients dérivent lentement
   grâce aux custom properties typées ci-dessous.
   ───────────────────────────────────────────────────────────── */

@property --beam-x {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}
@property --beam-y {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}
@property --beam-w {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}
@property --beam-h {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}
@property --beam-opacity {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

[data-beam] {
  position: relative;
  border-radius: 999px;
  overflow: visible;
  isolation: isolate;

  --beam-strength: 0.98;
  --pulse-glow-sx: 0.891;
  --pulse-glow-sy: 0.35;
}

/* Les gradients qui composent le liseré / le bloom. */
[data-beam][data-active]::after,
[data-beam][data-active]::before {
  background: radial-gradient(
      ellipse calc(80px * var(--beam-w) * var(--pulse-glow-sx)) calc(19px * var(--beam-h) * var(--pulse-glow-sy))
        at calc(27% + var(--beam-x)) calc(0% + var(--beam-y)),
      rgba(180, 180, 180, 0.59),
      transparent
    ),
    radial-gradient(
      ellipse calc(74px * var(--beam-h) * var(--pulse-glow-sx)) calc(11px * var(--beam-w) * var(--pulse-glow-sy))
        at calc(73% - var(--beam-x)) calc(-1% - var(--beam-y)),
      rgba(190, 190, 190, 0.69),
      transparent
    ),
    radial-gradient(
      ellipse calc(15px * var(--beam-w) * var(--pulse-glow-sx)) calc(44px * var(--beam-h) * var(--pulse-glow-sy))
        at calc(100% + var(--beam-x)) calc(33% + var(--beam-y)),
      rgba(145, 145, 145, 0.69),
      transparent
    ),
    radial-gradient(
      ellipse calc(19px * var(--beam-h) * var(--pulse-glow-sx)) calc(38px * var(--beam-w) * var(--pulse-glow-sy))
        at calc(101% - var(--beam-x)) calc(72% - var(--beam-y)),
      rgba(165, 165, 165, 0.92),
      transparent
    ),
    radial-gradient(
      ellipse calc(84px * var(--beam-w) * var(--pulse-glow-sx)) calc(13px * var(--beam-h) * var(--pulse-glow-sy))
        at calc(67% - var(--beam-x)) calc(100% + var(--beam-y)),
      rgba(170, 170, 170, 0.92),
      transparent
    ),
    radial-gradient(
      ellipse calc(60px * var(--beam-h) * var(--pulse-glow-sx)) calc(21px * var(--beam-w) * var(--pulse-glow-sy))
        at calc(24% + var(--beam-x)) calc(101% - var(--beam-y)),
      rgba(140, 140, 140, 0.75),
      transparent
    ),
    radial-gradient(
      ellipse calc(17px * var(--beam-w) * var(--pulse-glow-sx)) calc(40px * var(--beam-h) * var(--pulse-glow-sy))
        at calc(0% - var(--beam-x)) calc(60% + var(--beam-y)),
      rgba(160, 160, 160, 0.75),
      transparent
    ),
    radial-gradient(
      ellipse calc(13px * var(--beam-h) * var(--pulse-glow-sx)) calc(32px * var(--beam-w) * var(--pulse-glow-sy))
        at calc(-1% + var(--beam-x)) calc(28% - var(--beam-y)),
      rgba(130, 130, 130, 0.59),
      transparent
    );
}

/* Liseré 1px : le fond est masqué au centre pour ne garder que la bordure. */
[data-beam][data-active]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 1px;
  clip-path: inset(0 round 999px);
  -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;
  z-index: 2;
  will-change: opacity;
  opacity: calc(var(--beam-opacity) * 0.47 * var(--beam-strength));
  filter: brightness(1.9) saturate(1.2);
  animation: beam-drift 5s ease-in-out infinite, beam-pulse 5s ease-in-out infinite;
}

/* Bloom extérieur flouté. */
[data-beam][data-active]::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 1009px;
  transform: scale(0.95, 0.9);
  pointer-events: none;
  will-change: opacity;
  opacity: calc(var(--beam-opacity) * 0.17 * var(--beam-strength));
  filter: blur(3px) brightness(1.9) saturate(1.2);
  animation: beam-drift 5s ease-in-out infinite, beam-pulse 5s ease-in-out infinite;
}

[data-beam] [data-beam-bloom] {
  display: none;
}

@keyframes beam-drift {
  0% {
    --beam-x: -6px;
    --beam-y: -3px;
    --beam-w: 0.72;
    --beam-h: 1.14;
  }
  50% {
    --beam-x: 7px;
    --beam-y: 4px;
    --beam-w: 1.1;
    --beam-h: 0.87;
  }
  100% {
    --beam-x: -6px;
    --beam-y: -3px;
    --beam-w: 0.72;
    --beam-h: 1.14;
  }
}

@keyframes beam-pulse {
  0%,
  100% {
    --beam-opacity: 0.45;
  }
  50% {
    --beam-opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-beam][data-active]::after,
  [data-beam][data-active]::before {
    animation: none;
    --beam-opacity: 0.8;
  }
}