/* Axeddam — effet « spotlight » sur les cartes.

   Portage natif du composant React `GlowCard` (shadcn/Tailwind) : un halo suit
   le curseur à l'échelle de la page et allume la bordure de la carte survolée.
   La teinte est calculée depuis la position horizontale du curseur, bornée sur
   la couleur d'accent de chaque carte pour rester dans la charte.

   Le balisage n'est pas modifié : `js/spotlight.js` pose `data-glow` et insère
   la couche de halo. Sans JS — ou sur écran tactile — les cartes gardent
   exactement leur apparence d'origine. */

[data-glow] {
  /* Géométrie */
  --border: 2;
  --radius: 22;
  --size: 320;
  --border-size: calc(var(--border) * 1px);
  --spotlight-size: calc(var(--size) * 1px);

  /* Teinte : base + course horizontale du curseur (0 → 1) */
  --hue: calc(var(--base, 255) + (var(--xp, 0) * var(--spread, 90)));
  --saturation: 100;
  --lightness: 70;

  /* Intensités */
  --bg-spot-opacity: 0.10;
  --border-spot-opacity: 1;
  --border-light-opacity: 0.75;
  --outer: 0.7;

  position: relative;
  background-color: var(--surface);
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / var(--bg-spot-opacity)),
    transparent
  );
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
  background-attachment: fixed;
  border-width: var(--border-size);
}

/* Anneau lumineux : les deux couches sont masquées pour ne peindre que la
   bordure (intersection « dans la bordure » × « hors du padding-box »). */
[data-glow]::before,
[data-glow]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-attachment: fixed;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
}

/* Couche 1 : la couleur d'accent */
[data-glow]::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / var(--border-spot-opacity)),
    transparent 100%
  );
  filter: brightness(1.7);
}

/* Couche 2 : le cœur blanc, juste sous le curseur */
[data-glow]::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(0 0% 100% / var(--border-light-opacity)),
    transparent 100%
  );
}

/* Couche 3 : le même anneau, élargi et flouté — le halo qui déborde. */
[data-glow] > [data-glow] {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--outer);
  border: none;
  background: none;
  border-radius: calc(var(--radius) * 1px);
  filter: blur(calc(var(--border-size) * 8));
  will-change: filter;
  pointer-events: none;
}

[data-glow] > [data-glow]::before {
  inset: -10px;
  border-width: 10px;
  filter: brightness(1.9);
}

[data-glow] > [data-glow]::after {
  content: none;
}

/* Le contenu de la carte reste au-dessus du halo. */
[data-glow] > *:not([data-glow]) {
  position: relative;
  z-index: 1;
}

/* --- Teintes par carte, calées sur la charte --------------------------- */

/* violet #6C3BFF → rose #FF3D8B */
.service--vitrine[data-glow],
.work--miru[data-glow] {
  --base: 255;
  --spread: 85;
}

/* rose #FF3D8B → orange #FF7A1A */
.service--ecommerce[data-glow],
.work--aza[data-glow] {
  --base: 320;
  --spread: 70;
}

/* turquoise #00D3C0 → cyan */
.service--webapp[data-glow] {
  --base: 168;
  --spread: 45;
}

/* --- Cartes réalisations ------------------------------------------------
   `overflow: hidden` rognerait le halo : la capture porte elle-même ses coins
   arrondis, le débordement n'a plus lieu d'être masqué. */

.work[data-glow] {
  overflow: visible;
}

.work[data-glow] .work__shot {
  border-radius: calc((var(--radius) * 1px) - var(--border-size)) calc((var(--radius) * 1px) - var(--border-size)) 0 0;
}