/* BLACKSAW2081 LAB v2.9.09
   Winieta: płynne wejście/wyjście + rzeczywiście widoczne pulsowanie. */

.hit-vignette-overlay{
  position:fixed !important;
  inset:-5.5vw !important;
  z-index:1000010 !important;
  pointer-events:none !important;
  opacity:0;
  transform:scale(1.045);
  transition:
    opacity 210ms cubic-bezier(.18,.72,.22,1),
    transform 210ms cubic-bezier(.18,.72,.22,1);
}

.hit-vignette-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 20%,
      rgba(105,0,8,.10) 38%,
      rgba(165,0,12,.42) 61%,
      rgba(255,12,30,.88) 84%,
      rgba(115,0,8,1) 100%
    );
  box-shadow:
    inset 0 0 70px rgba(255,20,38,.64),
    inset 0 0 210px rgba(164,0,12,.76),
    inset 0 0 340px rgba(95,0,8,.54);
  mix-blend-mode:screen;
  opacity:.62;
  transform:scale(1.025);
  filter:brightness(.72) saturate(1.00);
  transform-origin:center;
}

.hit-vignette-overlay.active{
  opacity:1;
  transform:scale(1);
}

.hit-vignette-overlay.active::before{
  animation:hit-vignette-breathe 420ms ease-in-out 160ms infinite alternate;
}

.hit-vignette-overlay.leaving{
  opacity:0;
  transform:scale(1.035);
  transition:
    opacity 230ms ease-in,
    transform 230ms ease-in;
}

.hit-vignette-overlay.leaving::before{
  animation:none;
}

@keyframes hit-vignette-breathe{
  0%{
    opacity:.55;
    filter:brightness(.70) saturate(1.00);
    transform:scale(1.035);
  }
  100%{
    opacity:1;
    filter:brightness(1.28) saturate(1.48);
    transform:scale(.985);
  }
}