/* ============================================================
   glow-card.css
   Carte avec spotlight qui suit le curseur — bordure et fond
   éclairés par un radial-gradient HSL. La teinte dérive autour
   de la couleur de base selon la position horizontale du
   curseur (mécanisme --xp × --spread de l'original easemize).

   Vanilla pur, zéro dépendance. Couplé à glow-card.js qui
   injecte les variables --x, --y, --xp, --yp sur les cartes.

   Cible : [data-glow-card]
   ============================================================ */

:root {
  /* Teinte de base = vert luciole HSL ≈ hsl(82, 86%, 69%)
     #C9F26B → H 82, S 86%, L 69%. Configurable par projet. */
  --glow-card-base-hue: 82;
  --glow-card-saturation: 86;
  --glow-card-lightness: 69;
  /* Amplitude de dérive de teinte autour de --base, pilotée par --xp (0→1)
     spread = 200 → dérive de ±100° autour du vert (vert-jaune ↔ vert-bleu) */
  --glow-card-spread: 200;
}

[data-glow-card] {
  /* === Paramètres réglables par carte via data-attributes ou inline === */
  --gc-radius: 16;          /* rayon des coins (px) */
  --gc-border: 1;           /* épaisseur de la bordure base (px) — discret par défaut */
  --gc-size: 200;           /* taille du spotlight (px) */
  --gc-bg-spot-opacity: 0.10;     /* opacité du fond éclairé */
  --gc-border-spot-opacity: 1.0;  /* opacité du halo de bordure (intensité forte) */
  --gc-border-light-opacity: 1.0; /* opacité du point blanc surcuit */
  --gc-brightness: 2.0;     /* multiplicateur de brillance du halo bordure */
  --gc-outer: 1;            /* opacité du blur externe */
  --gc-backdrop: hsl(0 0% 60% / 0.06); /* fond de carte au repos */
  --gc-backup-border: var(--gc-backdrop);

  /* === Calculs internes — ne pas modifier === */
  --gc-border-size: calc(var(--gc-border, 1) * 1px);
  --gc-spotlight-size: calc(var(--gc-size, 200) * 1px);
  /* Dérive de teinte : base + (xp × spread). xp est 0→1 sur la largeur viewport. */
  --gc-hue: calc(var(--glow-card-base-hue) + (var(--xp, 0.5) * var(--glow-card-spread)));

  position: relative;
  border-radius: calc(var(--gc-radius) * 1px);
  border: var(--gc-border-size) solid var(--gc-backup-border);
  background-color: var(--gc-backdrop);
  background-image: radial-gradient(
    var(--gc-spotlight-size) var(--gc-spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(
      var(--gc-hue, 82)
      calc(var(--glow-card-saturation) * 1%)
      calc(var(--glow-card-lightness) * 1%)
      / var(--gc-bg-spot-opacity, 0.10)
    ),
    transparent
  );
  background-size:
    calc(100% + (2 * var(--gc-border-size)))
    calc(100% + (2 * var(--gc-border-size)));
  background-position: 50% 50%;
  background-attachment: fixed; /* le gradient suit le viewport, pas la carte */
  touch-action: none;
}

/* === Bordure éclairée (le halo principal) ===
   Technique mask-composite : on dessine un radial-gradient sur les pseudo-
   éléments, puis on masque tout sauf la bordure. Résultat : la bordure
   s'éclaire à l'endroit où le curseur passe. */
[data-glow-card]::before,
[data-glow-card]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--gc-border-size) * -1);
  border: var(--gc-border-size) solid transparent;
  border-radius: calc(var(--gc-radius) * 1px);
  background-attachment: fixed;
  background-size:
    calc(100% + (2 * var(--gc-border-size)))
    calc(100% + (2 * var(--gc-border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* mask-composite : on garde uniquement la bande de bordure */
  -webkit-mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: destination-out;
  mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
}

/* Halo coloré sur la bordure (75% du spot, brightness boost) */
[data-glow-card]::before {
  background-image: radial-gradient(
    calc(var(--gc-spotlight-size) * 0.75)
    calc(var(--gc-spotlight-size) * 0.75) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(
      var(--gc-hue, 82)
      calc(var(--glow-card-saturation) * 1%)
      calc(var(--glow-card-lightness) * 1%)
      / var(--gc-border-spot-opacity, 1.0)
    ),
    transparent 100%
  );
  filter: brightness(var(--gc-brightness, 2.0));
}

/* Point blanc surcuit au cœur du spot (50% du spot) */
[data-glow-card]::after {
  background-image: radial-gradient(
    calc(var(--gc-spotlight-size) * 0.5)
    calc(var(--gc-spotlight-size) * 0.5) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(0 100% 100% / var(--gc-border-light-opacity, 1.0)),
    transparent 100%
  );
}

/* === Blur externe (halo flou ambiant) ===
   Un enfant [data-glow-card-glow] est inséré par le JS pour porter
   un blur amplifié — donne l'impression que le halo "déborde" de la
   carte sans casser les pseudo-éléments principaux. */
[data-glow-card] > [data-glow-card-glow] {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--gc-radius) * 1px);
  filter: blur(calc(var(--gc-border-size) * 10));
  opacity: var(--gc-outer, 1);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    calc(var(--gc-spotlight-size) * 0.75)
    calc(var(--gc-spotlight-size) * 0.75) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(
      var(--gc-hue, 82)
      calc(var(--glow-card-saturation) * 1%)
      calc(var(--glow-card-lightness) * 1%)
      / 0.4
    ),
    transparent 100%
  );
  background-attachment: fixed;
  background-size:
    calc(100% + (2 * var(--gc-border-size)))
    calc(100% + (2 * var(--gc-border-size)));
}

/* === Accessibilité : reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  [data-glow-card] {
    background-image: none;
    border-color: var(--color-accent, #C9F26B);
  }
  [data-glow-card]::before,
  [data-glow-card]::after,
  [data-glow-card] > [data-glow-card-glow] {
    display: none;
  }
}