/* ============================================================
   OVERLAY GLOBAL — Révélation progressive par slide (zéro cercle parasite)
   ============================================================ */

/* Intensité d'assombrissement (modifiable) */
:root{ --spot-darkness: .65; }

/* Conteneur de l'overlay, positionné par le JS en "fixed" au-dessus du slider */
#spot-container{
  position: fixed;         /* le JS met left/top/width/height */
  left:0; top:0; width:0; height:0;
  pointer-events: none;
  z-index: 9999;           /* au-dessus des images du slider */
  isolation: isolate;
}

/* Calque sombre avec "trou" circulaire (le trou grandit) */
#spot-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background: rgba(0,0,0,var(--spot-darkness));

  /* 2 masques : 1) cercle (trou), 2) plein (fond) */
  -webkit-mask-image:
    radial-gradient(circle closest-side, transparent 99%, #000 100%),
    linear-gradient(#000 0 0);
          mask-image:
    radial-gradient(circle closest-side, transparent 99%, #000 100%),
    linear-gradient(#000 0 0);

  /* position du trou (définie par le JS : --x / --y) */
  -webkit-mask-position: var(--x,50%) var(--y,50%), 0 0;
          mask-position: var(--x,50%) var(--y,50%), 0 0;

  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;

  /* trou FERMÉ par défaut (diamètre 0) + pas de transitions implicites */
  -webkit-mask-size: 0 0, 100% 100%;
          mask-size: 0 0, 100% 100%;
  -webkit-mask-composite: destination-out;
          mask-composite: exclude;

  opacity: 0;             /* masqué tant qu'on n'a pas d'image "pleine" */
  transition: none;
}

/* Anneau optionnel autour du trou (activé si --ring > 0 via JS) */
#spot-ring{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:#fff; mix-blend-mode: overlay;
  -webkit-mask-image:
    radial-gradient(circle closest-side,
      transparent calc(50% - var(--ring,0px)/2 - .5px),
      #000        calc(50% - var(--ring,0px)/2),
      #000        calc(50% + var(--ring,0px)/2),
      transparent calc(50% + var(--ring,0px)/2 + .5px));
          mask-image:
    radial-gradient(circle closest-side,
      transparent calc(50% - var(--ring,0px)/2 - .5px),
      #000        calc(50% - var(--ring,0px)/2),
      #000        calc(50% + var(--ring,0px)/2),
      transparent calc(50% + var(--ring,0px)/2 + .5px));
  -webkit-mask-position: var(--x,50%) var(--y,50%);
          mask-position: var(--x,50%) var(--y,50%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;

  /* fermé + invisible par défaut */
  -webkit-mask-size: 0 0; mask-size: 0 0;
  opacity: 0; transition: none;
}

/* ===== États utilisés par le JS ===== */

/* Lancement de la révélation (une seule fois par slide) */
#spot-overlay.anim{
  transition:
    -webkit-mask-size var(--speed,.7s) var(--ease,ease-out) var(--delay,.1s),
            mask-size var(--speed,.7s) var(--ease,ease-out) var(--delay,.1s),
            opacity     var(--speed,.7s) var(--ease,ease-out) var(--delay,.1s);
}
#spot-ring.anim{
  transition:
    -webkit-mask-size var(--speed,.7s) var(--ease,ease-out) var(--delay,.1s),
            mask-size var(--speed,.7s) var(--ease,ease-out) var(--delay,.1s),
            opacity     var(--speed,.7s) var(--ease,ease-out) var(--delay,.1s);
}

/* État final (trou ouvert à la taille cible, visible) */
#spot-overlay.final{
  opacity:1;
  -webkit-mask-size: calc(var(--r,18%) * 2) calc(var(--r,18%) * 2), 100% 100%;
          mask-size: calc(var(--r,18%) * 2) calc(var(--r,18%) * 2), 100% 100%;
}
#spot-ring.final{
  opacity:.85;
  -webkit-mask-size: calc(var(--r,18%) * 2) calc(var(--r,18%) * 2);
          mask-size: calc(var(--r,18%) * 2) calc(var(--r,18%) * 2);
}

/* Pendant un crossfade (2 images visibles), cache l'overlay */
.crossfading #spot-overlay,
.crossfading #spot-ring{ opacity:0 !important; }

/* Accessibilité : si “réduction animations” → pas de transitions */
@media (prefers-reduced-motion: reduce){
  #spot-overlay, #spot-ring{ transition: none !important; }
}