/* =====================================
   foreground-pink.css
   Deux lobes ROSES (gauche et droite), plus aucun violet.
   Basé sur foreground.css fourni.
   ===================================== */

:root{
  /* Couleurs (rose des deux côtés) */
  --left-hsl: 340 90% 60%;   /* rose pétant */
  --right-hsl: 340 90% 60%;  /* rose pétant */

  /* Corrections par lobe — homogénéisées */
  --left-opacity: 0.18;
  --right-opacity: 0.18;
  --left-sat: 0.45;
  --right-sat: 0.45;
  --left-bright: 1;  --left-contrast: 1;  --left-hue: 0deg;
  --right-bright:1;  --right-contrast:1;  --right-hue:0deg;

  /* Placement latéral (écarté du centre) */
  --left-x: 9%;            --left-y: 50%;
  --right-x: calc(100% - var(--left-x));
  --right-y: var(--left-y);

  /* Taille & ultra-fondu */
  --left-rx: 42vw;         --left-ry: 24vw;
  --left-soft: calc(var(--left-rx) - 2vw);
  --right-rx: var(--left-rx);
  --right-ry: var(--left-ry);
  --right-soft: var(--left-soft);

  /* Blend & plan z */
  --sb-blend: screen;
  --sb-z: 17;
}

html, body { height: 100%; }

/* Lobe gauche (rose) */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--sb-z);
  background: hsl(var(--left-hsl) / var(--left-opacity));
  filter: saturate(var(--left-sat)) brightness(var(--left-bright)) contrast(var(--left-contrast)) hue-rotate(var(--left-hue));
  mix-blend-mode: var(--sb-blend);
  -webkit-mask-image: radial-gradient(
    ellipse var(--left-rx) var(--left-ry) at var(--left-x) var(--left-y),
    #000 0,
    #000 calc(var(--left-rx) - var(--left-soft)),
    transparent var(--left-rx)
  );
  -webkit-mask-repeat: no-repeat;
  mask-image: radial-gradient(
    ellipse var(--left-rx) var(--left-ry) at var(--left-x) var(--left-y),
    #000 0,
    #000 calc(var(--left-rx) - var(--left-soft)),
    transparent var(--left-rx)
  );
  mask-repeat: no-repeat;
}

/* Lobe droit (rose) */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--sb-z);
  background: hsl(var(--right-hsl) / var(--right-opacity));
  filter: saturate(var(--right-sat)) brightness(var(--right-bright)) contrast(var(--right-contrast)) hue-rotate(var(--right-hue));
  mix-blend-mode: var(--sb-blend);
  -webkit-mask-image: radial-gradient(
    ellipse var(--right-rx) var(--right-ry) at var(--right-x) var(--right-y),
    #000 0,
    #000 calc(var(--right-rx) - var(--right-soft)),
    transparent var(--right-rx)
  );
  -webkit-mask-repeat: no-repeat;
  mask-image: radial-gradient(
    ellipse var(--right-rx) var(--right-ry) at var(--right-x) var(--right-y),
    #000 0,
    #000 calc(var(--right-rx) - var(--right-soft)),
    transparent var(--right-rx)
  );
  mask-repeat: no-repeat;
}