/* Animace na pozadí */

#netCanvas {
  display: block;
  position: absolute;
  z-index: -1;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
}

.bg-animated { position: absolute; display: block; z-index: 1; background-repeat: no-repeat; background-size: contain; }


.bg-animated.bezec {
  background-image: url(./img/bezec.png);
  width: 472px;
  height: 659px;
  right: 0;
  bottom: 0;
  background-position: bottom;
  background-position: bottom;
}

.bg-animated.fotbalista {
  background-image: url(./img/fotbalista.png);
  width: 200px;
  height: 160px;
  right: 0;
  bottom: 0px;
  background-position: bottom;
}


.bg-animated.kontejnery {
  background-image: url('./img/kontenery.png');
  background-position: bottom;
  background-size: cover;
  width: 300px;
  height: 150px;
  left: 0;
  bottom: 0px;
}
.bounce-kontejnery { animation: bounce-kontejnery 4s infinite ease-in-out; }
@keyframes bounce-kontejnery {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg); /* výška výskoku + rotace */
  }
}



.glitch-background::before,
.glitch-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  mix-blend-mode: screen;
  opacity: 0.7;
  z-index: 2;
  pointer-events: none;
}

.glitch-background::before {
  animation: glitchTop 1s infinite linear alternate-reverse;
  clip-path: inset(0 0 50% 0);
}

.glitch-background::after {
  animation: glitchBottom 1s infinite linear alternate-reverse;
  clip-path: inset(50% 0 0 0);
}

/* Klíčové snímky animací */
@keyframes glitchTop {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-5px, -3px);
  }
  40% {
    transform: translate(3px, 2px);
  }
  60% {
    transform: translate(-3px, 1px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes glitchBottom {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(5px, 3px);
  }
  40% {
    transform: translate(-3px, -2px);
  }
  60% {
    transform: translate(2px, -1px);
  }
  80% {
    transform: translate(-2px, 2px);
  }
  100% {
    transform: translate(0);
  }
}



.bg-animated.jezdec {
  background-image: url('./img/kolo.png');
  background-position: bottom;
  background-size: cover;
  width: 480px;
  height: 350px;
  right: 0;
  bottom: 0px;
}
.bounce-jezdec { animation: bounce-jezdec 4s infinite ease-in-out; }
@keyframes bounce-jezdec {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
    background-image: url('./img/kolo_sit.png'),url('./img/kolo.png');
  }
  50% {
    transform: translateX(-10px) rotate(0deg); /* výška výskoku + rotace */
    background-image: url('./img/kolo.png');
  }
}


.bg-animated.brusle {
  background-image: url('./img/brusle_sit.png');
  background-position: bottom;
  background-size: cover;
  width: 310px;
  height: 350px;
  left: 100px;
  top: 200px;
}

.bounce-brusle { animation: bounce-brusle 6s infinite ease-in-out; }
@keyframes bounce-brusle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    background-image: url('./img/brusle_sit.png');
  }
  50% {
    transform: translateY(0) rotate(-20deg); /* výška výskoku + rotace */
    background-image: url('./img/brusle.png');
  }
}



.bg-animated.tenis {
  background-image: url('./img/tenisova_raketa.png');
  background-position: bottom;
  background-size: cover;
  width: 310px;
  height: 350px;
  right: 100px;
  top: 250px;
}

.bounce-tenis { animation: bounce-tenis 5s infinite ease-in-out; }
@keyframes bounce-tenis {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    background-image: url('./img/tenisova_raketa_sit.png');
  }
  50% {
    transform: translateY(-100px) rotate(20deg); /* výška výskoku + rotace */
    background-image: url('./img/tenisova_raketa.png');
  }
}



.bg-animated.mic {
  background-image: url('./img/mic_sit.png');
  width: 70px; height: 70px;
  left: 5px; bottom: 0px;
  /*animation: bounce 5s infinite ease-in-out;*/
  /*animation: bouncePhysics 5s infinite alternate;*/
  /*animation: throwBounce 3s infinite forwards;*/

  animation-delay: 2s;
}




.bounce { animation: bounce 5s infinite ease-in-out; }
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px); /* výška výskoku */
  }
}

.bouncePhysics { animation: bouncePhysics 5s infinite alternate; }
@keyframes bouncePhysics {
  0%   { transform: translateY(0) scaleY(1); background-image: url('./img/mic_sit.png'); }
  10%  { transform: translateY(-120px) scaleY(1.05); }
  20%  { transform: translateY(0) scaleY(0.8); }
  30%  { transform: translateY(-100px) scaleY(1.03);  }
  40%  { transform: translateY(0) scaleY(0.85); background-image: url('./img/mic.png'); }
  50%  { transform: translateY(-60px) scaleY(1.02); background-image: url('./img/mic_sit.png'); }
  60%  { transform: translateY(0) scaleY(0.88); }
  70%  { transform: translateY(-30px) scaleY(1.01); }
  80%  { transform: translateY(0) scaleY(0.9); }
  90%  { transform: translateY(-10px) scaleY(1); }
  95%  { transform: translateY(0) scaleY(1);  } /* konec animace */
  100% { transform: translateY(0) scaleY(1); } /* pauza - žádná změna */
}

