/* ----- CURTAIN SLIDE FADE ----- */

@property --slide-fade-start {
  syntax: '<color>';
  inherits: false;
  initial-value: #ffffff;
}

@property --slide-fade-end {
  syntax: '<color>';
  inherits: false;
  initial-value: #ffffff;
}

@keyframes slideFadeAnim {
  0% {
    --slide-fade-start: rgb(from var(--current-bg-color) r g b / 1);
    --slide-fade-end: rgb(from var(--current-bg-color) r g b / 1);
  }
  50% {
    --slide-fade-start: rgb(from var(--current-bg-color) r g b / 0);
	--slide-fade-end: rgb(from var(--current-bg-color) r g b / 1);
  }
  100% {
    --slide-fade-start: rgb(from var(--current-bg-color) r g b / 0);
    --slide-fade-end: rgb(from var(--current-bg-color) r g b / 0);
  }
}

.slide-fade {
  background-image: linear-gradient(
    90deg,
    var(--slide-fade-start),
    var(--slide-fade-end)
  );
}

.slide-fade.exit {
  animation: 0.75s linear 0s 1 normal forwards slideFadeAnim;
}

.slide-fade.enter {
animation: 0.4s linear 0s 1 reverse forwards slideFadeAnim;
}

/* ----- /CURTAIN SLIDE FADE ----- */


/* ----- CURTAIN ----- */

#curtain {
--slide-fade-start: rgb(from var(--current-bg-color) r g b / 1);
  --slide-fade-end: rgb(from var(--current-bg-color) r g b / 1);
  display: flex;
  justify-content: center; 
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9989;
  cursor: none;
}

/* ----- /CURTAIN ----- */


/* ----- FIZZ EFFECT ----- */

.fizz-effect:hover,
.fizz-effect:active,
.fizz-effect.is-active {
  background-image: 
  radial-gradient(circle, rgba(255, 255, 255, 0.7) 1px, transparent 2px),
  radial-gradient(circle, rgba(255, 255, 255, 0.4) 2px, transparent 3px),
  radial-gradient(circle, rgba(255, 255, 255, 0.9) 1.5px, transparent 2px);
  background-size: 20px 20px, 30px 30px, 40px 40px;
  animation: fizz-loop 2s linear infinite;
}

@keyframes fizz-loop {
  0% {
    background-position: 0 120px, 15px 120px, 25px 120px;
  }
  100% {
    background-position: 0 0, 15px 0, 25px 0;
  }
} 

/* ----- /FIZZ EFFECT ----- */