/* home-overlay-backdrop.css — TOPMOST (au-dessus de tout, sauf étoiles)
   Variante: rose plus saturé mais un PEU MOINS OPAQUE
   (Basée sur la version précédente) */

:root{
  /* Couleurs */
  --left-hsl: 270 95% 55%;   /* violet (gauche) */
  --right-hsl: 340 90% 60%;  /* rose plus pétant */

  /* Corrections par lobe */
  --left-opacity: 0.4;
  --right-opacity: 0.18;     /* <<< opacité réduite */
  --left-sat: 0.25;
  --right-sat: 0.45;         /* saturation augmentée */
  --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 (milieu sombre/transparent) */
  --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 (au-dessus de tout, sous les étoiles) */
  --sb-blend: screen;
  --sb-z: 17;

  /* === Clip rectangle de l'overlay (injecté par wide-outer-frame.js) ===
     Valeurs par défaut = viewport complet si le JS ne tourne pas. */
  --fo-clip-left: 0px;
  --fo-clip-top: 0px;
  --fo-clip-width: 100vw;
  --fo-clip-height: 100vh;

  /* Feather (diffusion des bords) : 0px = bord net */
  --fo-feather: 230px;
}

html, body { height: 100%; overflow-x: clip; }

/* Lobe gauche (violet) */
body::before{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;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);

  /* 1) Rectangle (zone du cadre) avec feather  +  2) masque radial du lobe
     => intersection des masques, sans toucher aux couleurs/filters */
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0,
      #000 var(--fo-feather),
      #000 calc(100% - var(--fo-feather)),
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0,
      #000 var(--fo-feather),
      #000 calc(100% - var(--fo-feather)),
      transparent 100%),
    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-size:
    var(--fo-clip-width) var(--fo-clip-height),
    var(--fo-clip-width) var(--fo-clip-height),
    100% 100%;
  -webkit-mask-position:
    var(--fo-clip-left) var(--fo-clip-top),
    var(--fo-clip-left) var(--fo-clip-top),
    0 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in, source-in;

  mask-image:
    linear-gradient(to right,
      transparent 0,
      #000 var(--fo-feather),
      #000 calc(100% - var(--fo-feather)),
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0,
      #000 var(--fo-feather),
      #000 calc(100% - var(--fo-feather)),
      transparent 100%),
    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-size:
    var(--fo-clip-width) var(--fo-clip-height),
    var(--fo-clip-width) var(--fo-clip-height),
    100% 100%;
  mask-position:
    var(--fo-clip-left) var(--fo-clip-top),
    var(--fo-clip-left) var(--fo-clip-top),
    0 0;
  mask-repeat: no-repeat;
  mask-composite: intersect, intersect;
}

/* Lobe droit (rose plus saturé, un peu moins opaque) */
body::after{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;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:
    linear-gradient(to right,
      transparent 0,
      #000 var(--fo-feather),
      #000 calc(100% - var(--fo-feather)),
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0,
      #000 var(--fo-feather),
      #000 calc(100% - var(--fo-feather)),
      transparent 100%),
    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-size:
    var(--fo-clip-width) var(--fo-clip-height),
    var(--fo-clip-width) var(--fo-clip-height),
    100% 100%;
  -webkit-mask-position:
    var(--fo-clip-left) var(--fo-clip-top),
    var(--fo-clip-left) var(--fo-clip-top),
    0 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in, source-in;

  mask-image:
    linear-gradient(to right,
      transparent 0,
      #000 var(--fo-feather),
      #000 calc(100% - var(--fo-feather)),
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0,
      #000 var(--fo-feather),
      #000 calc(100% - var(--fo-feather)),
      transparent 100%),
    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-size:
    var(--fo-clip-width) var(--fo-clip-height),
    var(--fo-clip-width) var(--fo-clip-height),
    100% 100%;
  mask-position:
    var(--fo-clip-left) var(--fo-clip-top),
    var(--fo-clip-left) var(--fo-clip-top),
    0 0;
  mask-repeat: no-repeat;
  mask-composite: intersect, intersect;
}