/* home-overlay-digital-frame-light.css
   LEFT + RIGHT frames only (no menu overlay)
   - Circular feathered spot with a single solid color
   - Spots positioned differently for left (blue) and right (pink) frames
*/

:root{
  --ov-color: 270 100% 70%; /* couleur unique en HSL (ex: 300=rose/violet) */
  --ov-opacity: .07;
  --ov-blend: screen;

  /* Default spot controls */
  --spot-size: 30%;
  --soft-edge: 40%;
  --spot-x: 50%;
  --spot-y: 50%;
}

.category.blue-neon,
.category.pink-neon{
  position: relative;
  isolation: isolate;
  contain: paint;
}

.category.blue-neon::after,
.category.pink-neon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:10px;
  pointer-events:none;
  z-index: 5;
  mix-blend-mode: var(--ov-blend);

  background: radial-gradient(
    circle at var(--spot-x) var(--spot-y),
    hsl(var(--ov-color) / var(--ov-opacity)) 0%,
    hsl(var(--ov-color) / var(--ov-opacity)) var(--spot-size),
    transparent calc(var(--spot-size) + var(--soft-edge))
  );
}

/* Position spécifique pour chaque cadre */

/* Cadre violet (blue-neon) → spot en haut à droite */
.category.blue-neon::after {
  --spot-x: 100%;
  --spot-y: 0%;
}

/* Cadre rose (pink-neon) → spot en haut à gauche */
.category.pink-neon::after {
  --spot-x: 0%;
  --spot-y: 0%;
}