@keyframes throwBounce {
  0%   {
    transform: translate(0, 0) scaleY(1);
  }
  10%  {
    transform: translate(100px, -150px) scaleY(1.05); /* 1. výskok */
  }
  20%  {
    transform: translate(200px, 0) scaleY(0.8);       /* dopad */
  }
  30%  {
    transform: translate(270px, -100px) scaleY(1.03); /* 2. výskok */
  }
  40%  {
    transform: translate(340px, 0) scaleY(0.85);
  }
  50%  {
    transform: translate(390px, -60px) scaleY(1.02);
  }
  60%  {
    transform: translate(440px, 0) scaleY(0.88);
  }
  70%  {
    transform: translate(470px, -30px) scaleY(1.01);
  }
  80%  {
    transform: translate(500px, 0) scaleY(0.9);
  }
  90%  {
    transform: translate(520px, -10px) scaleY(1);
  }
  100% {
    transform: translate(540px, 0) scaleY(1);
  }
}



/* err anim */
.error {
  /*position: relative;*/
  display: inline-block;
}

.error::before,
.error::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.error::before {
  animation: noise-anim-2 3s infinite linear alternate-reverse;
  clip: rect(0, 900px, 0, 0);
  transform: translateX(-2px);
}

.error::after {
  animation: noise-anim 2s infinite linear alternate-reverse;
  clip: rect(0, 900px, 0, 0);
  transform: translateX(2px);
}

@keyframes noise-anim {
  0% { clip: rect(32px, 9999px, 16px, 0); }
  5% { clip: rect(5px, 9999px, 24px, 0); }
  10% { clip: rect(77px, 9999px, 87px, 0); }
  15% { clip: rect(91px, 9999px, 95px, 0); }
  20% { clip: rect(74px, 9999px, 9px, 0); }
  25% { clip: rect(37px, 9999px, 32px, 0); }
  30% { clip: rect(56px, 9999px, 27px, 0); }
  35% { clip: rect(35px, 9999px, 33px, 0); }
  40% { clip: rect(89px, 9999px, 6px, 0); }
  45% { clip: rect(81px, 9999px, 77px, 0); }
  50% { clip: rect(64px, 9999px, 69px, 0); }
  55% { clip: rect(12px, 9999px, 11px, 0); }
  60% { clip: rect(59px, 9999px, 11px, 0); }
  65% { clip: rect(69px, 9999px, 59px, 0); }
  70% { clip: rect(74px, 9999px, 65px, 0); }
  75% { clip: rect(56px, 9999px, 79px, 0); }
  80% { clip: rect(80px, 9999px, 64px, 0); }
  85% { clip: rect(87px, 9999px, 29px, 0); }
  90% { clip: rect(16px, 9999px, 21px, 0); }
  95% { clip: rect(69px, 9999px, 43px, 0); }
  100% { clip: rect(75px, 9999px, 63px, 0); }
}

@keyframes noise-anim-2 {
  0% { clip: rect(12px, 9999px, 52px, 0); }
  5% { clip: rect(42px, 9999px, 39px, 0); }
  10% { clip: rect(64px, 9999px, 36px, 0); }
  15% { clip: rect(52px, 9999px, 15px, 0); }
  20% { clip: rect(79px, 9999px, 7px, 0); }
  25% { clip: rect(17px, 9999px, 41px, 0); }
  30% { clip: rect(15px, 9999px, 20px, 0); }
  35% { clip: rect(62px, 9999px, 87px, 0); }
  40% { clip: rect(94px, 9999px, 11px, 0); }
  45% { clip: rect(49px, 9999px, 10px, 0); }
  50% { clip: rect(82px, 9999px, 4px, 0); }
  55% { clip: rect(70px, 9999px, 100px, 0); }
  60% { clip: rect(62px, 9999px, 23px, 0); }
  65% { clip: rect(51px, 9999px, 56px, 0); }
  70% { clip: rect(41px, 9999px, 24px, 0); }
  75% { clip: rect(6px, 9999px, 85px, 0); }
  80% { clip: rect(96px, 9999px, 58px, 0); }
  85% { clip: rect(16px, 9999px, 24px, 0); }
  90% { clip: rect(40px, 9999px, 31px, 0); }
  95% { clip: rect(91px, 9999px, 34px, 0); }
  100% { clip: rect(87px, 9999px, 26px, 0); }
}