/*
* Background elements
*/


/* positioning
–––––––––––––––––––––––––––––––––––––––––––––––––– */





.background-wrapper {
  position: relative; 
  width: 100%;
  height: 100%;
 

}



.background-svg {
  position: absolute; 
  width: 100%;
  height: 100%;
  display: flex; 
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Prevents blocking clicks */
 transition: transform 0.1s ease-out;
}




.animate-on-scroll {
  font-size: 2rem;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  transform: translateY(0);
  transition: transform 0.1s ease-out;
}





/* Apply to all shapes with IDs */
#shape-01z, #shape-03z, #shape-05z {
    animation: glitch 5s infinite linear alternate;
    opacity: 1;
    position: relative;
}

#shape-02z, #shape-04z {
    animation: glitch 7s infinite linear alternate;
    opacity: 1;
    position: relative;
}



@keyframes glitch {
    0% { transform: translate(0); opacity: 1; filter: hue-rotate(0deg); }
    20% { transform: translate(-1px, 2px); opacity: 0.92; filter: hue-rotate(20deg); }
    40% { transform: translate(1px, -1px); opacity: 0.87; filter: hue-rotate(-20deg); }
    60% { transform: translate(-1px, 1px); opacity: 0.9; filter: hue-rotate(10deg); }
    80% { transform: translate(1px, -1px); opacity: 0.95; filter: hue-rotate(-10deg); }
    100% { transform: translate(0); opacity: 1; filter: hue-rotate(0deg); }
}


.static-motion {
  background: 
    repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 0/2500px 2500px,
    repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 60% 60%/2500px 2500px;
  background-blend-mode: difference;
  animation: b .2s infinite alternate;

}


@keyframes b{
  0% {background-position: 50% 0, 60% 50%}
  10% {background-position: 100% 0, 20% 20%}
  100% {background-position: 0% 0, 0% 0%}
}


.static-still {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(#0000 0.000045%, #000 0.0005%);
  mix-blend-mode: overlay;
  opacity: .4;
  transition:0.8s;
 



}



/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Smaller than mobile */
@media (max-width: 400px) {}

/* Smaller than phablet (also point when grid becomes active) */
@media (max-width: 550px) {



}

/* Smaller than tablet */
@media (max-width: 749px) {


  

}





/* Smaller than desktop */
@media (max-width: 1000px) {




}