/* 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;
}

@media (max-width: 765px){
  /* Mobile / tablet:
     the fixed masked lobes are expensive and can visually lag behind scroll,
     which creates the "transparent frame" effect. Keep the rest of the visual
     system, but remove these two heavy layers on small screens. */
  body::before,
  body::after{
    content: none;
  }
}