:root {
  --ambientSaturationFactor: 0.55;

  /* Opacity animation settings */
  --ambientOpacityMax: 0.18; /* max (valeur haute) */
  --ambientOpacityMin: 0;    /* min (0) */

  /* Cycle timing (total = 300s = 5 min) */
  --ambientHoldHigh: 120s;   /* rester au max */
  --ambientFadeDuration: 30s;/* transition max -> 0 (et 0 -> max) */
  --ambientFadeSteps: 60;    /* nombre de paliers pendant les fades (plus = plus lisse, plus coûteux) */
  --ambientHoldLow: 120s;    /* rester à 0 */
}

/* Opacity cycle:
   - Start HIGH (important): hold high -> fade down -> hold low -> fade up -> loop
   With defaults: 120s hold high, 30s fade down, 120s hold low, 30s fade up (total 300s)
*/
@keyframes ambientOpacityCycle {
  0% { opacity: var(--ambientOpacityMax, 0.18); }

  40% {
    opacity: var(--ambientOpacityMax, 0.18);
    /* Paliers UNIQUEMENT sur le segment suivant (fade max -> 0) */
    animation-timing-function: steps(var(--ambientFadeSteps, 60), end);
  } /* hold high (120s/300s) */

  50% {
    opacity: var(--ambientOpacityMin, 0);
    /* Retour au linéaire pour les longues pauses */
    animation-timing-function: linear;
  } /* fade down (30s/300s) */

  90% {
    opacity: var(--ambientOpacityMin, 0);
    /* Paliers UNIQUEMENT sur le segment suivant (fade 0 -> max) */
    animation-timing-function: steps(var(--ambientFadeSteps, 60), end);
  } /* hold low (120s/300s) */

  100% { opacity: var(--ambientOpacityMax, 0.18); } /* fade up (30s/300s) */
}

/* Performance toggle:
   During opacity transitions (fades), temporarily disable the saturate() filter.
   This reduces GPU cost mainly during the moments where the overlay is changing.
   The change is discrete (no interpolation), timed to match the opacity cycle.
*/
@keyframes ambientFilterCycle {
  /* Hold HIGH (0% -> 40%) */
  0%   { filter: saturate(var(--ambientSaturationFactor, 0.55)); }
  40%  { filter: saturate(var(--ambientSaturationFactor, 0.55)); }

  /* Fade DOWN (40% -> 50%) */
  40.01% { filter: none; }
  50%    { filter: none; }

  /* Hold LOW (50% -> 90%) */
  50.01% { filter: saturate(var(--ambientSaturationFactor, 0.55)); }
  90%    { filter: saturate(var(--ambientSaturationFactor, 0.55)); }

  /* Fade UP (90% -> 100%) */
  90.01% { filter: none; }
  100%   { filter: none; }
}



/* Performance hints */
html {
  /* Helps confine mix-blend-mode compositing to the page root */
  isolation: isolate;
}

html::before {
  filter: saturate(var(--ambientSaturationFactor, 0.55));
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 25; /* Ensuring the overlay is on top */
  /* Encourage the browser to keep this on its own composited layer */
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
  background: linear-gradient(to right, #9c8cff, #ff66e0); /* Clear Lavender to Pink gradient */
  mix-blend-mode: screen; /* Maintaining the screen blend mode for a soft interaction */

  /* Start at max opacity on load, then animate */
  opacity: var(--ambientOpacityMax, 0.18);
  animation: ambientOpacityCycle 300s linear infinite, ambientFilterCycle 300s steps(1, end) infinite;

}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html::before {
    animation: none;
    opacity: var(--ambientOpacityMax, 0.18);
  }
}