@property --openv1{
  syntax: '<percentage>'; /* its type */
  inherits: false;
  initial-value: 0%; /* the initial value */
}
@property --openv2{
  syntax: '<percentage>'; /* its type */
  inherits: false;
  initial-value: 0%; /* the initial value */
}
@property --openv3{
  syntax: '<percentage>'; /* its type */
  inherits: false;
  initial-value: 100%; /* the initial value */
}

:root{
  --opend: 900ms;
}

@keyframes open {
  0% 
  {
    --openv1:0%; 
    --openv2:0%;
    --openv3:100%;
  }

  50%
  {
    --openv1:0%;
    --openv2:0%;
  } 

  100% 
  {
    --openv1:50%; 
    --openv2:100%;
    --openv3:0%;
  }
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 20%) var(--openv1),  rgba(0, 0, 0, 100%) var(--openv2));
  /* background-color: rgba(0, 0, 0, 0.2); Schwarzes Overlay mit 50% Transparenz */
  pointer-events: none; /* Verhindert, dass das Overlay Klicks blockiert */
  animation-name: open;
  animation-duration: var(--opend);
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation-name: open;
  animation-duration: var(--opend);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  opacity: var(--openv3);
}