/* hello sunny day 

http://pads.osp.kitchen/p/declarations-stlukas-extensions

-not a timer -> a budget of page/element load per user
-not every reques is equal -> a instraram video will burn your budget quicly, on wikipedia your budhet last longer
-how do you use your "internet/scrolling" credit ?
-page elements falling apart? video game-like elements? collecting coins/credits -> gamification? 
-stress induced scrolling | meditation 

*/

/* Select all images on the website */
img {
  /* Convert the image to black and white */
  filter: grayscale(1) contrast(2);

  /* Apply the pixelated rendering for the bitmap effect */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges; /* For Firefox support */
}

/* variables */

:root {
  --timer: 100s;
}

/* progress bar */

body::after {
    content: "";
    position: fixed;
    z-index: 9999; 
    bottom: 2%;
    right: 2%;
    height: 96%;
    width: 5%;
    /*opacity: 50%;*/
    border-radius: 1em;
    border-style: solid;
    border-widht: 0.1em;
    border-color: grey;
    background-color: green;
    animation: progressBar var(--timer) cubic-bezier(0.76, 0, 0.24, 1);
    animation-iteration-count: infinite;
}

/* progress bar animation */
@keyframes progressBar {
    0% {
        height: 96%;
        background-color: green;
        }
    25% {
        background-color: yellow;
        }
    50% {
        height: 0%;
        background-color: red;
        }
        75% {
            background-color: yellow;
        }
        
    100% {
        height: 96%;
        background-color: green;
        }
    }



/* Apply the fade effect */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0; /* Start fully transparent */
  pointer-events: none; 
  z-index: 9999; /* Ensure it's on top of everything */
  animation: fadeToBlack var(--timer) linear forwards; /* ...-minute fade */
  animation-iteration-count: infinite;
}

/* Keyframes for the fade-to-black animation */
@keyframes fadeToBlack {
  0% {
    opacity: 0;
  }
  
  25% {
      opacity: 0; 
  }
  
  50% {
      opacity: 1; 
  }

  75% {
      opacity: 1; 
  }
      
  100% {
    opacity: 0;
  }
}